HOW-TO:Simple Modifications

From Official Kodi Wiki
Jump to navigation Jump to search

Template:XBMC wiki toc Inline This tutorial will show you how to change the main menu on the Home Screen of the Project Mayhem 3 skin. For the Confluence skin check out this link This is achieved by editing PAL/Home.xml, which is the xml file for the Home window for all 4x3 resolutions. If you want to change the home.xml for a 16x9 resolution, you would change PAL16x9/Home.xml.

You can find a list of the windows and their xml files here

How to Reorder the Main Menu

In the relevant home.xml file, locate for example “My Pictures normal push button”. Here you can change posX, posY to match your preference (in your case you'll edit posY only). Of course you will have to change all the other buttons as well if you change one.

Note that you have to edit the ondown and onup tags as well for each button. The ondown and onup tags denote which button should be selected after the current one when you press up or down on the controller. The number you see, for example <onup>6</onup> is the id of a button. All buttons have an unique id (tag <id>), which should be specified for onup and ondown accordingly.

Just write posY and id down for all buttons and then you can arrange them by just exchanging the posY tag between them (and change the onup and ondown tags accordingly of course).

How to Change the Function of an Option

The homepage of XBMC features the main sections (My Programs, My Pictures, My Videos and My Music) as separate buttons. This tutorial shows you how to change one of these buttons so that it launches one of the other sections with a different default folder. This allows you to have 2 different links into the same section, with different default paths.

In particular, in this tutorial we set the My Programs button so that it loads the My Programs section with a default path of F:\apps. We then change the “My Pictures” button to also launch the My Programs section, but this time with a default path of F:\games.

We do this by first editing the Sources.xml file to establish the sources for Programs, and then edit the Home.xml file in the skin to change the functionality of the Pictures button.

Source Configuration

You can just do this using the GUI to add sources (press White while in the root listing of My Programs).

Alternatively, configure the Sources.xml shares for My Programs as follows:

 <xml>
 <myprograms>
    <default>Programs</default>
    <source>
      <name>Games</name>
      <path>F:\Games\</path>
      <depth>1</depth>
    </source>
    <source>
      <name>Programs</name>
      <path>F:\Apps\</path>
      <depth>1</depth>
    </source>
 </myprograms>
 </xml>

Note that we've just setup 2 sources – Games and Programs. And we've made Programs the default source. Clicking on My Programs now will automatically load the My Programs section and display all the applications in F:\Apps (the Programs source). In order to get to the Games source, we'd have to navigate up a folder (pressing B) then go into Games. We want this to be a separate section on the home page, so we have to change one of the current buttons (or add a new one) to do this.

Changing the My Pictures button to My Games

Load up the Home.xml file that you use. This will either be in the PAL folder, or in the PAL16x9 folder, depending on whether you use a 4x3 or 16x9 resolution.

Find the <control> for the My Pictures button:

<xml>
<control>
       <description>My Pictures normal push button</description>
       <type>button</type>
       <id>4</id>
       <posX>91</posX>
       <posY>271</posY>
       <width>14</width>
       <height>13</height>
       <label>1</label>
       <onclick>ActivateWindow(MyPictures)</onclick>
       <font>special13</font>
       <onleft>98</onleft>
       <onright>99</onright>
       <onup>2</onup>
       <ondown>5</ondown>
       <textureFocus>home-focus.gif</textureFocus>
       <textureNoFocus>-</textureNoFocus>
       <textOffsetX>30</textOffsetX>
</control>
</xml>

As you can see, this button normally has <label> 1 (a reference into the strings.xml file), and normally launches the MyPictures window (<onclick> tag). Change it's <label> and replace the <onclick> tag as follows:

<xml>
<control>
       <description>My Games push button</description>
       <type>button</type>
       <id>4</id>
       <posX>91</posX>
       <posY>271</posY>
       <width>14</width>
       <height>13</height>
       <label>My Games</label>
       <onclick>ActivateWindow(MyPrograms,Games)</onclick>
       <font>special13</font>
       <onleft>98</onleft>
       <onright>99</onright>
       <onup>2</onup>
       <ondown>5</ondown>
       <textureFocus>home-focus.gif</textureFocus>
       <textureNoFocus>-</textureNoFocus>
       <textOffsetX>30</textOffsetX>
</control>
</xml>

The button will now have a label “My Games”, and will automatically launch the My Programs section, using Games as the default source. Note that I also changed the <description> tag as it's always nice to document the changes you make. This tag is not read by XBMC at all – it's just there for the skinners benefit. Ok, now that's done, upload the file to the xbox, and test it out!

Prettying it up

The last thing we might want to do is fix up the image that is displayed when focus is set to the new My Games button. If you've tested what happens currently, when the My Games button is focused, it will still show the background picture for My Pictures, which doesn't really fit. There's a couple of ways around this, but the easiest one is as follows.

Find the image that it's loading. This will be the multiimage control that has <visible>Control.HasFocus(4)</visible>. (see that the id of the button we changed above was 4).

<xml>
<control>
     <type>multiimage</type>
     <id>0</id>
     <posX>182</posX>
     <posY>105</posY>
     <width>538</width>
     <height>362</height>
     <imagepath>4x3home-mypictures</imagepath>
     <visible>Control.HasFocus(4) + !Player.HasVideo</visible>
</control>
</xml>

As you can see, it's loading image from the 4x3home-mypictures/ folder. We want to change this to load the games picture, so change the <imagepath> tag to <xml> <imagepath>4x3home-myprograms</imagepath> </xml> Note that you could add a completely different imagepath, or image at this point. It should be around 512x362 to match the current one. Just name something different than the textures already included (as they're pre-packaged into Textures.xpr), for instance “mygamesimage.png” will do the trick. Place it in the media folder of the skin, and change the <imagepath> tag to: <xml> <imagepath>mygamesimage.png</imagepath> </xml>

References

More information on the structure of skin xml files can be found here

More information on the different skin files, window names, and id's can be found here

Information on Button controls

Information on MultiImage controls

See also: