Skinning and Help:Main page: Difference between pages

From Official Kodi Wiki
(Difference between pages)
Jump to navigation Jump to search
>Jmarshall
 
 
Line 1: Line 1:
XBMC is noted as having a very flexible and robust framework for its GUI, making theme-skinning and personal customization very accessible. Users can create their own skin (or modify an existing skin) and share it with others via public websites dedicated for Xbox skins trading. "Project Mayhem" is the official skin; which is now in its third version, commonly know as "PMIII".
{{divbox|orange||To edit the XBMC Wiki just register for an account. Page creation and editing of certain pages requires an account that is a few days old and has made a hand full of edits. If you have any questions about editing or access to the XBMC Wiki, please leave a message on [[Talk:Main Page]] or contact ned (at) nedscott (dot) com .}}


==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.  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>
A skin called “Project Mayhem III”, which can be found in the XBMC SVN, is included with XBMC; the skin was originally created by Chokemaniac and is kept up-to-date by Team XBMC. 
Any additional skins you create, or download from places such as [http://www.xboxskins.net www.xboxskins.net] must be placed in the '''XBMC/Skin''' sub-folder if you wish to have XBMC auto-detect the skin and allow you to load it from within the Appearance Settings.  Currently, XBMC supports skin versions 2.0.0 and above; you will not be able to select and use a skin that is older than version 2.0<br><br>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.
<br><br>


==Skin Compatibility List==
This is for help with editing the XBMC Wiki. For help with XBMC Media Center, please see [[XBMC Online Manual]].
You can find a full list of supported skins for Xbox Media Center 2.0.0 and above in the [[Skin Compatibility List|'''Skin Compatibility List''']] section.
<br><br>


==Anatomy of a Skin==
==Wiki editing 101==
The “Project Mayhem III” skin is a great starting point for designing your own skin; it contains many of the latest SVN features found in XBMC. If you want to make your own skin, start by copying the contents of the existing “Project Mayhem III” skin sub-folder into a new folder - for example, '''XBMC/Skin/MySkin'''.  You can then edit each of the various skin files as you become more familiar with the skinning system.<br><br>
Here's some wiki editing 101 links from Wikipedia. Most things that work on Wikipedia should also work on the XBMC Wiki. If you see a feature or template on Wikipedia that you would like to use here then let us know on [[Talk:Main Page]] or contact ned (at) nedscott (dot) com .
Each skin folder must contain a '''skin.xml''' and this initial set of sub-folders:
*[[mw:Help:Editing pages]]
; [[Skin.xml|MySkin/skin.xml]]
*[[w:Help:Contents/Editing Wikipedia]]
: 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.<br>
*[[w:Wikipedia:FAQ/Editing]]
; MySkin/font
*[[w:Wikipedia:Cheatsheet]]
: This sub-folder contains all fonts used by the skin. you can add/replace fonts here
; MySkin/media
: This sub-folder contains all the media files (.png/.gif/.jpg...)
; MySkin/sounds
: This sub-folder contains all the audio files (sounds.xml/.wav...)
; MySkin/colors
: This sub-folder contains xml files describing the colors (text/diffuse) used in the skin, to allow different color themes.
; MySkin/PAL
: This is a resolution-specific folder.<br><br>
Most skins also include the following set of sub-folders:
; MySkin/PAL16x9
: This is a resolution-specific folder.
; MySkin/NTSC
: This is a resolution-specific folder.
; MySkin/NTSC16x9
: This is a resolution-specific folder.
; MySkin/720p
: This is a resolution-specific folder.
; MySkin/1080i
: This is a resolution-specific folder.<br><br>
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!) You can review the order by which XBMC retrieves resolution information in the '''[[Skin.xml#How window xml files are found|How Window XML Files Are Found]]''' section.<br><br>
More advanced skins may also contain sub-folders for additional components required to make their skin work; for example:
; MySkin/extras
: Often used to store special skin components or functions (scripts, etc.)
; MySkin/docs
: Often used to store documentation (readme, changelog, etc.)<br><br>
The goal is to keep your skin folder structure as cleanly organized as possible as it makes it easier to troubleshoot problems; this is becomes very important if you are working as part of a XBMC skin creation team.
<br><br>


