CommunitySkin Skinning Tutorial

[Fatman_do]

This is going to be somewhat a cut and paste of this thread, but I will modify it to be up to date with the CommunitySkin.

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 and skin modifications. I will attempt to explain the "Blue" skin methods, and the differences that the CommunitySkin uses.

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

All the features of PVRX2.exe, the new user interface, is controlled by the skins in the \Skin2 folder.
All the features of GBPVR.exe, the old user interface, is controlled by the skins in the \Skin folder.

I will occasionally make updates and tweaks to these posts, so review them the following days to see if there are changes.

[Fatman_do]

If you are an artistic type, the easiest way to make a new theme is find a layout that you like and change the image files in the following folders..

skin2\Community3\Community3\Menu
skin2\Community3\_TaskImages
skin2\Community3\_CoreImages

then copy the \_CoreImages folder to the legacy folder..

skin\Community3\_CoreImages

Keep the names the same, just replace the images with your new ones of choice. I'll cover the names later and their meaning, but that shouldn't stop you from replacing the images.

Otherwise, use the SkinPlugin to set the images from the provided image library to a setup you like.

The Theme in this example will use Left side buttons.

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 that Notepad++ has(via XML Tools plugin found on download page).

I will use the CommunitySkin in its default form (you can use any theme here).

My advice is, once you have a setup close to how you want yours to look, make a backup copy of the Community3 folder in both skin directories. That way you have something to fall back on in case things go haywire.

Next we will dissect the baseskin.xml file.

[Fatman_do]

Q:What is a baseskin.xml file??
A: The baseskin.xml file is sort of like the "master" skin file. In certain cases, if something is not found in a particular skin.xml file for a plugin, GBPVR.EXE or PVRX2.exe will look in the baseskin.xml for this missing info. This is mostly used for defining text sizes, color and other "Common" elements in a skin.

Q:What does this mean for skinning?
A: The benefit this provides for skinning is that we can remove certain elements from these individual skin files and control them from one central location. This improves the potential for faster changes and results by only having to modify one file vs. several.

[COLOR="Blue"]
Q:Where do I find the baseskin.xml file.[/COLOR]
A:The baseskin.xml file is located in the skin's root directory (ie, directly under the skin name like "Blue", and "Community3", and not in one of its sub-folders). An example of such would be C:\Program Files\Devnz\GBPVR\Skin2\Community3\Baseskin.xml

With the fake Question and Answer session over, we can now open the Baseskin.xml file in the Skin2\Community3 folder.

Note, the baseskin.xml in blue is drastically different. The order of items may not be the same between the two, but much of the basic ideas are there. CommunitySkin only items will be identified during the segments when required.

Some general syntax, Elements, and Tags.

In our Baseskin file you probably noticed words wrapped with <...> and </....> symbols. These symbols define what I call elements. The first text in them identifies the element. I call them "Tags". An example of an element then is <Tag>......</Tag>. The foward slash is what is used to close the element, kind of like saying "I am done with this part". Remember, all elements need to be closed with a "/". There are two ways this is done. Either two separate tags,

Code:

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

or in-line,

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

In addition, you can nest elements within another. You will see an example in just a moment.

One more thing before we get started. You cannot create new elements that don't exsist, you can only modify exsisting ones. You can't add <Time>...DrawText....</Time> to show the time on a screen that doesn't know how to handle it.

Ok, confused yet?

The first few lines look like this.

Code:

<settings>
[color=SeaGreen]<!--CommunitySkin 3.0 Reflect-->[/color]
<NamedValues>
<NamedValue name="PopupCornerRadius" value="1.5"/>
<NamedValue name="PopupBorderWidth" value="2"/>
</NamedValues>

The first line, <settings> is always required. We don't change anything here. To close out the "settings" element, the very last line of a skin file is always </settings> (NOT shown in the example above). We needed to close the settings element. We don't change skin file's last line either.

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-->

