==General Information==
XBMC includes a new GUI library written from scratch. This library allows you to skin/change everything you see in XBMC, from the images, the sizes and
positions of all controls, colours, fonts, and text, through to altering navigation and even adding new functionality.<br><br>
The skin system is quite complex, and this portion of the manual is dedicated to providing in depth information on how it all works, along with tips to make
the experience a little more pleasant.<br><br>
If you are just getting started with skinning XBMC, then it is suggested that the best way to learn is by modifying one of the many existing skins that are
available. The default skin, Project Mayhem 3, includes almost all the various tricks and features that make the XBMC skinning engine so powerful, so is an
ideal place to start. You may wish to start by having a look through the [[Skinning Tutorials|tutorial section]], and try modifying a window or two by adding
a button, or altering the textures or layout.
==Anatomy of a Skin==
XBMC skins are packaged up and located in the skin/ folder off the main XBMC folder. This is the folder where all skins are placed and listed. By default
there's only one called Project Mayhem III, by Chokemaniac which contains the default skin.<br><br>
Any additional skins you create, our download from places such as [www.xboxskins].net can be placed here for XBMC to auto-detect them and allow you to load
them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over
into a new folder (let's say skin/myskin) is a good place to start. You can then edit each of the files as you become more familiar with the skinning
system.<br><br>
Each skin folder contains several subdirectorys, and one file:
; myskin/font
: This subdirectory contains all fonts used by the skin. you can add/replace fonts here
; myskin/media
: This subdirectory contains all the media files (.png/.gif/.jpg...) You can replace/edit these as you like.
; [[Skin.xml|myskin/skin.xml]]
: This contains the information that XBMC uses to find the other files that XBMC requires to describe it's skin. It also contains credits information, and
versioning information.
; myskin/PAL
: This is a resolution-specific directory. XBMC can run in multiple resolutions, and thus can use different files for some resolutions (as there is a big
difference between NTSC at 720x480 pixels and 1080i at 1920x1080 pixels!) [[Skin.xml#How window xml files are found|See here for the order in which it looks
for skin files.]]
==Skin Themes==
All the basic media files for a skin should be compressed into the Textures.xpr file, and placed in the media/ folder. You can use the tool [[XBMCTex]] for
this. All the images that make up the default skin theme should be in the Textures.xpr file.
In addition to this, XBMC allows other .xpr files in the media/ folder, each one representing a different theme for your skin. For instance,
you could tint all your main textures a red colour, and create a new theme package Red.xpr? this gives users more choice in the look
of a particular skin. Note that only the textures change when you change themes the layout stays the same. If the user has selected
a theme, then when a control requires a texture, XBMC will first look in the <themename>.xpr file for the texture. It will fall back to the Textures.xpr file
if <themename>.xpr doesn't contain the image. This means that the theme .xpr files need only contain the changed textures all other textures will fallback
to using Textures.xpr as usual.
A suggested method of creating a theme is as follows:
#Run XBMCTex.exe on the folder containing the default texture files, to generate Textures.xpr as you would normally do.
#Identify the textures you wish to have themed and copy them to a separate folder.
#Create a separate folder for each theme outside of your normal skin work area, and place the altered copies of each of the textures in them.
#Run XBMCTex.exe on each of the theme folders created in step 3 to create the themed .xpr files (note you can use the -output switch with XBMCTex.exe to name
the theme appropriately).
#Place Textures.xpr and each of the theme .xpr files in the media/ folder of your skin. XBMC will automatically pick them up.
==[[Fonts]]==
XBMC allows you to customize which fonts are displayed onscreen in the User Interface. See [[Fonts]] for more information.
==References==
The other special (and arguably the most important skinning file of all) is references.xml. This is, as its title suggests, a place from which you can define
the default look, size, and positioning of controls, to save you replicating many of the control's attributes throughout the window .xml files. For instance,
you can setup the size, and textures used for a button control, thus allowing you to leave those details out in the rest of the skin files, unless ofcourse
you want to override the default look or size etc. in a particular window.<br><br>
This is extremely valuable as it allows you to greatly simplify a lot of the work in building a skin. For one thing, it means that once you have
references.xml setup, many of the default parameters for a different resolution can be done by just altering the parameters within the references.xml file
for the different resolution.<br><br>
The layout of references.xml is as follows.
<xml>
<references>
<control>
...
</control>
...
<control>
...
</control>
</refereces>
</xml>
All it consists of is a <control> block for each control that you wish to define. To see the different tags available for each <control> block, see the
section on [[Controls]].
==[[Window Structure|The Window XML Files]]==
The other xml files each define the skin for a single window. They all have the same basic layout, allowing you to place different controls on the window,
and define how navigation should operate.<br><br>
[[Window IDs|The list of all window .xml files and what they represent may be found here]].<br><br>
The important thing to remember is that each window has a unique identifying number (id). This is how XBMC identifies the window from within the source code.
Furthermore, many of the controls within each window should have a unique id as well, unless they're just used as images or labels where navigation is
unimportant and XBMC does not need to be able to identify them uniquely. The window id's are all listed in the [[Window IDs|window list]].<br><br>
[[Window Structure|The structure of the window .xml files can be found here]].
==[[Controls]]==
Controls are the substance of your skin. They define everything from buttons, to text labels, to visualization placement. This portion of the manual will
explain each and every control in detail.
==[[Conditional Visibility]]==
XBMC's skinning engine versatility is based apon the fact that the skinner can display and hide portions of the skin using a variety of conditional
statements that can be combined to create very user friendly UI implimentations. For further information of available variable and how they can be applied
see [[Conditional Visibility]]
==[[Animating Your Skin]]==
The XBMC skinning engine supports animations of any control allowing them to rotate, slide, fade or any combination there-of. Combining animations with
conditional statements ensure your skin will have stunning effects that appear as professional as a 1st party product.
= Windows =
== Window Structure ==
{{:Window_Structure}}
= Controls =
== Label Control ==
{{:Label_Control}}
== Fade Label Control ==
{{:Fade_Label_Control}}
== Button Control ==
{{:Button_control}}
== Image Control ==
{{:Image_Control}}
== MultiImage Control ==
{{:MultiImage_Control}}
== Radio buton Control ==
{{:Radio_button_control}}
== Select button control ==
{{:Select_button_control}}
== Toggle button control ==
{{:Toggle_button_control}}
== Buttonscrollers ==
{{:Buttonscrollers}}
== Spin Control ==
{{:Spin_Control}}
== Settings Spin Control ==
{{:Settings_Spin_Control}}
== Slider Control ==
{{:Slider Control}}
== List Control ==
{{:List Control}}
== Thumbnail Panel ==
{{:Thumbnail Panel}}
== Text Box ==
{{:Text Box}}
== RSS feed Control ==
{{:RSS feed Control}}
== Visualisation Control ==
{{:Visualisation Control}}
== Video Control ==
{{:Video Control}}
== Mover Control ==
{{:Mover Control}}
== Resize Control ==
{{:Resize Control}}
== Edit Control ==
used as an input control for a USB keyboard (XLink Kai window)
== Console Control ==
used to display the last few items added to the video database.
== Checkmark Control ==
Used on the Kai Host Dialog. Similar to Radio Button but does not have the button texture, and the checkmark is on the left
== Extended List Control ==
used in the XLink Kai window.
= Conditional_Visibility =
{{:Conditional_Visibility}}
= Animating Your Skin =
{{:Animating_Your_Skin}}
= Fonts =
{{:Fonts}}
= Apendix I: List of Windows =
{{:Window_IDs}}
= Apendix II: List of Boolean Conditions =
{{:List_of_Boolean_Conditions}}
= Apendix III: List of Info Labels =
{{:InfoLabels}}
= Apendix IV: List of Built In Functions =
{{:List_of_Built_In_Functions}}