==Skin Themes==
==Tools==
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.
*[[:Category:Templates]] formatting and message templates that you can use on pages for various things.
*Go to the top of any page and click on "My preferences -> Gadgets" and check out some of the additional editing tools there, especially the wikEd option
*[[Special:SpecialPages]] contains a number of tools and reports to help with editing.
*Some additional functions on this wiki are documented at [[Special:Version]]
*'''YouTube-''' To embed youtube videos (XBMC related videos only!) use <code><nowiki>{{youtube|ID}}</nowiki></code> where id= is the YouTube ID from the URL. For example, <code><nowiki>{{youtube|4NR57ELY28s}}</nowiki></code>. You can also define |height= and |width= (default is 569x320).


In addition to this, XBMC allows other .xpr files in the media/ folder, each one representing a different theme for your skin. For instance,
==Types of pages==
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
*'''General topics (main namespace)'''- Anything that is a general overview of a topic. This can be main manual pages, a page for a remote control, a page for a specific hardware part, a supplemental tool/program, or just about anything XBMC related. Some pages might be a manual-type page explaining something in XBMC, or it could be something just XBMC-related and just serving as a basic info page + bookmarks.
of a particular skin. Note that only the textures change when you change themes – the layout stays the same. If the user has selected
*'''XBMC Manual'''- Core XBMC manual/help pages. Can be in several namespaces. See [[:Category:XBMC Manual]]
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.
*'''FAQs'''- Question/common topic and answers. See [[:Category:FAQ]] and [[Template:FAQ]]
*'''HOW-TO:'''- How-to's some manual pages will simply be both general pages and a how-to page, or be paired with a how-to page. Pages in the ''HOW-TO:'' namespace should be just just for step-by-step how to's. For how-to's within a general topic page, just use the main namespace. Some how-to's are apart of the main manual, and others are more specific. We welcome any how-to's that people feel would be useful. See [[:Category:How-to]].
*'''Add-ons:'''- Add-ons, skins, etc. Great for Add-on developers and users alike. See [[:Category:All add-ons]]. '''Examples of good add-on pages include: [[Add-on:YouTube]], [[Add-on:BlipTV]], [[Add-on:iPlayer]], [[Add-on:PleXBMC]], [[Add-on:Common plugin cache]]'''. Subpages (if needed) can be made with a slash ('''/''') in the name.
*'''Development'''- Pages for developers or really advanced topics. Includes Skin and Add-on development. Can be in several namespaces. See [[:Category:Development]]
*'''User:'''- Username space for user pages. All editors get their own User page and can make additional subpages by adding a slash ('''/'''). Great for putting down notes on what you are working on for the XBMC Wiki, or you can even use your userpage to document your own XBMC set ups.


When the user selects a theme, XBMC will automatically also select the themes default color set, based on the <themename>.xml file located in the colors/ folder. See below for more information.
==Where we need help==
''everywhere, but here's an easy list:''
*All of the FAQs, see [[:Category:FAQ]]
**An upgrading to v11 (Eden) FAQ for changes, what to expect, where to find things that moved, the file/library mode thing, etc. See [[Upgrading to XBMC v11]] for a pre-created page.
*Improve [[Quick Start Guide]]
*Update screen shots on various pages (click on an image and then click on "upload new version")
*Wiki How-tos for:
**Bluray stuff
**3D stuff
*Screen shots uploaded for all skins in [[:Category:Skins]]
**Any other kind of manual/help info specific to skins
*Expanding Add-on pages. Great for Add-on developers and users alike. See [[:Category:All add-ons]]. '''Examples of good add-on pages include: [[Add-on:YouTube]], [[Add-on:BlipTV]], [[Add-on:iPlayer]], [[Add-on:PleXBMC]], [[Add-on:Common plugin cache]]'''. Subpages (if needed) can be made with a slash ('''/''') in the name.
*Pages/writeups for:
**A list of iOS remote apps
**[[Troubleshooting]]
*Spel cheking (everywhere)
*Useful keymaps. See [[:Category:Custom keymaps]]
*Spam/vandalism patrolling of [[Special:RecentChanges]]. See spam? Remove it! You can use the Undo feature or find a spam-free version in the "View history" tab (click on a past version, then click on Edit, then save, to restore an older version of a page).
*Pages needing updating/cleaning up: [[:Category:Cleanup]]
*Pages needing expanding: [[:Category:Incomplete]]
*XBMC Wiki help pages (including this very page). Need expanding, how-to's, etc, on how to edit and use the XBMC Wiki.


A suggested method of creating a theme is as follows:
[[Category:Wiki]]
 
#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.
<br><br>
 