This is just a comment to let us know what skin this is for, and the theme.
I am going to change it to..

Code:

[color=SeaGreen]<!--CommunitySkin 3.0 CommandCenter-->[/color]

The next line is:

Code:

<NamedValues>

This tells the plugin\gbpvr what the values of certain defined elements will be.
This is a "parent" element, and the next two lines are nested elements.

Code:

<NamedValues>
[COLOR="Blue"]<NamedValue name="PopupCornerRadius" value="1.5"/>
<NamedValue name="PopupBorderWidth" value="2"/>[/COLOR]
</NamedValues>

These values tell gbpvr what the border width and corner radius will be on all non-image based popups.

Generally, I don't change anything but the theme name with these first few lines.

Up next, colors.

[Fatman_do]

One of the most important sections is the NamedColors element. The vast majority of all text colors are defined here.

Code:

    [color=SeaGreen]<!-- Named Colours -->[/color]
    <NamedColors>
        [color=SeaGreen]<!-- popup colours -->[/color]
        <NamedColor name="PopupBackground" color="Black"/>
        <NamedColor name="PopupBorder" color="#7FFFFFFF"/>
        [color=SeaGreen]<!-- list colours -->[/color]
        <NamedColor name="ListNormal" color="#40000000"/>
        <NamedColor name="ListSelected" color="#4500FF00"/>
        <NamedColor name="ListSelectedInactive" color="#2500FF00"/>
        [color=SeaGreen]<!-- misc -->[/color]
        <NamedColor name="GeneralSelection" color="#8eae8b"/>
[COLOR="SeaGreen"]        <!--These may be modified by the SkinPlugin-->
        <!--Selector Text Color-->[/COLOR]
        <NamedColor name="Normal" color="#c6c8ca" />
        <NamedColor name="Selected" color="White" />
        <NamedColor name="SelectedInactive" color="#b4bbbf" />
[color=SeaGreen]        <!--Static Text Color-->[/color]    
        <NamedColor name="General" color="White" />
        <NamedColor name="Header" color="#7ea176" />
        <NamedColor name="ScreenName" color="#50ffffff" />
[color=SeaGreen]        <!--For use with DrawTextWithOutline-->[/color]
        <NamedColor name="GeneralOutline" color="Transparent" />
        <NamedColor name="NormalOutline" color="Transparent" />
        <NamedColor name="SelectedOutline" color="Transparent" />

[COLOR="SeaGreen"]        <!--These will not be modified by the SkinPlugin, for right now being left in for theme possibilities-->        
        <!--TV Guide Colors, Do NOT use vertical gradients  -->[/COLOR]
        <NamedColor name="NormalListing" color="Black"/>
        <NamedColor name="ReminderListing" color="Horizontal:#000022-#000088"/>
        <NamedColor name="ScheduledListing" color="Vertical:#762123-Transparent"/>                                
        <NamedColor name="SelectedListing" color="Vertical:#2c7c2f-Transparent"/>        
        <NamedColor name="SelectedReminderListing" color="Horizontal:#000044-#0000BB"/>
        <NamedColor name="SelectedScheduledListing" color="Vertical:#990000-Transparent"/>
        <NamedColor name="ConflictListing" color="Horizontal:#442200-#AA5533"/>        
        <NamedColor name="SelectedConflictListing" color="Horizontal:#664422-#CC8844"/>
[color=SeaGreen]        <!-- the surrounds must be solid colours for now -->[/color]
        <NamedColor name="ListingSurround" color="#b4bbbf"/>        
        <NamedColor name="ChannelIconSurround" color="Transparent"/>
        <NamedColor name="ChannelNameRectangle" color="#001822"/>    
        <NamedColor name="SelectedListingSurround" color="White"/>        
    </NamedColors>

The first few items are what sub uses in blue. We include them here so any plugin that uses these and not converted to the CommunitySkin will work and not crash on us.

