BaseSkin\Themepack Skinning Tutorial

[Fatman_do]

Mixman I am going to help shiningdragon make a theme and hopefully teach others how to do so as well. Alot of what I write here will change over time.

This is going to be for Beginner skinners.
The goal: Make this tutorial explain everything in enough "plain english" to make someone with NO skinning skill, to be able to try to make themes. This is where I was a few months ago. If anyone has comments, PM me or post in the comments thread so this one does not get cluttered up.

Once this thread is complete, I will make a .pdf file for the wiki.

[Fatman_do]

The easiest way to make a themepack is find a layout that you like and change the image files in the BaseSkin and BaseSkin\Main Menu directory. Once that is done, you can tweak the locations as will be shown later on.

The ThemePack in this example will use Left side buttons and will make a 16:9 (1280x720) widescreen (Main Menu only) version. The same rules will apply for right-side buttons 4:3 skins as well, so don't let that stop you from following along.

I use Notepad++ as my .xml editor, but there are many others out on the web. In a pinch, you can use Notepad, but I like the color coding, grouping, and valid xml checking (via XML Tools plugin found on download page).

I will use BaseSkin (v2.5) in its default form (you can use any installed themepack here).

Make a copy of BaseSkin and rename it to your theme (I will use Advisor.WS-Tutorial, use whatever you want.)

To make this a Widescreen theme, I need to change the Advisor.WS-Tutorial\main menu\skin.xml file. Open the file in your editor of choice and replace 1024,768 (or 720,480) to 1280,720. BaseSkin and many themepacks already have the main menu in "High Resolution" so this will make the changes easier.

I will need to change this value in my example, 3 places. I will go into detail later about what we are doing, we just need this change to get started.

Code:

<settings>

    [color=SeaGreen]<!-- text style Note: ButtonText defenition applies to OK button in Error mess popup -->[/color]
    <TextStyles>
        <TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>

    </TextStyles>        
        
[color=SeaGreen]    <!-- Composite Images -->    [/color]
    <CompositeImages>
        <CompositeImage name="Background" size="[color=Red]1280,720[/color]">                        
            <DrawImage filename="..\background.jpg" loc="0,0" size="[color=Red]1280,720[/color]"/>
            <DrawImage filename="..\ListView.png" loc="400,145" size="590,485"/>
            <DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,0" size="1024,105"/>
            <DrawImage filename=".\button_close.png" loc="970,8" size="35,35"/>
[color=SeaGreen]            <!-- DrawImage filename="..\LogoInset.png" loc="20,360" size="145,90"/ -->[/color]
            <DrawText text="Main Menu" loc="80,20" size="270,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
        </CompositeImage>

        <CompositeImage name="CenteredSelectedButtonImage" size="200,50">
            <DrawImage filename="..\button_selected.png" loc="4,5" size="185,48"/>
            <DrawText text="@buttonText" loc="0,11" size="185,34" textStyle="ButtonTextSelected" align="Center"/>            
        </CompositeImage>            
        
        <CompositeImage name="MoreUp" size="50,20">
            <DrawImage filename="moreup.png" loc="0,0" size="40,20"/>    
        </CompositeImage>        
        <CompositeImage name="MoreDown" size="50,20">
            <DrawImage filename="moredown.png" loc="0,0" size="40,20"/>    
        </CompositeImage>    

        <CompositeImage name="SelectedButtonImage" size="400,75">
            [color=SeaGreen]<!-- DrawRoundedRect loc="87,1" size="266,63" radius="45" borderWidth="0" borderColor="Black" fillColor="Blue"/ -->[/color]
            <DrawImage filename="..\button_selected.png" loc="90,0" size="260,65"/>
            <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextSelectedHD" align="Left"/>
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>
        </CompositeImage>
        
        <CompositeImage name="NormalButtonImage" size="400,75">
            <DrawImage filename="..\button_normal.png" loc="90,0" size="260,65"/>
            <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextHD" align="Left"/>            
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>    
        </CompositeImage>    
        
        <CompositeImage name="ErrorMessagePopup" size="[color=Red]1280,720[/color]">
            [color=SeaGreen]<!-- DrawRoundedRect loc="30,100" size="650,200" radius="10" borderWidth="4" borderColor="LightGray" fillColor="Vertical:#292929-#000000"/ -->[/color]
            <DrawImage filename="..\popup_background.png" loc="30,100" size="950,250"/>
            <DrawText text="@errorMessage" loc="50,120" size="920,120" textStyle="TaskDescription" align="Center"/>                        
            <Element name="OkButton" loc="380,285" size="185,48"/>                        
        </CompositeImage>    
    </CompositeImages>    
[COLOR="SeaGreen"]
    <!-- special elements -->[/COLOR]
    <SpecialElements>
        <SpecialElement name="Buttons" loc="15,145" spacing="70" alwayCentered="false" maxVisibleButtons="7" allowTopBottomWrap="false" showNumbers="false"/>        
        <SpecialElement name="TaskDescription" visible="false" loc="190,685" size="830,60"/>        
        <SpecialElement name="TaskImage" visible="false" loc="65,650" size="105,80"/>
        <SpecialElement name="MoreUp" loc="35,120"/>        
        <SpecialElement name="MoreDown" loc="35,635"/>    
        <SpecialElement name="ForegroundTransparency" percent="100"/>
        <SpecialElement name="CloseButton" loc="970,8" size="35,35"/>
[COLOR="SeaGreen"]
        <!-- plugin panels -->[/COLOR]                
        <SpecialElement name="Panel" panelName="Clock" visible="true" transparency="1" loc="450,50" size="600,95"/>
        <SpecialElement name="Panel" panelName="NextRecording" visible="true" transparency="1" loc="440,180" size="690,110"/>
        <SpecialElement name="Panel" panelName="News" visible="true" transparency="1" loc="50,680" size="910,50"/>
[COLOR="SeaGreen"]
        <!-- music visualizations -->[/COLOR]
        <SpecialElement name="Inset" loc="400,145" size="590,485"/>
    </SpecialElements>

