0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0

Skinning for Kodi

23 May, 2015

Kodi, formerly known as XBMC is one of the best pieces of software to manage rich media and drive your home theatre PC(HTPC). The list of configurable options is impressive and it is open-source, actively maintained and has a six monthly release cycle.

That said, one aspect of Kodi is the ability to customize the look and feel. There is a very active skinning community that maintains the Wiki dedicated to resources. However, it is very disorganized.

Begin by downloading Kodi

  1. Head on to Kodi's download section and download the version of Kodi based on your OS. This post will focus on a Mac setup.

  2. While I haven't had complete success with the Confluence skin, the official Skinning Wiki recommends it, so I will go along with that.

Modify the keymap

One of the very first things you want to do is add the ability to reload the skin. You will want to refresh the skin to preview changes.

  1. You want to create the keymap.xml file. Place this file in /Users/<your_user_name>/Library/Application Support/Kodi/userdata/keymaps This is where Kodi on Macs reads the key bindings for keyboards and other input devices.

  2. Grab a sample keyboard.xml file from here and paste the contents into the file you created in step 1.

  3. You want to place the key binding to reload the skin in the global node.

1
2
3
4
5
6
7
8
9
<keymap>
  <global>
    <keyboard>
      <f5>ReloadSkin()</f5>
      <!-- Additional keybindings -->
      <!-- ... -->
    </keyboard>
  </global>
</keymap>

Get TexturePacker

Skins in Kodi use an .xbt file which is a result of compiling all images and assets into one file. TexturePacker lets you compile your assets into that file.

  1. Download TexturePacker for Mac here

  2. Head on to the /Applications/Kodi.app/Contents/Resources/Kodi/tools and unpack TexturePacker there.

  3. Then run TexturePacker, like so:

1
./TexturePacker -input /Applications/Kodi.app/Contents/Resources/Kodi/addons/skin.confluence/ -output /Applications/Kodi.app/Contents/Resources/Kodi/addons/skin.confluence/media/Textures.xbt

As far as I know, the output .xbt file should be named Textures.xbt

So essentially, we are passing it the path to the media folder as input and specifying the name of the .xbt file as well as where it should be saved. If you don't want to remember path names, you can simply unpack TexturePacker in the skin folder: /Applications/Kodi.app/Contents/Resources/Kodi/addons/skin.confluence/ and run it like so:

1
./TexturePacker -input ../ -output ../media/Textures.xbt

Changing fonts and font styles

  1. Move the fonts that you wish to use in the fonts folder of your skin.

  2. Run Texturepacker to create a package file containing those fonts, so that your skin has access to those assets.

  3. In your configuration, you can change the attributes that affect the font styling:

1
2
3
4
5
6
<font>
    <name>Uppercase24</name>
    <filename>HelveticaNeue_Med.ttf</filename>
    <style>uppercase</style>
    <size>24</size>
</font>