Code:

        [color=SeaGreen]<!-- popup colours -->[/color]
        <NamedColor name="PopupBackground" color="Black"/>
        <NamedColor name="PopupBorder" color="#7FFFFFFF"/>
        [color=SeaGreen]<!-- list colours -->[/color]
        <NamedColor name="ListNormal" color="#40000000"/>
        <NamedColor name="ListSelected" color="#4500FF00"/>
        <NamedColor name="ListSelectedInactive" color="#2500FF00"/>
        [color=SeaGreen]<!-- misc -->[/color]
        <NamedColor name="GeneralSelection" color="#8eae8b"/>

You can use common color names, Yellow, Blue, Green, Red, DarkBlue, ect. You can also use "hex colors". These are the #7FFFFFFF combinations you see above. If you look at custom colors in graphics programs like MS paint, Photoshop, Paintshop Pro, Gimp, Paint.net, ect. they will indicate what the hex number is when looking at the color pallet. These colors here are for xml drawn popup boxes, and xml drawn list selectors (ie, colored bars around what you select). The CommunitySkin doesn't use this much, mostly for older legacy plugins.

The next section of colors are what we use to control most text. This is a CommunitySkin only feature and not part of the blue skin.

Code:

        [COLOR="SeaGreen"]<!--These may be modified by the SkinPlugin-->
        <!--Selector Text Color-->[/COLOR]
        <NamedColor name="Normal" color="#c6c8ca" />
        <NamedColor name="Selected" color="White" />
        <NamedColor name="SelectedInactive" color="#b4bbbf" />
        [color=SeaGreen]<!--Static Text Color-->    [/color]
        <NamedColor name="General" color="White" />
        <NamedColor name="Header" color="#7ea176" />
        <NamedColor name="ScreenName" color="#50ffffff" />
        [color=SeaGreen]<!--For use with DrawTextWithOutline-->[/color]
        <NamedColor name="GeneralOutline" color="Transparent" />
        <NamedColor name="NormalOutline" color="Transparent" />
        <NamedColor name="SelectedOutline" color="Transparent" />

The first three are what we use for items you can select. These are buttons, list items, list icons, ect. We have a color for "Normal" text. This is text in its unselected state. Next we have a color for "Selected" and "SelectedInactive" text. If you wanted the selected text to be yellow, and the selected-but-inactive text to be orange, change it there.

The next three are "Static" text. These text colors are for text that wont change color when the user selects items. "General" is used most places. The majority of text you see that is not part of a selectable item is "General".

"Header" is what we use for an accent color. Usually bold text that stands out from the "General" text. Mostly these are show names and text meant to catch your eye.

"ScreenName" is the color used for the screen name only, this is where we change it.

The last bit of text colors are for text we may want to outline.
"NormalOutline" and "SelectedOutline" is used in buttons normal and selected state. "GeneralOutline" is used around the ScreenName. I recommend using "transparent" instead of the same color for the button and outline. Don't use white "Normal" and white "NormalOutline", it makes it look a little blurry. White "Normal" and black "NormalOutline" provides good contrast.

The last grouping is what I use for the built-in TV guide, TV Listings plugin, and Guide2j plugin. These also are a CommunitySkin only feature.

