Skin tutorial. (1 Viewer)

December 28, 2005
237
3
Sydney
Home Country
I have decided to make a fundamental guide for people who wish to start skinning. As I feel the Skin wiki Is a bit complex for someone starting out know nothing at all. This post started out just being a description but end up being more like a tutorial

The basics
A XML file is just a “text” file and can be open in any text editing software e.g. notepad.

Once you open a file you will see some code (see: code 1). Now the first thing you need to know is when ever you open a element/function (e.g. <control>) it MUST be closed (e.g. </control> Tip: “ / “ means close) when you have finished with it. A good thing to do when your starting to learn how to code is when you open a element close it before you start adding what you wish to have in it. As MediaPortal skinning engine dose not tell you at which line it had an error and you will just have to look thought you file to find the error.

CODE 1
Code:
<window>
<id>101</id>	
<controls>	
	<control>
		<description>template for button</description>
		<type>button</type>
		<id>2</id>		
					 <textureFocus>button_green_focus_165x32.png</textureFocus>
		<textureNoFocus>button_green_nofocus_165x32.png</textureNoFocus>
<width>500</width>
		<height>185</height>

		<posX>400</posX>
<posY>463</posY>	

<label>605</label>
			<align>right</align>
  			<font>font40</font>
			<textXOff>50</textXOff>
			<textYOff>45</textYOff>
	   		<textcolor>40000000</textcolor>
		<visible>no</visible>
	</control>
		<control>
		…
		</control>
…
</controls>	
</window>

Now I’ll try and explain how things are set out with the example above (code 1)
<window>
Don’t get to concerned with knowing what this is. Just know that it has to be the first thing open in any Skin XML file and the last thing closed.

<id>101</id>
This ID is the identifying number of this XML file which MP uses. You should have/leave this ID numbers the same as MP’s default skin (BlueTwo) page in which you’re making. It will course you more problems then anything thing else if you have them different.

<controls>
Now you what too start adding graphic elements and buttons/list which make up your page. You first need to open an element which will contain all you graphics control and that is <controls>, note the “s” in the last statement.

Next you will begin to make your first button that will be placed on the page. Initially you have to open a control element.
A <control> is what holds all your information for one graphic element
<control>

</control>


After that you should place a description of what you going to use this control for.
<control>
<description> template for my button </description>

</control>


You will now tell MP what this control is going to do. Do you wish to place an image or make a button? There are many different things you can make a control do and this is done by the <type>…</type> element. We are just going to make a button so we’re using “button”
<control>
<description> template for button </description>
<type>button</type>

</control>


Here are some more example of what a type can be,
http://wiki.team-mediaportal.com/SkinArchitecture#head-f646e708e9b28bb4afc12204c8ec490026d56c6e

Now we need to give the control an identity for MP to work with. If you’re just placing images thought out your page with out any functions it is save just to use “1”. But if you’re making a button it needs have its own number.

<control>
<description> template for button </description>
<type>button</type>
<id>2</id>

</control>


With a button you have 2 images. 1 is for when the user has the button selected <textureFocus>…</textureFocus> and the second is for when it is not selected <textureNoFocus>…</textureNoFocus>.You just type in the file name with the extension of the image(s) you wish to use and has been placed in the “Media” folder of the skin.

<control>
<description> template for button </description>
<type>button</type>
<id>2</id>
<textureFocus>button_green_focus_165x32.png</textureFocus>
<textureNoFocus>button_green_nofocus_165x32.png</textureNoFocus>


</control>


too be continued… on demand
 

Users who are viewing this thread


Write your reply...
Top Bottom