</settings>

Save the file, change to this skin in the GBPVR config program and take a look. For those of you without widescreen, you don't have to do anything here. For widescreen users, it probably only looks stretched out left to right a bit.

The next post I will explain each group in the main menu\skin.xml file, as I go through them.

Up next TextStyles.

[Fatman_do]

In our skin file you probably noticed words wrapped with <...> and </....> symbols. These symbols define what are called elements. The first text in them identifies the element. I call them "Tags". An example of an element then is <Tag>......</Tag>

(The names are what I call them, if someone wishes to correct me, PM me or reply in a new thread, please do not post here)

The TextStyle Element look likes this:

Code:

    [color=SeaGreen]<!-- text style Note: ButtonText defenition applies to OK button in Error mess popup -->[/color]
    <TextStyles>
        <TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>

    </TextStyles>

If you notice, the line I colored green is what is referred to as a comment line. This code is not used by the program, it is a way to leave notes or turn off features. To make a comment, the beginning of the comment starts with "<!--" and the end of the comment ends with "-->"

Code:

<!-- This is a comment -->

<!-- A comment can
       be many lines
       <with>Other</with>
       elements turned off-->

The next line is:

Code:

<TextStyles>

This tells the plugin\gbpvr what the text styles will be.
This is a "parent" element. All elements need to be closed with a "/". There are two ways this is done. Either two separate tags, or in-line.

Code:

<TextStyles>Stuff in between[color=Red]</TextStyles>[/color]

or

<ElementName value=xx [color=Red]/[/color]>

Ok, confused yet? Just remember if you have an nested element, there needs to be a <Name> stuff in the middle </Name>

If it is not a group, end it with a "/>". You don't really have to worry about this unless you delete one by accident, then you could cause a failure to load gbpvr or the plugin menu.
(I have done this, that is why I am bringing it up. The plugin for notepad++ that I use catches these, other editors may as well.)

Ok, now on to the actual text !

[Fatman_do]

The TextStyle Element look likes this:

Code:

<TextStyles>
    <TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/>
    <TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/>
    <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>

</TextStyles>

We see here that BaseSkin main menu skin.xml file has a textstyle for the buttons (ButtonText, and ButtonTextSelected). There is also a textstyle defined for task descriptions. These could have been called anything, but it is good practice to use descriptive names. Do not use spaces in names. It is also good practice to use uppercase on each word like shown there. Remember everything is case sensitive here.

Lets break down a textstyle further by going through it a step at a time.

We have the:

Begining symbol

Code:

<

Tag

Code:

TextStyle

Name

Code:

name="ButtonText"

Color (any valid html or .net color, web search for info)

Code:

color="White"

Font used (use standard windows fonts only for now)

Code:

typeFace="Arial"

Size (Adjust this to suit your needs.)

Code:

size=22

Style (bold, plain, narrow are valid here)

Code:

style="bold"

Closing symbol

Code:

/>

That shows you how to define a TextStyle for use by the main menu.

Panels (Rss reader, music, VA, Weather, ect.) are controled in a separate "panelname".xml file.

There is more to cover about TextStyles used in the main menu in the Baseskin.xml file that I will go over later.
If this was a widescreen version of BaskSkin, I could comment out the first two text styles, and let the baseskin.xml file drive these sizes. Because we have different resolutions, I still need these two. The textstyles in the baseskin.xml are smaller. (I would have done this)

Code:

<TextStyles>
[COLOR="SeaGreen"]    <!--TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/-->
    <!--TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/-->[/COLOR]
    <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>
</TextStyles>

[Fatman_do]

Before I get into composite images, items in these .xml files are displayed in order from first-to-last. If you want something in the background, list it first. Elements listed last are on top.

Lets look at the composite image elements, I will only list what is needed for the background first.

Code:

[color=SeaGreen]<!-- Composite Images -->    [/color]
    <CompositeImages>
        <CompositeImage name="Background" size="1280,720">             
            <DrawImage filename="..\background.jpg" loc="0,0" size="1280,720"/>
            <DrawImage filename="..\ListView.png" loc="400,145" size="590,485"/>
            <DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,0" size="1024,105"/>
            <DrawImage filename=".\button_close.png" loc="970,8" size="35,35"/>
[color=SeaGreen]            <!-- DrawImage filename="..\LogoInset.png" loc="20,360" size="145,90"/ -->[/color]
            <DrawText text="Main Menu" loc="80,20" size="270,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
        </CompositeImage>

As you can see, the first line is a comment.
The second line identifies this element as <CompostieImages>.
At the end of all the CompositeImages elements </CompostieImages> will close off this element.

The third line identifies the composite element "Background" (do not change this) and the size for the element is 1280,720 (1280 pixels left-right, 720 up-down).

Set this to the size of the screen resolution you want (720,480 is standard definition 4:3). This is the first thing we changed to 1280,720.

Everything in this element defined later must not be larger, or be positioned so part of it is outside these limits or they will be clipped off.

Now we get to the fourth line:

Code:

<DrawImage filename="..\background.jpg" loc="0,0" size="1280,720"/>

This tells gbpvr that the first thing it should draw is the image "background.jpg" and its location from the upper-left corner of the screen is 0,0 (0 pixels right, 0 pixels down). The "..\" before the background.jpg tells it not to look in this directory (main menu), but in the directory before it. The size="1280,720" tells gbpvr what size to display the image. Make sense?

If you wish to make this menu Appearance Manager compatible, use the name "..\mainbackground.jpg" instead (also copy the image as background.jpg to use in plugin backgrounds). No matter what you use, the image file must match the name called for. Also, right after that line, add <DrawImage filename="se.png" loc="0,0" size="1280,720"/> for ScreenEffects. I will be doing this, but this is optional.

[COLOR="DarkRed"]*Skinner's bonus tip:
You can use .bmp, .png, and .gif files for backgrounds as well. You still need a "background.jpg" file that the plugins use, unless you change all those skins as well. You can even use xml code instead of an image.