Code:

        [color=SeaGreen]<!--These will not be modified by the SkinPlugin, for right now being left in for theme possibilities-->[/color]        
        [color=SeaGreen]<!--TV Guide Colors, Do NOT use vertical gradients  -->[/color]
        <NamedColor name="NormalListing" color="Black"/>
        <NamedColor name="ReminderListing" color="Horizontal:#000022-#000088"/>
        <NamedColor name="ScheduledListing" color="Vertical:#762123-Transparent"/>                                
        <NamedColor name="SelectedListing" color="Vertical:#2c7c2f-Transparent"/>        
        <NamedColor name="SelectedReminderListing" color="Horizontal:#000044-#0000BB"/>
        <NamedColor name="SelectedScheduledListing" color="Vertical:#990000-Transparent"/>
        <NamedColor name="ConflictListing" color="Horizontal:#442200-#AA5533"/>        
        <NamedColor name="SelectedConflictListing" color="Horizontal:#664422-#CC8844"/>
        [color=SeaGreen]<!-- the surrounds must be solid colours for now -->[/color]
        <NamedColor name="ListingSurround" color="#b4bbbf"/>        
        <NamedColor name="ChannelIconSurround" color="Transparent"/>
        <NamedColor name="ChannelNameRectangle" color="#001822"/>    
        <NamedColor name="SelectedListingSurround" color="White"/>

The names should be rather self-explanitory. You may notice colors like Horizontal:#000044-#0000BB". These are hex colors that are a gradient. That means a horizontal color that starts at #000044 and fades to color #0000BB. These are a good way to get around using a solid color in the tv guide boxes.

Because I use these colors for tvguides here, I comment them out in the skin.xml files of those respective plugins. That way all 3 will have the same look, all coming from this one location.

That wraps up the colors. You will see it ends with </NamedColors>

A long term potential update to the SkinPlugin may provide users a way to change the colors:"Normal", "Selected", "SelectedInactive", "Header" , "ScreenName", "GeneralOutline", "NormalOutline" and "SelectedOutline" to various pre-defined colors.

[Fatman_do]

So given those colors to start with, these are my changes.

Code:

        <!--Selector Text Color-->
        <NamedColor name="Normal" color="[B][color=Red]White[/color][/B]" />
        <NamedColor name="Selected" color="[B][color=Red]Black[/color][/B]" />
        <NamedColor name="SelectedInactive" color="#b4bbbf" />
        <!--Static Text Color-->    
        <NamedColor name="General" color="White" />
        <NamedColor name="Header" color="[B][color=Red]#00ff00[/color][/B]" />
        <NamedColor name="ScreenName" color="[B][color=Red]#00ff00[/color][/B]" />
        <!--For use with DrawTextWithOutline-->
        <NamedColor name="GeneralOutline" color="Transparent" />
        <NamedColor name="NormalOutline" color="[B][color=Red]Black[/color][/B]" />
        <NamedColor name="SelectedOutline" color="[B][color=Red]White[/color][/B]" />

This is an idea of what the changes gives me.
[ATTACHMENT NOT FOUND]

[Fatman_do]

Up next are the textstyles..

Code:

<TextStyles>
[color=SeaGreen]    <!-- special case text style providing defaults -->[/color]
    <TextStyle name="DefaultTextStyle" color="General" typeFace="Arial" size="13" style="bold"/>
[color=SeaGreen]    <!--In the Above line  possibly Size, Typeface, and Style as modifiable with SkinPlugin-->[/color]

