BaseSkin\Themepack Skinning Tutorial

[Fatman_do]

You will need to install WinRar to automatically create a SFX themepack installer.

There are a few files you will have to edit the text in them.

In CallThemeName.bat, you have to set the name of your theme.

Code:

@Echo Off

set ThemeName=WS-Tutorial (Command Center)

Edit the readme.txt file to state what you want it to contain.
Edit the SFXoptions.txt file to include your theme name also and any other additional info.

Code:

;The comment below contains SFX script commands

Path=%SKINROOT%\Advisor.WS-Tutorial (Command Center)
Setup=.\copytheme.bat
Overwrite=1
Title=AdVisor WS-Tutorial (Command Center) ThemePack
Text
{
The AdVisor Theme Pack contains all files needed to change the appearence of the BaseSkin

Files will be extracted to the directory %SKINROOT%\Advisor.WS-Tutorial (Command Center)

You can also unzip this file with WinRar to the same directory.


Many of the AdVisor ThemePacks are based on images/skins that are licenced under GLP, freeware or with permission from the from the designer.
Below are the sources for images that might be used in this ThemePack.

MediaPortal, BlueMCE2

MediaPortal, MCE

GBPVR, Blue by Sub

GBPVR, Contour by Torque

GBPVR, Advisor by MixMan

Medio, MTuned

Myth, Advisor

WS-Tutorial (Command Center), Modified images by Fatman_do

User will take full responsibility for continuing installation of this package
}

Download and use this batch file (it will overwrite exsisting CreateThemePack.bat with quotes around the file name variables.)
[ATTACHMENT NOT FOUND]

There you have it. The batch files will pull in only the files needed for a themepack. Test it out, then let post your theme info to the forums. If you don't have/want a wiki account, MixMan, myself (Fatman_do) or someone else can post your file for you to the wiki.

[Fatman_do]

If you want to see the finished product, here it is.

The images may not work so well, I couldn't test this higher than 1/4 scale on my monitor.

[MixMan]

Thanks Fatman_do for making this tutorial. Very nice of you. :-)
The demo themepack does not start, because the file BottomBar.png should be in the main menu sub dir, not the skin root.
I just saw that I had forgotten to include the file folder.png in the copytheme.bat
I will make an update to v2.5 with some smaller XML adjustment and include the folder.png and perhaps a faded background that shows with a popup....like the MCE2blue skin. What do you think about that.
Any more mods ?

[Fatman_do]

Thanks Fatman_do for making this tutorial. Very nice of you. :-)
The demo themepack does not start, because the file BottomBar.png should be in the main menu sub dir, not the skin root.
I just saw that I had forgotten to include the file folder.png in the copytheme.bat
I will make an update to v2.5 with some smaller XML adjustment and include the folder.png and perhaps a faded background that shows with a popup....like the MCE2blue skin. What do you think about that.
Any more mods ?

I didn't catch that it didn't work with baseskin because I had that file there from a previous test. The file is coded to the root, the problem is the batch file does the copying by name only, which I didn't catch. I will fix this and place it in the main menu directory.

Maybe just wildcard copying instead of named (except for when you need to change names)?

What about this CopyTheme.bat
It catches everything, regardless of name.

Code:

call .\fonts\install_fonts.bat
call .\sounds\install_sounds.bat

REM Below Images are used by AdVisor sub menues
Copy *.* ..
copy ScreenSaverLogo.png ..\ScreenSaver\Logo.png

REM MCE resources copy
Copy background.png "..\resources\background.png
copy Button_Normal.png "..\resources\button_green_nofocus_165x32.png"
copy Button_Selected.png "..\resources\button_green_focus_165x32.png"
copy Button_PopupNormal.png "..\resources\button_green_nofocus_150x32.png"
copy Button_PopupSelected.png "..\resources\button_green_focus_150x32.png"
copy Button_CenterNormal.png  "..\resources\button_green_nofocus_120x32.png"
copy Button_CenterSelected.png "..\resources\button_green_focus_120x32.png"
copy ListBarNormal.png "..\resources\list_sub_nofocus.png"
copy ListBarSelected.png "..\resources\list_sub_focus.png"
copy ListBarActive.png "..\resources\list_sub_active.png"

REM Below are used by Apperance Manager
copy Button_Normal.png "..\mainbuttonnormal.png"
copy Button_Selected.png "..\mainbuttonselected.png"
Copy background.jpg "..\mainbackground.jpg"
Copy mainbackground.jpg "..\mainbackground.jpg"

REM Below installs the rest of the Themepack
copy ".\main menu\*.*" "..\main menu"
copy ".\osd\*.*" "..\osd"
copy ".\panels\*.*" "..\panels"
copy ".\AllTitleLogos\*.*" "..\AllTitleLogos"
copy ".\AllTaskImages\*.*" "..\AllTaskImages"
cd "..\AllTaskImages\"
call DistributeTaskImages.bat
cd..

You would have to update this in themes as well (or at least in new themes if the old version works in those themes.)

[Fatman_do]

I have fixed the bug and updated the download.

(I used the copytheme.bat that I posted in the previous post)

[Old Dog]

Code:

Copy background.jpg "..\mainbackground.jpg"
Copy mainbackground.jpg "..\mainbackground.jpg"

Should the first line be: Copy background.jpg "..\background.jpg"?

[Fatman_do]

Code:

Copy background.jpg "..\mainbackground.jpg"
Copy mainbackground.jpg "..\mainbackground.jpg"

Should the first line be: Copy background.jpg "..\background.jpg"?

At first glance, you might think that.

It is a AM support "catch".

If the themepack creator does not create a mainbackground.jpg, but just background.jpg, it will copy the background.jpg as mainbackground.jpg
(say that five times fast).

If the creator did, it will overwrite the just copied version of mainbackground.jpg with the actual intended one, in case there was a difference.

[Fatman_do]

If you have tried out the Mayhem3 themepack, you will notice there was a horizontal "screening" image over the task images. Task images are one of the last elements drawn on the screen, so how do you place an image on top of them?

I created a quick image of a horizontal grill with an opening for a recording indicator image, this is the results:
[ATTACHMENT NOT FOUND]



If we wanted an image to be displayed on the screen, we would normally place those in the "Background" composite image.

Code:

    <CompositeImages>
        <CompositeImage name="Background" size="1280,720">        
        <DrawImage filename="..\mainbackground.jpg" loc="0,0" size="1280,720"/>
        <DrawImage filename="se.png" loc="0,0" size="1280,720"/>
        <DrawImage filename="..\ListView.png" loc="400,100" size="870,520"/>
        <DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,0" size="1280,100"/>
        <DrawImage filename="..\BottomBar.png" loc="0,620" size="1280,100"/>
        <DrawImage filename=".\button_close.png" loc="1225,8" size="35,35"/>
        [B][color=Red]<DrawImage filename=""..\screen.png"" loc="950,120" size="300,300"/>    [/color][/B]
        <DrawText text="Command Center" loc="20,20" size="1000,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
        </CompositeImage>

But, that image will be covered up by our task image. We want something over the top of them.

So we don't use what I have in red. Instead we add this composite image:

Code:

<CompositeImage name="CutAway" size="1280,720">            
    <DrawImage filename=".\screen.png" loc="950,120" size="300,300"/>
</CompositeImage>

This images is drawn after the task image (but before any visualizations). You don't have to use a "screen", be creative.

[Fatman_do]

Now for the "recording indicator".

I added a green circle, and placed it in the background composite image.

Code:

        <CompositeImage name="Background" size="1280,720">        
            <DrawImage filename="..\mainbackground.jpg" loc="0,0" size="1280,720"/>
            <DrawImage filename="se.png" loc="0,0" size="1280,720"/>
            <DrawImage filename="..\ListView.png" loc="400,100" size="870,520"/>
            <DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,0" size="1280,100"/>
            <DrawImage filename="..\BottomBar.png" loc="0,620" size="1280,100"/>
            <DrawImage filename=".\button_close.png" loc="1225,8" size="35,35"/>
            [B][color=Red]<DrawImage filename="..\RecordingNotInProgress.png" loc="957,381" size="30,30"/>[/color][/B]    
            <!-- DrawImage filename="..\LogoInset.png" loc="20,360" size="145,90"/ -->
            <DrawText text="Command Center" loc="20,20" size="1000,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
        </CompositeImage>

That is it for the main menu's skin.xml file.

Next I changed the VAPanel.xml file located in the panels directory.

Code:

