New Community Theme: Bamboo (2 Viewers)

[morpheus_xx]

Good that you were able to change the layout

Open is how I can fix selection focus on center button and scrolling is just moving all buttons to right or left side, as also used with MP1.

We have code for this already, but once I forced the behavior to auto centering, the menu didn't work very well. So I'll add an Jira entry to fix this for later versions.

Do you want to put your modifications into an own theme? There are already many themes as template, i.e. take "blue" as example. You simply need to add another folder structure to skin (Skin\Titanium\themes\Horizontal) and place there a "theme.xml" and the "styles\OtherControlOverrides.xaml" with your modifications. It's very simple and you have created your first own theme!

 

[ge2301]

Ok, thats really simple. I created following theme for the Titanium skin

• 1 row horizontal scroll bar
  
• Bamboo background
• Color adjustments for the theme

Because it was so easy I gonna try more things. My idea is to create a cool asia theme, because I lived 4 years in Japan

Edit: For those who like the theme, please extract the zip-file to \Team MediaPortal\MP2-Client\Plugins\Titanium\Skin\Titanium\themes\
Theme can be selected in settings --> appearance then. Plugin will follow.

 

[morpheus_xx]

Nice progress, I like the style

The next step for you is to create a plugin for your theme: MP2 skins and their themes can be extended also from plugins. This has the advantage that they can be distributed and maintained independently from MP2 releases.

As an example look into Incubator\Black Backdrop. It's a plugin which only adds a theme to the "default" skin. In principle only a "plugin.xml" and the files for skin.

Few things to change inside plugin.xml

• PluginId="{2C53650F-3C44-4c0d-A620-F8FD82370032}" --> create a new Guid (VisualStudio->"Extras"->"Guid erstellen")
• Add a line <PluginReference PluginId="{13A01D03-CB45-4F55-88F3-7750A16B5EB5}"/> <!-- Titanium --> to "<DependsOn>", so your plugin will be enabled after Titanium

 

[ge2301]

Hi morpheus_xx,

I created the plugin. Just not sure if following needs to be renamed as well <Resource Id="BlackBackdropSkin" Directory="Skin" Type="Skin"/> ?
After your feedback I gonna upload the plugin. How and where shall I upload it? zip.file with plugin.xml in root or is there a specified location for that?

I'd like to improve the theme further. I found an option to resize the button pictures. How can I adjust the grid and glow frame size (just size of basichome_button_focus.png?) ?
I want to have 5 smaller buttons visible on one screen.

The auto focus on the center button can be implemented later after your fix

 

[ge2301]

We have code for this already, but once I forced the behavior to auto centering, the menu didn't work very well. So I'll add an Jira entry to fix this for later versions.

Maybe this helps: http://stackoverflow.com/questions/...ll-the-item-into-the-center-of-the-listview-c

 

[morpheus_xx]

Just not sure if following needs to be renamed as well <Resource Id="BlackBackdropSkin" Directory="Skin" Type="Skin"/> ?

Yes, rename the IDs as well: they are used as key for registration, if they are duplicated, you get an error during load. You could name it like "TitaniumBambooSkin"

 

[morpheus_xx]

zip.file with plugin.xml in root or is there a specified location for that?

The root folder should be "TitaniumBambooSkin", containing plugin.xml and all other folders.

I found an option to resize the button pictures. How can I adjust the grid and glow frame size (just size of basichome_button_focus.png?) ?

The button sizes are defined by constants. This is why vector graphics are so great The glow border is an exception, because it is a simple image. If you specify other width, it will get shrinked and lose aspect ratio. So I recommend you crop the picture to your desired size (cut out the middle).

 

[ge2301]

I could resize butons and glow border without problems. However only 3 butons are shown in one row.
There seems to be a grid in the background, for which I can not find any settings having influence.

Furthermore the skin falls back to default after every start. Checking log file shows a problem with the "BackgroundManager", see ClientError.log.
I have taken this part from another theme, no idea why causing trouble in my theme.

Part of my Other ControlsOverride.xaml:

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary
xmlns="www.team-mediaportal.com/2008/mpf/directx"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespaceystem"
xmlns:collections="clr-namespace:MediaPortal.UI.Presentation.DataObjects;assembly=MediaPortal.UI"
xmlns:mp_special_controls="clr-namespace:MediaPortal.UI.SkinEngine.SpecialElements.Controls"
xmlns:fanart="clr-namespace:MediaPortal.Extensions.UserServices.FanArtService.Client;assembly=FanArtService.Client"
xmlns:bgm="clr-namespace:MediaPortal.UiComponents.BackgroundManager.Converter;assembly=BackgroundManager"
DependsOnStyleResources="Colors,Buttons,Consts,OtherControls,Widgets"
>​

 

[morpheus_xx]

Regarding the error, have you added a reference to Titanium plugin already? I thought it should work then, because BackgroundManager is a dependency of Titanium.

If you added it already, also add the dependencies of Titanium:
<PluginReference PluginId="{5D239050-02B8-4f58-8301-7630A1C4CF85}"/> <!-- SkinBase -->
<PluginReference PluginId="{F6C71648-3874-4d27-9232-C41EBEDE0337}"/> <!-- Background Manager -->
<PluginReference PluginId="{AD9C0439-F9DA-443c-BAC3-163891FB09F1}"/> <!-- Weather -->

I check where the size of tiles is defined

 

[morpheus_xx]

I think you should adopt:
<!-- Menu template -->
<DataTemplate x:Key="MainMenuItemDataTemplateHover">
<Grid x:Name="ItemControl" Margin="0,0,0,0" Width="580" Height="244">

And please check the "homebutton_mask.png" if it matches your new size (it's used for transparent corners).

Then check "buttons.xaml":
<!-- Home items button style -->
<Style x:Key="HomeButtonControlStyle" TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!--<Image x:Name="HoverGlow" Source="basichome_button_focus.png" Margin="-45" IsVisible="false" />-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
-> if you comment out the "HoverGlow" it should fit on screen properly. This means the basichome_button_focus.png has to fit to your desired button size (and check the "Margin" property!)

It looks like this:

with:

  <!-- Menu template -->
  <DataTemplate x:Key="MainMenuItemDataTemplateHover">
  <Grid x:Name="ItemControl" Margin="0,0,0,0" Width="340" Height="224">
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition Height="180"/>
  <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>

and

<WrapPanel x:Name="ListItemsHost" IsItemsHost="True" Orientation="Vertical"/>

and without hover glow image.