[COLOR="SeaGreen"]    <!--Used by sub in blue-->
        
    <!-- other commonly used text styles -->[/COLOR]
    <TextStyle name="ScreenNameStyle" color="ScreenName" size="28"/>
    <TextStyle name="ButtonTextStyle" color="Normal"/> [color=SeaGreen]<!--Size, Typeface and Style pulled from DefaultTextStyle-->[/color]
    <TextStyle name="GeneralTextHeaderStyle" color="Header"/>
    <TextStyle name="GeneralTextStyle" color="General"/>

    [color=SeaGreen]<!-- details view -->[/color]
    <TextStyle name="DetailsViewItemsTitle" color="Normal"/> [color=SeaGreen]<!-- I think these are redundant with ListViewItems-->[/color]
    <TextStyle name="DetailsViewFolders" color="Header"/>
    [color=SeaGreen]<!-- list view -->[/color]
    <TextStyle name="ListViewItems" color="Normal"/>
    <TextStyle name="ListViewFolders" color="Header"/>
    [color=SeaGreen]<!-- icon view -->[/color]
    <TextStyle name="IconViewItems" color="Normal" size="10"/>
    <TextStyle name="IconViewFolders" color="Header" size="10"/>
    
        
    [color=SeaGreen]<!--CommunitySkin Addons-->    [/color]    
    [color=SeaGreen]<!-- Button text styles --> <!--I prefer these names (Fatman_do)-->[/color]
    <TextStyle name="ButtonTextNormal" color="Normal" size="14" />
    <TextStyle name="ButtonTextSelected" color="Selected" size="14" />
    <TextStyle name="ButtonTextSelectedInactive" color="SelectedInactive" size="14" />

    <TextStyle name="GeneralTextTitleStyle" color="Header" size="16"/> <!--Used like GeneralTextHeaderStyle, but with a larger font-->
        
    [COLOR="SeaGreen"]<!-- List text styles-->
        <!--Icon Selectable text-->[/COLOR]
    <TextStyle name="IconNormal" color="Normal" size="10" /> [color=SeaGreen]<!--Text under icons usually need to be smaller-->[/color]
    <TextStyle name="IconSelected" color="Selected" size="10" />
    <TextStyle name="IconSelectedInactive" color="SelectedInactive" size="10" />
        [color=SeaGreen]<!--List Selectable text-->[/color]
    <TextStyle name="ListNormal" color="Normal" />
    <TextStyle name="ListSelected" color="Selected" />
    <TextStyle name="ListSelectedInactive" color="SelectedInactive" />
</TextStyles>

Of all the textstyles, the first one is the most important for us.

Code:

<TextStyle name="DefaultTextStyle" color="General" typeFace="Arial" size="13" style="bold"/>

This style drives all text if we don't describe those features later. For example, we put Arial here, and not in other textstyles, all text will have that typeface unless we declare them otherwise in a skin.xml file. If a textstyle doesn't have a size specified, it will be 13 pt. because of this line.

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="DefalultTextStyle"

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=13

Style (bold, plain, narrow are valid here)

Code:

style="bold"

Closing symbol

Code:

/>

The next batch is what sub has setup in blue, so for compatibility, we use those names here as well. They should be pretty obvious as to what they do.

Code:

<!--Used by sub in blue-->
        
    <!-- other commonly used text styles -->[/COLOR]
    <TextStyle name="[B][color=Red]ScreenNameStyle[/color][/B]" color="ScreenName" size="28"/>
    <TextStyle name="ButtonTextStyle" color="Normal"/> [color=SeaGreen]<!--Size, Typeface and Style pulled from DefaultTextStyle-->[/color]
    <TextStyle name="[color=Red][B]GeneralTextHeaderStyle[/B][/color]" color="Header"/>
    <TextStyle name="[color=Red][B]GeneralTextStyle"[/B][/color] color="General"/>

    [color=SeaGreen]<!-- details view -->[/color]
    <TextStyle name="DetailsViewItemsTitle" color="Normal"/> [color=SeaGreen]<!-- I think these are redundant with ListViewItems-->[/color]
    <TextStyle name="DetailsViewFolders" color="Header"/>
    [color=SeaGreen]<!-- list view -->[/color]
    <TextStyle name="ListViewItems" color="Normal"/>
    <TextStyle name="ListViewFolders" color="Header"/>
    [color=SeaGreen]<!-- icon view -->[/color]
    <TextStyle name="IconViewItems" color="Normal" size="10"/>
    <TextStyle name="IconViewFolders" color="Header" size="10"/>

The ones in red are the only ones I generally use in converting skins over. For the CommunitySkin I change up the other ones to get more flexibility. I'll cover those in the next post.

[Fatman_do]

Ok, so now we have the textstyles that are unique to the CommunitySkin.

