XBMC will be renamed to Kodi for v14. Read here for more details

HOW-TO:Edit the home screen skin files

From Kodi
Jump to: navigation, search
Home icon grey.png   ▶ Development ▶ Add-on development ▶ Skinning ▶ Skinning Tutorials ▶ HOW-TO:Edit the home screen skin files

This tutorial will show you how to change the main menu on the Home Screen of the Confluence skin. This is achieved by editing 720p/Home.xml.

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

Contents

1 How to Reorder the Main Menu

In the relevant Home.xml file, locate for example this piece of code:

<item id="7">
    <label>8</label>
    <onclick>ActivateWindow(Weather)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
    <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
</item>

this is the code for the Weather button on the Home menu. It's the first item on the left of the menu. You can just cut the piece of code and paste it after for the code for the Music button for instance:

<item id="3">
    <label>2</label>
    <onclick>ActivateWindow(Music)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
    <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
</item>

Now the weather button will show up next to, on the right of, the music button on the Home menu.

As you may have found out by now, XBMC will show the buttons (left to right) in the order they are listed in the xml file.

2 How to Change the Function of an Option

The homepage of XBMC features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.

The action of a button is defined by it's <onclick> function. If you look at the code example above, you'll see the Music button uses <onclick>ActivateWindow(Music)</onclick>. Clicking on the button will take you either to the Music Library or the Music Files list.

If you prefer to go directly to the artist listing, you can change the function to:

<onclick>ActivateWindow(MusicLibrary,Artists)</onclick>

Other options are listed on the Opening_Windows_and_Dialogs page

3 How to add a new button to the Menu

Let's say you want a button on the menu linking to your kids movies. the fist thing you need to do as add the folder containg the kids movies as a source in XBMC. This can be done by going to Videos > Files > Add videos

Alternatively, configure the sources.xml in your userdata folder as follows:

<sources>
    <video>
        <default pathversion="1"></default>
        <source>
            <name>Kids</name>
            <path pathversion="1">smb://XBMC/Movies/Kids-Movies/</path>
        </source>
    </video>
<sources>

Adding a button is pretty easy, you can just use the code of one of the other buttons as a template.

<item id="19">
    <label>Kids Movies</label>
    <onclick>ActivateWindow(Videos,Kids)</onclick>
    <icon>-</icon>
    <thumb>-</thumb>
</item>

The only thing you need to take care of, is to use an unique 'id' for the button. In the code above, i've chosen to use id="19" as it's not used elsewhere on the Home menu.

Now we have our code ready, we can simple insert it wherever we want in between the other menu buttons.


4 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


5 See also

Development:

Personal tools
Namespaces

Variants
Actions
Navigation
Wiki help
Toolbox