Backup a copy of your current skin.xml and try this, change the line:
<DrawImage filename="..\background.jpg" loc="0,0" size="1280,720"/>
To this:
<DrawRect loc="0,0" size="1280,720" borderWidth="1" borderColor="Transparent" fillColor="Vertical:Cyan-Black"/>
Save and check it out. [/COLOR]


The next thing drawn on the screen is:

Code:

<DrawImage filename="..\ListView.png" loc="400,145" size="590,485"/>

We want to change this since it doesn't look right. Look at my screen shot and you will see. I have alot to fix.
(Your screen shot will vary if you used a different resolution or theme.)
[ATTACHMENT NOT FOUND]

Lets say I want a horizontal bar running across the screen at the top and bottom. Maybe I will make those be 100 pixels high. (Just a guess right now, we can change it later). Now for some math. Our screen is 720 pixels high -100 for the top bar, -100 for the bottom bar. Our listview can be up to 520 pixels high before it would go into those bars. I want to keep it where it is left -to-right and make it come close to the right side of the screen. Our screen is 1280 wide. The Listview is at 400, I want maybe 10 leftover on the right. That will leave me with 870 pixels. So now I know my size, 870 x 520, and my starting distance of 400,100 (remember, I want it to start right at the bottom of the top bars I will add later.

Lets change the code and take a look.

Code:

<DrawImage filename="..\ListView.png" loc="400,100" size="870,520"/>

Not great, not bad. You get the point how you can plan your layout and place things and size them using simple math. When you look at the Listview.png file, you will see a clear boarder around it. That is why my listview box does not look right. I need to adjust my settings or make a new image. I am going to make a new box later, so I will leave this alone for now.

[Fatman_do]

Ok, lets pick up the pace with the reset of the elements left in the background composite image.

Code:

    <DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,0" size="1024,105"/>
    <DrawImage filename=".\button_close.png" loc="970,8" size="35,35"/>
    <!-- DrawImage filename="..\LogoInset.png" loc="20,360" size="145,90"/ -->
    <DrawText text="Main Menu" loc="80,20" size="270,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
</CompositeImage>

The first line here is the gray bar being displayed in my screenshot. If you browse to the \AllTitleLogos\ directory, you will see a bunch of different files all with the same image in it. This is how we get the bar to show up in all the plugins. Change this picture to be what you want. Once you have changed start_logo.png, I use a batch file to quickly change all the files. Download this file and unzip it to the \AllTitleLogos\ directory and double-click the batch file. [ATTACHMENT NOT FOUND]

I wanted a bar that was 100pixels tall so I will change the height in the skin file from 105 to 100. I also need it to go all the way across the screen, so I change it to 1280 instead of 1024. The images don't have to be the same size. They will be stretched to fit the size. This example image has a clear strip running along the bottom, so I need to adjust the sizes in my .xml, or use an image without a clear bottom. To be quick, I will fill the clear area with a green color that is not transparent.

If I want to use the exact same image on the bottom as I am on top, I could add the line:

Code:

<DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,[B]620[/B]" size="1280,100"/>

Remember, It draws from top of the list to bottom, so I would place that line right after the first start_logo line.

I want an inverted image (or different one altogether), I just mirror the image and give it a different name and put it in the "BaseSkin\" folder and call it correctly in the skin.

Code:

<DrawImage filename="..\BottomBar.png" loc="0,620" size="1280,100"/>

I also move the close button over to start 55 pixels from the right side of the screen. (If you don't want this, just delete that line.)
The ".\" in front instead of the usual "..\" we have seen tells it to look in this directory for this file.

Code:

<DrawImage filename=".\button_close.png" loc="[B]1225[/B],8" size="35,35"/>

The next line is commented out. It is to show a logo. I will leave this alone. If you want a logo, use this line and position it where you want. Make your logo have the same file name.

Finally is the text "Main Menu"

Code:

<DrawText text="Main Menu" loc="80,20" size="270,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>

I want it to say something else. I will change the text="Main Menu" to say something else. The location is fine for me, but I might need to bump up the length allowed from 270 to fit my longer description. Text will not be stretched like images are, so I will go crazy and change it to 1000.
Transparency="1", ok with me (not sure what all options are, I think 1 and 0).
Now for something different. The textStyle="ScreenNameHD", where did that come from? We did not define this textstyle in this .xml file, so it must pull that in from the Baseskin.xml. If we wanted to change the color, font, size, we need to edit that file. Last we have align="Left". (Right and Center are also valid options here). A note on the justification. The text is justified from the bounding size listed. If I had this text align="Right", the last letter would end at 1080 pixels from the left of the screen.

I cheated and jumped ahead to the Baseskin.xml file and changed the ScreenNameHD text. I also added a green border around BaseSkin's Listview and washed over it with the same color with about 30% tranparency. I also added the same color to the Button_Selected.png (gradual transparent from center) just to change it up a bit. Here is a screenshot of what I have now.
[ATTACHMENT NOT FOUND]

Here is what we have gone through so far:

Code:

<settings>

    <!-- text style Note: ButtonText defenition applies to OK button in Error mess popup -->
    <TextStyles>
        <TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>

    </TextStyles>        
        
    <!-- Composite Images -->    
    <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"/>
            <!-- DrawImage filename="..\LogoInset.png" loc="20,360" size="145,90"/ -->
            <DrawText text="Command Center" loc="80,20" size="1000,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
        </CompositeImage>

I also changed the color of the ScreenNameHD textstyle in the Baseskin.xml file to color="#00ff00"

[Fatman_do]

Now I am going to reorganize the xml file to group the buttons together. I will move the MoreUp and MoreDown composite images below the buttons.

Code:

<CompositeImage name="CenteredSelectedButtonImage" size="200,50">
    <DrawImage filename="..\button_selected.png" loc="4,5" size="185,48"/>
    <DrawText text="@buttonText" loc="0,11" size="185,34" textStyle="ButtonTextSelected" align="Center"/>            
</CompositeImage>            

<CompositeImage name="SelectedButtonImage" size="400,75">
    <!-- DrawRoundedRect loc="87,1" size="266,63" radius="45" borderWidth="0" borderColor="Black" fillColor="Blue"/ -->
    <DrawImage filename="..\button_selected.png" loc="90,0" size="260,65"/>
    <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextSelectedHD" align="Left"/>
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>
</CompositeImage>
        
<CompositeImage name="NormalButtonImage" size="400,75">
    <DrawImage filename="..\button_normal.png" loc="90,0" size="260,65"/>
    <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextHD" align="Left"/>            
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>    
</CompositeImage>

As you may have guessed, the "SelectedButtonImage" is what GBPVR displays when a button is selected, "NormalButtonImage" is when a button is not selected.

"CenteredSelectedButtonImage" is for when you use "centered" buttons. This keeps the selected button in the middle of the list and the list moves, not the buttons.

This method is used often in horizontal button skins, and the Flat Blue-Hi Vis skin as well. I will use this one myself to be different.

I know this menu wasn't designed for this, so I will ignore what is in the description and explain the selected button first.

I will delete out the commented line to clean things up, here is the code I will review:

Code:

<CompositeImage name="SelectedButtonImage" size="400,75">
    <DrawImage filename="..\button_selected.png" loc="90,0" size="260,65"/>
    <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextSelectedHD" align="Left"/>
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>
</CompositeImage>

Again, the first line defines the CompositeImage "SelectedButtonImage", with the size of 400 pixels left-to-right, 75 pixels up-down.
This is the "Box" that everything about the selected button must fit within.

The second line tells us what image to display for a selected button "..\button_selected". The location is 90 pixels right from where the "Box" starts, and 0 from the top of the "Box".
The size is 260 wide, by 65 tall. Notice in this example that the button image is much smaller than the "Box" it is in.
Let me jump down two lines from here and show why. The line:

Code:

<DrawImage filename="@taskImage" loc="5,6" size="75,55"/>

tells us that a task image, "@taskImage", will be shown 5 pixels right from the start of the "Box" and 6 down. The size is also 75 by 55.
This will display a small task image to the left of the button. We could move the button image left more and move the task image to the far right to swap these around. All that would take is a little math.

I am not going to use task images in my buttons so I will delete this line.
I also want to make the buttons much longer to allow for longer text strings, which can be common for other languages.
This is what I did:

Code:

<CompositeImage name="SelectedButtonImage" size="370,75">
    <DrawImage filename="..\button_selected.png" loc="[B][color=Red]0,0[/color][/B]" size="[B][color=Red]370,65[/color][/B]"/>
    <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextSelectedHD" align="Left"/>
</CompositeImage>

I saw lower in the skin.xml file that the buttons start at 15 pixels from the left. I will keep that spacing, and stop the buttons 15 pixels from the list box for a centered look that direction. The listbox is at 400 pixels over, so 400-15-15=370 wide buttons.

The only thing I didn't discuss yet is the DrawText line, so let's get to it.
The <DrawText tells us this is a text element, the contents of the text will be "@buttonText", which is handled by GBPVR. The location of the text is 270 pixels right and 34 pixels down from the upper-left corner of this imaginary "Box".

The textstyle is "ButtonTextSelectedHD", which is defined in the baseskin.xml file since we didn't do it here. It is also left justified align="Left".

We will have to tweak the position of the text since we move button and changed its size. I am going to do something else different here as well.
I want all text to be centered on the button so I will do this:

Code:

<DrawText text="@buttonText" loc="[B][color=Red]10,15[/color][/B]" size="[B][color=Red]350,34[/color][/B]" textStyle="ButtonTextSelectedHD" align="[B][color=Red]Center[/color][/B]"/>

I changed the location of the text "box" to be 10 pixels from the left side of the button "box". This is the widest left-of-center the text is allowed to go. Since I didn't increase or decrease the button image size, the vertical position of the text should be fine.
The size I made match the 370 pixels wide of the button box, minus 10 pixels from the left side, and 10 from the right side to get me 350. The height of 34 should be good since I didn't change the height of anything else. If I made the "box" for the text taller, longer text strings would show up "wrapped" underneath. If I made the box too short, the text will get clipped off too early.
This is a picture that will explain these boxes and what I mean.
[ATTACHMENT NOT FOUND]

The height for the DrawText does not tell you how tall the text is, this defines the box size the text fits into.

So you can see the normal button is structured the same way, it just uses a different image for unselected buttons.

[COLOR="Navy"]I am going to use an image name that is BaseSkin and Appearance Manager compatible for the main menu. I am going to use "MainButtonNormal.png" and "MainButtonSelected.png"
You can follow along, or leave the names as they are.[/COLOR]

This is what my buttons look like after a re-write:

Code:

<CompositeImage name="CenteredSelectedButtonImage" size="370,75">
    <DrawImage filename="..\MainButtonSelected.png" loc="0,0" size="370,65"/>
    <DrawText text="@buttonText" loc="10,15" size="350,34" textStyle="ButtonTextSelectedHD" align="Center"/>            
</CompositeImage>            

<CompositeImage name="SelectedButtonImage" size="370,75">
    <DrawImage filename="..\MainButtonSelected.png" loc="0,0" size="370,65"/>
    <DrawText text="@buttonText" loc="10,15" size="350,34" textStyle="ButtonTextSelectedHD" align="Center"/>
</CompositeImage>
        
<CompositeImage name="NormalButtonImage" size="370,75">
    <DrawImage filename="..\MainButtonNormal.png" loc="0,0" size="370,65"/>
    <DrawText text="@buttonText" loc="10,15" size="350,34" textStyle="ButtonTextHD" align="Center"/>  
</CompositeImage>

You can do other tricks like making the size different for selected vs. non-selected buttons.

Here is a screen shot of the text centered on the buttons, with task images removed from the buttons. I also went into baseskin.xml and made ButtonTextHD be black instead of white.
[ATTACHMENT NOT FOUND]

[Fatman_do]

Now, we will wrap up the composite images.

Code:

<CompositeImage name="MoreUp" size="50,20">
    <DrawImage filename="moreup.png" loc="0,0" size="40,20"/>    
</CompositeImage>        
<CompositeImage name="MoreDown" size="50,20">
    <DrawImage filename="moredown.png" loc="0,0" size="40,20"/>    
</CompositeImage>    

<CompositeImage name="ErrorMessagePopup" size="1280,720">
    <DrawImage filename="..\popup_background.png" loc="30,100" size="950,250"/>
    <DrawText text="@errorMessage" loc="50,120" size="920,120" textStyle="TaskDescription" align="Center"/>                        
    <Element name="OkButton" loc="380,285" size="185,48"/>                        
</CompositeImage>
    
</CompositeImages>

The "MoreUp" and "MoreDown" composite images are the arrows or other image you want to use to show there are more menu selections. The size is fine for most styles, and that is all you can change here. The size of the "Box", and then the size and location of the image within it.
The actual position of those arrows on screen are defined later near the bottom of the menu. I am going to use the same image for the main menu as the plugins so I wil add "..\" before each file name.

The "ErrorMessagePopup" composite image is a popup dialog box, that the size is fine also.
You will see what is now familiar "DrawImage" and "DrawText" tags with locations and sizes like we have discussed before.
You will not need to change anything here unless you want to change its size.

The last </CompositeImages> closes off all the composite image elements. I went over that without much explaining, because you really don't need to mess with those.

Now we are left with the last part of the main menu skin.xml file.

Code:

    <!-- special elements -->
    <SpecialElements>
        <SpecialElement name="Buttons" loc="15,145" spacing="70" alwayCentered="false" maxVisibleButtons="7" allowTopBottomWrap="false" showNumbers="false"/>        
        <SpecialElement name="TaskDescription" visible="false" loc="190,685" size="830,60"/>        
        <SpecialElement name="TaskImage" visible="false" loc="65,650" size="105,80"/>
        <SpecialElement name="MoreUp" loc="35,120"/>        
        <SpecialElement name="MoreDown" loc="35,635"/>    
        <SpecialElement name="ForegroundTransparency" percent="100"/>
        <SpecialElement name="CloseButton" loc="970,8" size="35,35"/>

        <!-- plugin panels -->                
        <SpecialElement name="Panel" panelName="Clock" visible="true" transparency="1" loc="450,50" size="600,95"/>
        <SpecialElement name="Panel" panelName="NextRecording" visible="true" transparency="1" loc="440,180" size="690,110"/>
        <SpecialElement name="Panel" panelName="News" visible="true" transparency="1" loc="50,680" size="910,50"/>

        <!-- music visualizations -->
        <SpecialElement name="Inset" loc="400,145" size="590,485"/>
    </SpecialElements>

</settings>

These are "special elements". These will control the actual location of composite images and other objects, like panels and visualizations.
-----------------------------------------------------------------------
The first SpecialElement is the "Buttons".

This controls the location (loc="15,145")
The spacing (spacing="70"). This is how many pixels between the upper-left corner of each button composite image (the "Box").

Wheter the buttons are centered within the special element when moving from button to button (alwayCentered="false") "false" and "true" are valid options.

How many buttons to show (maxVisibleButtons="7") As you would expect, the number is the most buttons to appear on screen, more buttons will scroll.

Allows the buttons to duplicate themselves if there are not enough selections for the number of buttons. (allowTopBottomWrap="false") "true" and "false" are valid options.
(An example is if you have 10 buttons, but only 9 menu options, the top and bottom button will be the same. With this false, only 9 buttons will be shown).

Show numbers with the buttons for numeric entry (showNumbers="false") "true" and "false" are valid options.
---------------------------------------------------------------------------
The second SpecialElement is "TaskDescription"

<SpecialElement name="TaskDescription" visible="true" loc="190,685" size="830,60"/>

This is what will display task description text.
Visible, location, and size should be self explainitory by now. I will use them so I will set them as true.
I will need to adjust location and size.
---------------------------------------------------------------------------
The third SpecialElement is "TaskImage"

<SpecialElement name="TaskImage" visible="false" loc="65,650" size="105,80"/>

This is what will display task images (separate from the buttons we removed).
Visible, location, and size should be self explainitory by now. I will use them so I will set them as true.
I will also need to adjust this location and size.
---------------------------------------------------------------------------
The next two SpecialElements are "MoreUp" and "MoreDown"

<SpecialElement name="MoreUp" loc="35,120"/>
<SpecialElement name="MoreDown" loc="35,635"/>

This controls where the up/down arrows for the menu list goes. I need to adjust the location of these too.
---------------------------------------------------------------------------
The next is the "CloseButton" element

<SpecialElement name="CloseButton" loc="970,8" size="35,35"/>
This is optional, this defines a "hotspot" that closes the menu you are in for mouse users.

I moved the button image, so I need to move this to match it so it doesn't cause problems.
------------------------------------------------
Up next are the plugin panels. These should be self explanitory by now. None of these are required. Remove or comment out ones you don't want, or add ones that are not here.
Again, this just locates where these are and the size of the "Box" that the content goes in.
All these panels are conroled by a .xml file that is found in the Panels folder.

Code:

<!-- plugin panels -->                
    <SpecialElement name="Panel" panelName="Clock" visible="true" transparency="1" loc="450,50" size="600,95"/>
    <SpecialElement name="Panel" panelName="NextRecording" visible="true" transparency="1" loc="440,180" size="690,110"/>
    <SpecialElement name="Panel" panelName="News" visible="true" transparency="1" loc="50,680" size="910,50"/>

------------------------------------------------
Almost finished with the main menu skin !
The last thing is the visualization panel.

Code:

        <!-- music visualizations -->
        <SpecialElement name="Inset" loc="400,145" size="590,485"/>
    </SpecialElements>

</settings>

This last little bit of code controls the size and location of the visualization panel, then closes off the </SpecialElements>, and the skin file itself </Settings>.
All of these special elements you may have to play around with to get the size and location correct. Remember the panels are conroled more by their own skin file.

Next post I will show you the before and after code......

[Fatman_do]

This is the original skin.xml file for the main menu I used.

Code:

<settings>

    <!-- text style Note: ButtonText defenition applies to OK button in Error mess popup -->
    <TextStyles>
        <TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>

    </TextStyles>        
        
    <!-- Composite Images -->    
    <CompositeImages>
        <CompositeImage name="Background" size="1024,768">                        
            <DrawImage filename="..\background.jpg" loc="0,0" size="1024,768"/>
            <DrawImage filename="..\ListView.png" loc="400,145" size="590,485"/>
            <DrawImage filename="..\AllTitleLogos\start_logo.png" loc="0,0" size="1024,105"/>
            <DrawImage filename=".\button_close.png" loc="970,8" size="35,35"/>
            <!-- DrawImage filename="..\LogoInset.png" loc="20,360" size="145,90"/ -->
            <DrawText text="Main Menu" loc="80,20" size="270,60" transparency="1" textStyle="ScreenNameHD" align="Left"/>
        </CompositeImage>

        <CompositeImage name="CenteredSelectedButtonImage" size="200,50">
            <DrawImage filename="..\button_selected.png" loc="4,5" size="185,48"/>
            <DrawText text="@buttonText" loc="0,11" size="185,34" textStyle="ButtonTextSelected" align="Center"/>            
        </CompositeImage>            
        
        <CompositeImage name="MoreUp" size="50,20">
            <DrawImage filename="moreup.png" loc="0,0" size="40,20"/>    
        </CompositeImage>        
        <CompositeImage name="MoreDown" size="50,20">
            <DrawImage filename="moredown.png" loc="0,0" size="40,20"/>    
        </CompositeImage>    

        <CompositeImage name="SelectedButtonImage" size="400,75">
            <!-- DrawRoundedRect loc="87,1" size="266,63" radius="45" borderWidth="0" borderColor="Black" fillColor="Blue"/ -->
            <DrawImage filename="..\button_selected.png" loc="90,0" size="260,65"/>
            <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextSelectedHD" align="Left"/>
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>
        </CompositeImage>
        
        <CompositeImage name="NormalButtonImage" size="400,75">
            <DrawImage filename="..\button_normal.png" loc="90,0" size="260,65"/>
            <DrawText text="@buttonText" loc="120,15" size="270,34" textStyle="ButtonTextHD" align="Left"/>            
    <DrawImage filename="@taskImage" loc="5,6" size="75,55"/>    
        </CompositeImage>    
        
        <CompositeImage name="ErrorMessagePopup" size="1024,768">
            <!-- DrawRoundedRect loc="30,100" size="650,200" radius="10" borderWidth="4" borderColor="LightGray" fillColor="Vertical:#292929-#000000"/ -->
            <DrawImage filename="..\popup_background.png" loc="30,100" size="950,250"/>
            <DrawText text="@errorMessage" loc="50,120" size="920,120" textStyle="TaskDescription" align="Center"/>                        
            <Element name="OkButton" loc="380,285" size="185,48"/>                        
        </CompositeImage>    
    </CompositeImages>    

    <!-- special elements -->
    <SpecialElements>
        <SpecialElement name="Buttons" loc="15,145" spacing="70" alwayCentered="false" maxVisibleButtons="7" allowTopBottomWrap="false" showNumbers="false"/>        
        <SpecialElement name="TaskDescription" visible="false" loc="190,685" size="830,60"/>        
        <SpecialElement name="TaskImage" visible="false" loc="65,650" size="105,80"/>
        <SpecialElement name="MoreUp" loc="35,120"/>        
        <SpecialElement name="MoreDown" loc="35,635"/>    
        <SpecialElement name="ForegroundTransparency" percent="100"/>
        <SpecialElement name="CloseButton" loc="970,8" size="35,35"/>

        <!-- plugin panels -->                
        <SpecialElement name="Panel" panelName="Clock" visible="true" transparency="1" loc="450,50" size="600,95"/>
        <SpecialElement name="Panel" panelName="NextRecording" visible="true" transparency="1" loc="440,180" size="690,110"/>
        <SpecialElement name="Panel" panelName="News" visible="true" transparency="1" loc="50,680" size="910,50"/>

        <!-- music visualizations -->
        <SpecialElement name="Inset" loc="400,145" size="590,485"/>
    </SpecialElements>

</settings>

Here is the screenshot:
[ATTACHMENT NOT FOUND]



This is the "after" final code. I tweaked some more locations, and added the VideoArchive panel. I also had to go into each panel's .xml file and tweak those to my settings as well.

Code:

<settings>

    <!-- text style Note: ButtonText defenition applies to OK button in Error mess popup -->
    <TextStyles>
        <TextStyle name="ButtonText" color="White" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelected" color="Yellow" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="TaskDescription" color="LightGray" typeFace="Arial" size="22" style="bold"/>

    </TextStyles>        
        
    <!-- Composite Images -->    
    <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"/>
            <!-- 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>

        <CompositeImage name="CenteredSelectedButtonImage" size="370,75">
            <DrawImage filename="..\MainButtonSelected.png" loc="0,0" size="370,65"/>
            <DrawText text="@buttonText" loc="10,15" size="350,38" textStyle="ButtonTextSelectedHD" align="Center"/>            
        </CompositeImage>            

        <CompositeImage name="SelectedButtonImage" size="370,75">
            <DrawImage filename="..\MainButtonSelected.png" loc="0,0" size="370,65"/>
            <DrawText text="@buttonText" loc="10,15" size="350,38" textStyle="ButtonTextSelectedHD" align="Center"/>
        </CompositeImage>
        
        <CompositeImage name="NormalButtonImage" size="370,75">
            <DrawImage filename="..\MainButtonNormal.png" loc="0,0" size="370,65"/>
            <DrawText text="@buttonText" loc="10,15" size="350,38" textStyle="ButtonTextHD" align="Center"/>  
        </CompositeImage>
        
        <CompositeImage name="MoreUp" size="50,20">
            <DrawImage filename="..\moreup.png" loc="0,0" size="40,20"/>    
        </CompositeImage>        
        <CompositeImage name="MoreDown" size="50,20">
            <DrawImage filename="..\moredown.png" loc="0,0" size="40,20"/>    
        </CompositeImage>    

        <CompositeImage name="ErrorMessagePopup" size="1280,720">
            <DrawImage filename="..\popup_background.png" loc="30,100" size="950,250"/>
            <DrawText text="@errorMessage" loc="50,120" size="920,120" textStyle="TaskDescription" align="Center"/>                        
            <Element name="OkButton" loc="380,285" size="185,48"/>                        
        </CompositeImage>    
    </CompositeImages>    

    <!-- special elements -->
    <SpecialElements>
        <SpecialElement name="Buttons" loc="15,115" spacing="70" alwayCentered="false" maxVisibleButtons="7" allowTopBottomWrap="false" showNumbers="false"/>        
        <SpecialElement name="TaskDescription" visible="true" loc="20,675" size="1240,35"/>        
        <SpecialElement name="TaskImage" visible="true" loc="950,120" size="300,300"/>
        <SpecialElement name="MoreUp" loc="35,65"/>        
        <SpecialElement name="MoreDown" loc="35,635"/>    
        <SpecialElement name="ForegroundTransparency" percent="100"/>
        <SpecialElement name="CloseButton" loc="1225,8" size="35,35"/>

        <!-- plugin panels -->                
        <SpecialElement name="Panel" panelName="Clock" visible="true" transparency="1" loc="500,10" size="600,95"/>
        <SpecialElement name="Panel" panelName="NextRecording" visible="true" transparency="1" loc="425,120" size="500,175"/>
        <SpecialElement name="Panel" panelName="News" visible="true" transparency="1" loc="470,50" size="800,50"/>
        <SpecialElement name="Panel" panelName="VAPanel" visible="true" transparency="1" loc="950,420" size="300,180" />

        <!-- music visualizations -->
        <SpecialElement name="Inset" loc="420,300" size="534,300"/>
    </SpecialElements>

</settings>

This is the final screenshot for the main menu.
[ATTACHMENT NOT FOUND]

We are not done yet. I will review the baseskin.xml file and putting together a ThemePack next.

[Fatman_do]

The backbone behind any skin can be the Baseskin.xml file found in the skin's root directory. This file acts like a universal skin file to provide textstyle, button, and named colors that can be used in many different plugins. This allows you to change the attributes of these items and they will be reflected in all the sub-menus.
This is an example of the code.

Code:

<settings>
    <!-- name colors -->
    <NamedColors>            
        <NamedColor name="DialogPopup" color="Horizontal:#002200-#008800"/>

        <!-- ListView Color styles -->
        <NamedColor name="SelectedFileActive" color="DarkGreen"/>    
        <NamedColor name="SelectedFileInactive" color="DarkBlue"/>
        <NamedColor name="Selection" color="DarkBlue"/>

    </NamedColors>
    
    <!-- text style -->
    <TextStyles>
        <!-- This is a special case text style. If you dont specify a specific attribute on another font, these will be used as defaults. -->
        <TextStyle name="Default" color="LightGray" typeFace="Arial" size="14" style="bold"/>
        <TextStyle name="DefaultHD" color="LightGray" typeFace="Arial" size="22" style="bold"/>
        
        <!-- Button and Title text styles 720x480 resolution -->
        <TextStyle name="ScreenName" color="#00ff00" typeFace="Trebuchet MS" size="22" style="bold"/>
        <TextStyle name="ScreenNameShadow" color="Grey" typeFace="Blank" size="22" style="bold"/>
        <TextStyle name="ButtonText" color="White" typeFace="Arial" size="14" style="bold"/>
        <TextStyle name="ButtonTextShadow" color="Grey" typeFace="Blank" size="14" style="bold"/>
        <TextStyle name="ButtonTextSelected" color="White" typeFace="Arial" size="14" style="bold"/>
        <TextStyle name="ButtonTextSelectedShadow" color="Black" typeFace="Arial" size="14" style="bold"/>

        <!-- Button and Title text styles 1024x768 resolution -->
        <TextStyle name="ScreenNameHD" color="#00ff00" typeFace="Trebuchet MS" size="30" style="bold"/>
        <TextStyle name="ScreenNameShadowHD" color="Grey" typeFace="Blank" size="30" style="bold"/>
        <TextStyle name="ButtonTextHD" color="White" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextShadowHD" color="Grey" typeFace="Blank" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelectedHD" color="Black" typeFace="Arial" size="22" style="bold"/>
        <TextStyle name="ButtonTextSelectedShadowHD" color="Black" typeFace="Blank" size="22" style="bold"/>

        <!-- ListView text styles -->
        <TextStyle name="IconText" color="White" typeFace="Tahoma" size="10" style="bold"/>
        <TextStyle name="ListText" color="White" typeFace="Tahoma" size="13" style="bold"/>
        <TextStyle name="DVDTitle" color="White" typeFace="Tahoma" size="13" style="bold"/>
        <TextStyle name="DVDDesc" color="White" typeFace="Tahoma" size="11" style="bold"/>

        <!-- Popup Dialog text styles -->
        <TextStyle name="PopupTags" color="Yellow" typeFace="Tahoma" size="13" style="bold"/>
        <TextStyle name="PopupText" color="White" typeFace="Tahoma" size="13" style="bold"/>

        <!-- TVguide text styles -->
        <TextStyle name="TimesPeriods" color="White" typeFace="Arial" size="14" style="bold"/>
        <TextStyle name="Guide" color="White" typeFace="Arial" size="12" style="bold"/>
        <TextStyle name="CurrentTime" color="Yellow" typeFace="Verdana" size="14" style="bold"/>
        <TextStyle name="ChannelNames" color="White" typeFace="Arial" size="11" style="normal"/>

        <!-- Recordings text styles -->
        <TextStyle name="NoItems" color="LightGray" typeFace="Arial" size="14" style="bold"/>

        <!-- the following are used by the Recording Details popup -->
        <TextStyle name="ManualRecordingShowTitle" color="White" typeFace="Arial" size="14" style="bold"/>        
        <TextStyle name="ManualRecordingTags" color="Yellow" typeFace="Arial" size="12" style="bold"/>        
        <TextStyle name="ManualRecordingSettings" color="White" typeFace="Arial" size="12" style="bold"/>                

        <!-- FM Radio ListView text styles -->
        <TextStyle name="StationName" color="White" typeFace="Arial" size="14" style="bold"/>
        <TextStyle name="StationNameFocus" color="Yellow" typeFace="Arial" size="14" style="bold"/>
        <TextStyle name="StationFrequency" color="White" typeFace="Arial" size="12" style="bold"/>

        <!-- Net Radio ListView text styles -->
        <TextStyle name="DetailsViewGenreTitle" color="LightGray" typeFace="Arial" size="14" style="bold"/>    
        <TextStyle name="DetailsViewGenreTitleFocus" color="Yellow" typeFace="Arial" size="14" style="bold"/>    
        <TextStyle name="DetailsViewItemsTitle" color="LightGray" typeFace="Arial" size="12" style="bold"/>
        <TextStyle name="DetailsViewItemsTitleFocus" color="Yellow" typeFace="Arial" size="12" style="bold"/>
        <TextStyle name="DetailTag" color="Yellow" typeFace="Arial" size="12" style="bold"/>

        <!-- subtitles -->
        <TextStyle name="SubtitleFont" color="White" typeFace="Arial" size="24" style="bold"/>        
        <TextStyle name="SubtitleItalicFont" color="White" typeFace="Arial" size="24" style="italic"/>        

        <!-- Panels text styles -->
        <TextStyle name="Clock" color="White" typeFace="Verdana" size="14" style="bold"/>
        <TextStyle name="NextRecording" color="White" typeFace="Verdana" size="20" style="normal"/>
        <TextStyle name="NextRecordingTime" color="White" typeFace="Verdana" size="20" style="normal"/>

    </TextStyles>
    
    <!-- Composite Images -->    
    <CompositeImages>
        <!-- image used for a selected button (in this skin the main menu buttons are different size and shape, so these are defined separately in mainmenu\skin.xml) -->
        <CompositeImage name="SelectedButtonImage" size="180,45">
            <DrawImage filename="..\Button_Selected.png" loc="20,0" size="160,38"/>
            <!-- DrawRoundedRect loc="4,5" size="120,30" radius="10" borderWidth="4" borderColor="White" fillColor="DarkBlue"/ -->            
            <DrawText text="@buttonText" loc="35,8" size="165,34" textStyle="ButtonTextSelected" align="Left"/>            
        </CompositeImage>
        
        <!-- image used for a normal button (in this skin the main menu buttons are different size and shape, so these are defined separately in mainmenu\skin.xml) -->
        <CompositeImage name="NormalButtonImage" size="180,45">
            <DrawImage filename="..\Button_Normal.png" loc="20,0" size="160,38"/>
            <!-- DrawRoundedRect loc="4,5" size="120,30" radius="10" borderWidth="4" borderColor="Black" fillColor="DarkBlue"/ -->
            <DrawText text="@buttonText" loc="35,8" size="165,34" textStyle="ButtonText" align="Left"/>            
        </CompositeImage>                
        
        <!-- image used for a popup selected button -->
        <CompositeImage name="PopupSelectedButtonImage" size="135,38">
            <DrawImage filename="..\Button_PopupSelected.png" loc="0,0" size="130,35"/>
            <!-- DrawRoundedRect loc="4,5" size="120,30" radius="10" borderWidth="4" borderColor="White" fillColor="DarkBlue"/ -->            
            <DrawText text="@buttonText" loc="0,6" size="130,34" textStyle="ButtonTextSelected" align="Center"/>            
        </CompositeImage>
        
        <!-- image used for a popup normal button -->
        <CompositeImage name="PopupNormalButtonImage" size="135,38">
            <DrawImage filename="..\Button_PopupNormal.png" loc="0,0" size="130,35"/>            
            <!-- DrawRoundedRect loc="4,5" size="120,30" radius="10" borderWidth="4" borderColor="Black" fillColor="DarkBlue"/ -->    
            <DrawText text="@buttonText" loc="0,7" size="130,34" textStyle="ButtonText" align="Center"/>            
        </CompositeImage>    

    </CompositeImages>
</settings>

A lot of what you see in here should look familiar right now. You will notice something new, "NamedColor". Some plugins use this instead of compostite images, and this is where the colors of items are controled.
The textsyles you see have comments by them to let you know what panel these will effect.

One special note is that the ".....Shadow" textstyles use a font "Blank" in most themes. This shuts down the text outline effect for screen names and button text when these themepacks are used with Chameleon. If these textstyles don't exsist, I have to create a patch file for Chameleon.

The composite images are for buttons and pop-ups, similar to the ones that were in the main menu, these just show what will be used in most plugins.

Nothing needs to be changed here to support Appearance Manager.

(There is nothing really new here, so I won't go into detail on this unless I get asked in the comments thread to explain something further)

Now that we have our two main skin xml files covered. You may need to play around with panels, but you should be able to work with those on your own because there really isn't much you can do with those other than change fonts and sizes.

The next thing you need to do is review all images in your skin's root directory, the main menu, panels, alltitlelogos, osd, and alltaskimages directories and see what you may wish to change. You can add custom fonts in the Fonts and custom sounds in the Sounds directories.

Once you are satisfied with your layout and images, create a Preview.jpg for the skin's root directory that is a screenshot of the main menu.