<settings>
    <!-- Text Style -->
    <TextStyles>
        <TextStyle name="BigText" color="White" typeFace="Arial Narrow" size="24" style="bold"/>
        <TextStyle name="MediumText" color="White" typeFace="Arial" size="18" style="bold"/>
        <TextStyle name="SmallText" color="LightGray" typeFace="Arial Narrow" size="18" style="bold"/>
        <TextStyle name="WarningText" color="Red" typeFace="Arial Narrow" size="18" style="bold"/>
    </TextStyles>
    
    <!-- Composite Images -->    
    <CompositeImages>
        <CompositeImage name="VAPanel" size="[color=Red][B]1280,720[/B][/color]">            
            <!--<DrawRoundedRect loc="2,5" size="310,100" radius="5" borderWidth="1" borderColor="Transparent" fillColor="Black"/>    -->
            <!--DrawText text="@Time" loc="5,5" size="295,35" textStyle="BigText" align="Left"/-->    
            <!--DrawText text="@DayOfWeek" loc="150,5" size="295,40" textStyle="BigText" align="Left"/-->    
            <!--DrawText text="@Date" loc="5,36" size="295,28" textStyle="MediumText" align="Left"/-->    
            
            <!-- Up to 5 different priority of messages can be queued -->
            <!-- If you only want to group messages together so that you only see the highest priority message -->
            <!-- within the group, set the loc field off all the mesasges in the group to be the same -->
            <DrawText text="@Priority0Message" loc="425,120" size="500,90" textStyle="WarningText" align="Left"/>    
            <DrawText text="@Priority1Message" loc="425,120" size="500,90" textStyle="WarningText" align="Left"/>    
            <DrawText text="@Priority2Message" loc="425,120" size="500,90" textStyle="SmallText" align="Left"/>    
            <DrawText text="@Priority3Message" loc="425,120" size="500,90" textStyle="SmallText" align="Left"/>    
            <DrawText text="@Priority4Message" loc="425,120" size="500,90" textStyle="SmallText" align="Left"/>    
        </CompositeImage>                                        
    
        <!-- Panel-level icon that will be displayed whenever a recording is active -->
        <CompositeImage name="RecordingInProgress" size="30,30">            
            <DrawImage filename="RecordingInProgress.png" loc="0,0" size="30,30"/>
        </CompositeImage>    

        <CompositeImage name="Background" size="[color=Red][B]1280,720[/B][/color]">            
        </CompositeImage>                                        
    </CompositeImages>        
                

    <!-- Special Elements -->
    <SpecialElements>
        <SpecialElement name="VAPanel" size="[color=Red][B]1280,720[/B][/color]"/>
        
        <!-- The image location of the panel-level icon 0 -->
        <SpecialElement name="PanelIcon" loc="[B][color=Green]957,381[/color][/B]" size="30,30"/>    
        
        <!-- The location of the image, if any, associated with the highest priority message being displayed -->    
        <SpecialElement name="MessageIcon" loc="425,215" size="80,80"/>
    </SpecialElements>    
</settings>

What I have in red is that I expanded the panel's CompositeImage (two of them) and SpecialElement to match the screen size. This isn't normally the case with this panel. Then I changed the PanelIcon Element to be the location I wanted (In green). This element controls the "RecordingInProgress" Composite Image. The MessageIcon element is for other images the panel displays (like album art).

You can see there is also text that can be displayed that I disabled by commenting them out.

[Fatman_do]

BaseSkin (and Chameleon) use a full screen image drawn over the top of the background image, that can be used to add another layer or design element to the image.

For BaseSkin, there are four different ones. The file names used are mostly "background_mask.png". There are three others as well (background_mask_news.png, background_mask_search.png and background_mask_tvguide.png).

The three other images allows for some variation from the rest of the background masks.

For the most part, masks are just blank images and should be included as blank images if you are not using them in your theme.

Chameleon does not use this image, instead it uses SkinEffects. This is a similar but different scheme that allows a different "mask" for each plugin, and can be controled by the AppearanceManager plugin. For more on SkinEffects, see the Appearance Manager Skinning Tutorial.

ScreenNameShadow and ButtonTextShadow

ScreenNameShadow and ButtonTextShadow are textstyles that are used to outline text, or if you are creating your own skin, can be used to create a drop shadow effect.

I use this in all the screen names and button texts for Chameleon to outline text for better contrast with button images or backgrounds. There is a <DrawTextWithOutline> method, but the colors have to be set in that element, and cannot be changed by the baseskin.xml file.

Basically, what I do is draw the outline text I need offset with one color, then the actual text in the correct location. This is an example I use for buttons.

Code:

<CompositeImage name="NormalButtonImage" size="180,40">
      <DrawImage size="180,40" loc="0,0" filename="button_Normal.png" />
      <DrawText text="@buttonText" loc="10,7" size="160,40" textStyle="ButtonTextShadow" align="Left" />
      <DrawText text="@buttonText" loc="10,5" size="160,40" textStyle="ButtonTextShadow" align="Left" />
      <DrawText text="@buttonText" loc="8,5" size="160,40" textStyle="ButtonTextShadow" align="Left" />
      <DrawText text="@buttonText" loc="8,7" size="160,40" textStyle="ButtonTextShadow" align="Left" />
      <DrawText text="@buttonText" loc="9,6" size="160,40" textStyle="ButtonText" align="Left" />
    </CompositeImage>

As you can see, I offset the location by one pixel in four directions to get the outline effect I was looking for.

Room for Text.
Another consideration I try to provide for is I try to make as much space availible for text as possible. This allows longer custom button names or provides longer text strings for languages that use more characters than English for the same terms with less font clipping.

Horizontal Menus
Horizontal Menus are only supported by the Main menu, not any plugins at this time. There really isn't much different with them vs. standard vertical menus. A common design change is that the Task image serves as the button image, or part of it. Download a horizontal menu skin to investigate further, but there is no tricks really involved. It is structured very much the same way as a vertical menu, just locations of images are moved around.

This week I will release a PDF file for offline reading and printing.

I just have to:
*pull some images off this post
*pull every post
*paste into a word processor
*format all text with highlights
*spell check
*drop in images
*proof read
*create PDF file
*upload
*test download
*re-read and find errors
*re-spell check
*re-proof read
*re-create PDF file
.......you get the point.

All this and read every post on this forum.:eek: