Estuary is Kodi's default skin, so it makes a good example of how to get start with editing a skin
2 Setting up a developer environment for skinning
First thing we need to do is setup a simple skin development environment:
To get the most out of it you'll need to either make a new keymap.xml or add this to your existing one.
<keymap> <global> <keyboard> <F5>XBMC.ReloadSkin()</F5> <F7>Notification(Testing 123,Hello world)</F7> <F8>Skin.ToggleDebug()</F8> </keyboard> </global> </keymap>
You will need to copy this keymap.xml file into the Kodi userdata folder. In our example, we are using windows so I have copied this file into the C:\Users\user\AppData\Roaming\Kodi\userdata\keymaps folder.
Now we need a text editor to actually edit the files. Any text editor will work but we recommend something that can open multiple files at once such as Sublime Text or Notepad++
3 Testing your enviroment
Lets launch Kodi and try out our new skinners keymap features.
The following keys will then activate the corresponding action:
F5 - Reload skin (used to see any changes instantly without restarting XBMC) F7 - Activated the KaiDialogToast.xml (used to display the notification dialog) F8 - Show/Hide the Debug Info (used to display the currently active windows or dialogs)
As you can see all these features are incredibly important to a skinner.
4 Structure of Estuary
The default skin is very nicely laid out in actually quite a simple way. In our case on Windows, you can access the skin files in this folder C:\Program Files (x86)\Kodi\addons\skin.estuary\xml
Below are some explanations of the files you will see in the Estuary XML folder:
The file "Home.xml" is the basic home screen you see on first load of Kodi.
Files that start with "My" are the main sub windows from the main screen such as Music or TVShows.
Files that start with "Includes_" are all files that incorporate common elements that can be used all over the skin.
Files that start with "Dialogue_" are all popups you see in the use of Kodi
Files that start with "View_" are all the specific views you see in the skin, such as wide list or the Poster view for example.
Files that start with "Settings" are simply to detail the settings menu.
As you can probably tell, editing a skin is actually pretty logical and great effort has been made by the original developers to make it easy to understand.
5 Making your first skin edit
As an example here, I am going to show you how to add a feature that was important to me but missing in the standard Estuary release.
This example will show you how to add a music rating to the wide list view.
Currently the rating only shows under the album artwork when you have a single track focused on the right.
I will change this so that every rating shows next to each track name even when not focused.
First thing we need to do is find out what files to edit. Now this is pretty easy because we can press F8 on the keyboard to see the debug screen in Kodi.
Now browse to the screen you want to edit in Kodi and the debug text will change. In this case its changed to "MyMusicNav.xml" and Focus is "55 (Fixed list)".
So go ahead and open these 2 files: "MyMusicNav.xml" and "View_55_WideList.xml". Its also important that we open the "includes.xml" file as this has many common elements that will help us.
At this point you may find it useful to start test deleting bits of the "View_55_WideList.xml". Try deleting different containers and control elements in the XML file.
You should quickly learn what bits do what with this method. For example if I remove the <itemlayout height="80" condition="Container.Content(songs)"> code section, all the track listings disappear!
Now we know what bits do what, we can start to edit. Lets look at this code:
As you can see, its quite simple. This code shows the duration of the track on the widelist music screen. You can see where the control is positioned, how its aligned and what colour it is. In this case its grey.
As a quick test lets change the colour to yellow! Just change "<textcolor>grey</textcolor>" to "<textcolor>yellow</textcolor>". Go back to Kodi and hit F5 on the keyboard and all your track lengths go yellow!
Magic! Now lets try adding some text instead of the duration, just as a test. Just change "<label>$INFO[ListItem.Label2]</label>" to "<label>Blah!</label>"
OK so that was fun, but its probably best to change that back now. Undo(ctrl + z) and redo(ctrl + y) are your friends while testing :)
So lets actually get on with our modification, what we need to do is find out what label the user rating is. To find this out we need to look in the "includes.xml" file as the rating star resides in there as its a re-usable element all over the skin.
You can do a quick text search "Ctrl + s" and look for "rating". Easy huh!
This looks quite complicated (and it is a little due to the settings in there) but actually it just shows a rating "circle" with either the user or the overall rating inside it.
What we are really looking for here is the infolabel string. We've circled it above as ListItem.UserRating so lets copy (Ctrl + c) that simple string for use later.
We don't need to do anything more with the includes file at this time but hopefully you can see the power of using re-usable elements in this file.
So now go back to your "View_55_WideList.xml" file and lets add a new control. All we are going to do is copy the duration control to just below.
As you can see from the screenshot we now have a new control which has been modified with a few new values.
We've changed the position of the control to be slightly to the left of the song duration control.
We've also changed the colour to yellow and the label to our rating listitem. In this case its: "$INFO[ListItem.UserRating]"
Right, that's it. We have managed to get the rating to show on each song track listing. Our objective has been achieved!
This example is obviously not complete, we need to change the control that is selected to also show the rating and possibly change the actual rating to star images but you get the idea!
Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.
6 More advanced edits
Just to complete this guide, lets try and add some graphical stars to the widelist view, while also adding the focused stars.
Lets change the code we added earlier to an image control
And we end up with something like this!
Last but not least, we need to add a new control for when the song is in focus by the user. This will ensure that the stars do not disappear when the user moves over each song with the selection bar.
So all we have done is copy the same code again and put it this time in the control, that is visible when "HasFocus" is selected.
7 See also