==Colour Themes==
Different colour themes can be accomplished by placing a set of .xml files in the colors/ folder of the skin.  [[Colour Themes|See here for more information.]]
 
==Fonts==
XBMC allows you to customize which fonts are displayed onscreen in the User Interface. See the '''[[Fonts]]''' section for more information.
<br><br>
 
==Includes==
The other special (and arguably the most important skinning file of all) is includes.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 include files setup, many of the default parameters for a different resolution can be done by just altering the parameters within the include file(s) for the different resolution.<br><br>
With the 2.1 skinning engine, you can infact have more than one include file - you can specify the file attribute when including from a different file, allowing you to have an include file dedicated to a particular set of attributes.<br><br>
The layout of an includes file is as follows.
<xml> 
  <includes>
    <include name="whitetext">
      <textcolor>ffffffff</textcolor>
    </include>
    <include file="listdefaults.xml" />
    <default type="button">
      <include>whitetext</include>
    </default>
    <constant name="leftedge">50</constant>
  </includes>
</xml>
 
You'll notice in the above example that we have 4 different types of includes.  The first <include> tag basically allows a substitution of the tags underneath it whenever it occurs.  For instance, if in a window .xml file you have this:
 
<xml>
  <control type="togglebutton">
    <include>whitetext</include>
    ... other tags go here
  </control>
</xml>
 
Then it would substitute the <textcolor> tag for where the include tag is.  You can have as many includes as you like, and as many tags can be inside an include - even complete controls, or complete control groups.
 
The second <include> tag in the example demonstrates how to include from a different file.  As there is no include name specifies, it will include the contents of the entire file at that point.
 
The <default> tag is similar to an include, except that it is used in every control of that type - even if you don't specify that the control is to use includes.  Thus every buttoncontrol will have the whitetext include in it.  Note that you can override this by specifying the <textcolor> tag in the buttoncontrol.
 
And finally, the <constant> tag allows you to define a numeric (floating point) constant by name for use in place of numeric values (<posx>, height="" etc.) would otherwise be used.  This allows alignment of items using the same position values which can then easily be altered in one place.
<br><br>
 
==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>
The list of all window .xml files and what they represent is be found in the '''[[Window IDs|Window ID's]]''' section.<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>
The structure of the window .xml files can be found in the '''[[Window Structure|Window Structure]]''' section.
<br><br>
 
==Controls==
Controls are the substance of your skin. They define everything from buttons, to text labels, to visualization placement. The '''[[Controls]]''' section will explain each and every control in detail.
<br><br>
 
==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 implementations. For further information of available variable and how they can be applied see the '''[[Conditional Visibility]]''' section.
<br><br>
 
==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.  For further information, see the '''[[Animating Your Skin]]''' section.
<br><br>
 
==Skinning Tutorials==
This '''[[Skinning Tutorials]]''' section is designed to help both people who are new to skinning XBMC get to grips with how the system works, as well as dealing with a few things that the old timers may find useful.
<br><br>
 
==Skinning Tools==
The following tools are designed primarily for skinners who want to create and test out their skins (and python scripts) without having to transfer everything to the xbox.<br><br>
{| class="usertable" border="1"
|- class="userrow"
| class="usercell" |
<div class="indent">'''TOOL''' </div>
| class="usercell" |
<div class="indent">'''NOTES''' </div>
|- class="userrow"
| class="usercell" |
<div class="indent">XBMC PC </div>
| class="usercell" |
<div class="indent">- Requires Visual Studio 2003 (.NET)<br>- Requires DirectX SDK (Summer 2004 recommended) to build executable.<br>- Requires DirectX8 compatible graphics card on system.<br><br>Source code is available in SVN.  Just ask on the skinning forums or in #xbmc on freenode if you can't build it yourself, and someone will help you out.</div>
|- class="userrow"
| class="usercell" |
<div class="indent">XBMC for Linux</div>
| class="usercell" |
<div class="indent">- Requires Ubuntu Feisty Fawn (7.04) and packages required for development.<br><br>- Cannot currently compress textures though (XBMCTex is not yet ported).</div>
|- class="userrow"
| class="usercell" |
<div class="indent">XBMC Skin Editor </div>
| class="usercell" |
<div class="indent">- Self-contained Installer (.MSI).<br><br>http://xbmcskineditor.xbox-scene.com</div>
|}
<br><br>
 
[[Category:Inner Workings]]
[[category:Skin Development]]
[[category:Python]]