Code:

    [COLOR="SeaGreen"]<!--CommunitySkin Addons-->        
    <!-- Button text styles --> <!--I prefer these names (Fatman_do)-->[/COLOR]
    <TextStyle name="ButtonTextNormal" color="Normal" size="14" />
    <TextStyle name="ButtonTextSelected" color="Selected" size="14" />
    <TextStyle name="ButtonTextSelectedInactive" color="SelectedInactive" size="14" />

    <TextStyle name="GeneralTextTitleStyle" color="Header" size="16"/> [color=SeaGreen]<!--Used like GeneralTextHeaderStyle, but with a larger font-->[/color]
        
    [COLOR="SeaGreen"]<!-- List text styles-->
        <!--Icon Selectable text-->[/COLOR]
    <TextStyle name="IconNormal" color="Normal" size="10" /> <!--Text under icons usually need to be smaller-->
    <TextStyle name="IconSelected" color="Selected" size="10" />
    <TextStyle name="IconSelectedInactive" color="SelectedInactive" size="10" />
        [color=SeaGreen]<!--List Selectable text-->[/color]
    <TextStyle name="ListNormal" color="Normal" />
    <TextStyle name="ListSelected" color="Selected" />
    <TextStyle name="ListSelectedInactive" color="SelectedInactive" />

What we do, is provide the opportunity to have a different color for Selected, Normal, and SelectedInactive text. This allows for more flexibility with buttons and list items being able to stand out with a different size, color, or font.

You see above that I also specifically give a size instead of using the default size set in "DefaultTextStyle". Sometimes users wish to have buttons larger, as commented above, text under icons usually needs to be smaller.

I think that explains what the goal is for the text. We have 3 styles for buttons, 3 styles for list items, and 3 styles for icons. I tend to use "GeneralTextTitleStyle" for popup titles.

Next up is something also unique to the CommunitySkin's baseskin.xml file.."Placements".

[Fatman_do]

The next element in the CommunitySkin's baseskin.xml file (the do not show up in blue's baseskin.xml file)

Code:

<!-- placements -->
<Placements>
    <Placement name="ScreenName" loc="2,0" size="90,12" />
    <Placement name="StandardButtonOrigin" loc="14,14" offset="6.5"/>
    <Placement name="ListBackground" loc="25,13"/>
</Placements>

These are pulled from sub's default plugins. These define where the screen name goes, how big it can be. It also does the same thing for the locations of the buttons and list backgrounds.

Let me explain the numbers here now, because they are significant. In PVRX2, these numbers represent percentage of display resolution. In loc="2,0" for the screen name, the name begins 2% to the right and 0% down from the upper-left corner of the screen. All location values and sizes are from the respected upper left corner of what is defined. From that location described above, the screen name can fill 90% of the screen width and 12% of the screen height. The name won't stretch to fill that size, that just is the total area it could cover.

Buttons are told then, to start 14% of the screen to the right and 14% of the screen down from the upper left corner. Unlike the screen name, we don't give it a size (those come later), instead we define the spacing for the buttons by stating an offset of "6.5" percent. This spacing is sort of a standard for the CommunitySkin so we won't mess with that. We can slide the buttons to the left of the screen if we wanted by making it read..

Code:

<Placement name="StandardButtonOrigin" loc="5,14" offset="6.5"/>

This is the only element within the Placements that I would possibly recommend changing. In fact, you can't go wrong by leaving them alone.

[Fatman_do]

The next items in the baseskin.xml file are CompositeImages. These are the skinning backbone for most skins. These are where images, text, and other elements get combined into what we usually see on the screen. These define poup box sizes, shapes, locations, ect.

in the CommunitySkin baseskin.xml we start off with a composite image not included in the blue baseskin.xml file.

Code:

<CompositeImages>

<CompositeImage name="ScreenName" size="90,12">
    <DrawTextWithOutline text="@screenName" loc="0,0" size="100,100" textStyle="ScreenNameStyle" align="Left" valign="Center" fillColor="ScreenName" borderColor="GeneralOutline" outlineWidth="1" />
</CompositeImage>

The first Composite Image we have here is one that would normally be found in a skin.xml file for a plugin. We have put it in the baseskin.xml file of the CommunitySkin to make changes easier. Change this and the results will be in all PVRX2 plugin screens. This "CompositeImage" defines the text used for the Screen Name.

As you can see, our CompositeImage is named "ScreenName" and can fill up to 90% of the width of the screen and 12% of the height from the upper left corner of the location described in the earlier "Placement".

The next line is something sort of unique. Normally in this line you would see this:

Code:

<DrawText="@screenName" loc="0,0" size="100,100" textStyle="ScreenNameStyle" align="Left" valign="Center"/>

I'll explain the code above before going on to the more advanced method in the CommunitySkin.

This element is where we tell GB-PVR to "DrawText". The text to be drawn is something called "@screenName". This "@screenName" is what is called a variable, which means it will be supplied by GBPVR or the plugin (I will go over later text we can manually define). It will be located 0% over and 0% from the top-left corner of the CompositeImage. The text can fit 100% the size of the CompositeImage. The textstyle used to draw the text will be "ScreenNameStyle", it will be left justified and vertically centered in the CompositeImage.

That is a quick rundown of what any given DrawText element is. Our more advanced feature is:

Code:

<DrawTextWithOutline text="@screenName" loc="0,0" size="100,100" textStyle="ScreenNameStyle" align="Left" valign="Center" fillColor="ScreenName" borderColor="GeneralOutline" outlineWidth="1" />

This is mostly the same as DrawText, but this will draw an outline around the text. We specifiy the "fillcolor" of the textstyle by using one of our defined colors from before. We also specify the color of the border/outline with a "named color" and the width of the outline. I don't recommend changing the width of the outline any greater than 1 or 2, since the results seem to make the text appear blurry, but play around with it if you like.

Now to change the color of the screen name text and the ouline, you go up in the baseskin.xml file and edit the values of the NamedColors "ScreenName" and "GeneralOutline".

[Fatman_do]

The next bunch of CompositeImages are Buttons. I'll just go over the first two, as the remaining ones will be self-explanitory.

The vast majority of the remaining part of the baseskin.xml is unique to CommunitySkin and not found in blue.

[COLOR="SandyBrown"]
As a general rule, you don't really need to change anything else in the baseskin.xml file if you are making a new theme. Mostly all you would need to do is modify what was decribed above so far. If you feel the need to change the size of buttons, be aware that these values may affect all screens when you only wanted to affect one screen. We'll discuss screen specific edits later, remember these are generally for most screens.[/COLOR]

Code:

<CompositeImage name="ButtonNormal" size="23.0,6.5">
    <DrawImage filename="..\_CoreImages\button_normal.png" loc="0,0" size="100,100"/>
    <DrawTextWithOutline text="@buttonText" loc="7,0" size="100,100" textStyle="ButtonTextNormal" align="Left" valign="Center" fillColor="Normal" borderColor="NormalOutline" outlineWidth="1" />
</CompositeImage>

<CompositeImage name="ButtonSelected" size="24.0,6.5">
       <DrawImage filename="..\_CoreImages\button_selected.png" loc="0,0" size="100,100"/>
    <DrawTextWithOutline text="@buttonText" loc="7,0" size="100,100" textStyle="ButtonTextSelected" align="Left" valign="Center" fillColor="Selected" borderColor="SelectedOutline" outlineWidth="1" />
</CompositeImage>

Now we are going to move a little faster. As you can see above, these define the buttons on the sub-screens (not the main menu). What you can see is that they combine the image we use along with text that we can outline if we wanted. The prefix of "..\_CoreImages\" before the image name just directs gbpvr to the folder they belong in.

Many of the remaining composite images use this same method. The textstyles and images are different, but the ideas behind it are the same.

The last thing in the baseskin.xml that we will go over is the CommonImage.