New Community Theme: Bamboo (1 Viewer)

morpheus_xx

Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    Good that you were able to change the layout (y)
    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

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,705
    3,491
    Stuttgart
    Home Country
    Germany Germany
    Ok, thats really simple. I created following theme for the Titanium skin :)
    • 1 row horizontal scroll bar
    • Bamboo background
    • Color adjustments for the theme
    preview.jpg


    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.
     

    Attachments

    • green-bamboo.zip
      2 MB
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,705
    3,491
    Stuttgart
    Home Country
    Germany Germany
    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 :)
     
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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"
     
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,705
    3,491
    Stuttgart
    Home Country
    Germany Germany
    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-namespace:confused:ystem"
    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"
    >

    small_butons.png
     
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    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:
    titanium_5x2.jpg


    with:
    XML:
      <!-- 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
    XML:
    <WrapPanel x:Name="ListItemsHost" IsItemsHost="True" Orientation="Vertical"/>
    and without hover glow image.
     
    Last edited:

    Users who are viewing this thread

    Top Bottom