Revision as of 04:21, 15 February 2012

To edit the XBMC Wiki just register for an account. Page creation and editing of certain pages requires an account that is a few days old and has made a hand full of edits. If you have any questions about editing or access to the XBMC Wiki, please leave a message on Talk:Main Page or contact ned (at) nedscott (dot) com .


This is for help with editing the XBMC Wiki. For help with XBMC Media Center, please see XBMC Online Manual.

Wiki editing 101

Here's some wiki editing 101 links from Wikipedia. Most things that work on Wikipedia should also work on the XBMC Wiki. If you see a feature or template on Wikipedia that you would like to use here then let us know on Talk:Main Page or contact ned (at) nedscott (dot) com .

Tools

  • Category:Templates formatting and message templates that you can use on pages for various things.
  • Go to the top of any page and click on "My preferences -> Gadgets" and check out some of the additional editing tools there, especially the wikEd option
  • Special:SpecialPages contains a number of tools and reports to help with editing.
  • Some additional functions on this wiki are documented at Special:Version
  • YouTube- To embed youtube videos (XBMC related videos only!) use {{youtube|ID}} where id= is the YouTube ID from the URL. For example, {{youtube|4NR57ELY28s}}. You can also define |height= and |width= (default is 569x320).

Types of pages

  • General topics (main namespace)- Anything that is a general overview of a topic. This can be main manual pages, a page for a remote control, a page for a specific hardware part, a supplemental tool/program, or just about anything XBMC related. Some pages might be a manual-type page explaining something in XBMC, or it could be something just XBMC-related and just serving as a basic info page + bookmarks.
  • XBMC Manual- Core XBMC manual/help pages. Can be in several namespaces. See Category:XBMC Manual
  • FAQs- Question/common topic and answers. See Category:FAQ and Template:FAQ
  • HOW-TO:- How-to's some manual pages will simply be both general pages and a how-to page, or be paired with a how-to page. Pages in the HOW-TO: namespace should be just just for step-by-step how to's. For how-to's within a general topic page, just use the main namespace. Some how-to's are apart of the main manual, and others are more specific. We welcome any how-to's that people feel would be useful. See Category:How-to.
  • Add-ons:- Add-ons, skins, etc. Great for Add-on developers and users alike. See Category:All add-ons. Examples of good add-on pages include: Add-on:YouTube, Add-on:BlipTV, Add-on:iPlayer, Add-on:PleXBMC, Add-on:Common plugin cache. Subpages (if needed) can be made with a slash (/) in the name.
  • Development- Pages for developers or really advanced topics. Includes Skin and Add-on development. Can be in several namespaces. See Category:Development
  • User:- Username space for user pages. All editors get their own User page and can make additional subpages by adding a slash (/). Great for putting down notes on what you are working on for the XBMC Wiki, or you can even use your userpage to document your own XBMC set ups.

Where we need help

everywhere, but here's an easy list:

  • All of the FAQs, see Category:FAQ
    • An upgrading to v11 (Eden) FAQ for changes, what to expect, where to find things that moved, the file/library mode thing, etc. See Upgrading to XBMC v11 for a pre-created page.
  • Improve Quick Start Guide
  • Update screen shots on various pages (click on an image and then click on "upload new version")
  • Wiki How-tos for:
    • Bluray stuff
    • 3D stuff
  • Screen shots uploaded for all skins in Category:Skins
    • Any other kind of manual/help info specific to skins
  • Expanding Add-on pages. Great for Add-on developers and users alike. See Category:All add-ons. Examples of good add-on pages include: Add-on:YouTube, Add-on:BlipTV, Add-on:iPlayer, Add-on:PleXBMC, Add-on:Common plugin cache. Subpages (if needed) can be made with a slash (/) in the name.
  • Pages/writeups for:
  • Spel cheking (everywhere)
  • Useful keymaps. See Category:Custom keymaps
  • Spam/vandalism patrolling of Special:RecentChanges. See spam? Remove it! You can use the Undo feature or find a spam-free version in the "View history" tab (click on a past version, then click on Edit, then save, to restore an older version of a page).
  • Pages needing updating/cleaning up: Category:Cleanup
  • Pages needing expanding: Category:Incomplete
  • XBMC Wiki help pages (including this very page). Need expanding, how-to's, etc, on how to edit and use the XBMC Wiki.
Retrieved from "https://kodi.wiki/index.php?title=Skinning&oldid=29122"