====== How to Customize the Kodi Media Player Skin ======

**[[wp>Kodi_(software)|Kodi]]** is a free and open-source media player.

===== Customizing the Estuary Skin =====

The following recipes were tested with **Kodi 17.6** (codenamed //Krypton//) on a Raspberry Pi, running **Raspbian Stretch**. The default skin is called **Estuary**, which is very nice indeed. We wished to make only a very few adjustments: but applying those few changes proved to be much more harder than expected, so we resumed our findings in this page.

We modified the **XML files** which constitute the skin, they are into the **/usr/share/kodi/addons/skin.estuary/xml/** directory.
===== Video Window, Wall Viewmode =====

The Estuary skin has a **wall viewmode** for the videos window which uses **portrait-oriented** widgets (290x400) with a **square thumbnail** image (270x270). We prefer instead a bigger, rectangular and landscape-oriented thumbnails, so we have customized the skin in the following way.

Each item in the wall viewmode is created using the **InfoWallMovieLayout** //include//, which is defined into the **View_54_InfoWall.xml** file. Beside that, two containers should be adjusted to accomodate the items; the first one is the main video screen **View_500_Wall**, the other is the Home's **Video** section.

  * **View_54_InfoWall.xml**. This file contains the //include// named **InfoWallMovieLayout**, which defines the item used to show  each movie thumbnail. It is composed mainly by three images; the first two define the item box (unfocused and focused), the third one is actually the picture thumbnail.
  * **View_500_Wall.xml**. This file defines the main container for videos. You can find the //include// named **View_500_Wall** which contains a panel with two elements, one called **%%<itemlayout>%%** and the other called **%%<focusedlayout>%%**; both of them contain the InfoWallMovieLayout element.
  * **Includes_Home.xml**. Movie thumbnails are shown directly into the Home screen too, this file defines the //include// named **WidgetListPoster** used for this purpose, which contains again an element called **%%<itemlayout>%%** and one called **%%<focusedlayout>%%**.
===== Favourites =====

The **Favourites** items are rendered using the **InfoWallMusicLayout** include, defined into the **View_54_InfoWall.xml** file. They are accomodated directly into the **home screen** or into a **specific dialog**. The //InfoWallMusicLayout// is used also to display music album thumbnails etc., so you have to check all the screens using it and adjust them as required.

If you want to customize the favourites, edit the following files:

  * **View_54_InfoWall.xml**. It contains the definition of **InfoWallMusicLayout**, used by //favourites// and //music albums// thumbnails. The most important part of the widget is composed by three images:
    * A **%%<control type="image">%%** representing the unfocused widget.
    * A **%%<control type="image">%%** representing the focused widget, generally some pixels bigger than the unfocused one.
    * A **%%<control type="image">%%** which is actually the thumbnail image shown into the widget. Pay attention to the aspect ratio of the image. You may want to use square images for music albums (i.e .the folder image of the audio CD), so you may also want to use square images for the favourites.
  * **Home.xml**. Favourites are shown directly into the Home screen, search this file for the **%%<itemlayout>%%** and **%%<focusedlayout>%%** elements which include the //InfoWallMusicLayout// element. You can change **width**, **height** to determine item spacing, etc.
  * **DialogFavourites.xml**. When you click onto the //Favourites// item from the Home screen, a specific dialog box will open. This file determines the spacing used to show the items. Search for the **%%<itemlayout>%%** and **%%<focusedlayout>%%** elements, to adjust the size, etc.
  * **Includes_Home.xml**. Bacause //InfoWallMusicLayout// items are used to show music albums too, you will almost certainly need to adjust the layout of the **Music section** of the Home screen. In this file you have to search for the **WidgetListSquare** include element, which contains the **%%<itemlayout>%%** and **%%<focusedlayout>%%** elements with the //InfoWallMusicLayout// inside. Make any adjustment required for item spacing, etc.

===== Viewmode Missing in File Browse Mode =====

When browsing a directory full of video files, it is not possibile to change the viewmode from the left options menu (e.g. we wished to select the **Wall Viewmode**). According to this [[https://forum.kodi.tv/showthread.php?tid=298849|post]], this is how it should work "by design": file browsing does not have such option. Fortunately it is sufficient to add the directory as a video source, click //Home// => //Video// => //Add...// and fill the relevant dialog box.

===== Manually Add a Favourite Item =====

FIXME Check if it actually works... How to add a favourite item if there is not a contaxt menu with the //Add to favourite// item? Example: how to add a favourite to open the Music album view. Edit the **$HOME/.kodi/userdata/favourites.xml** file, add a line like this:

<code xml>
<favourite name="Album" thumb="/data/album.png">
    ActivateWindow(10502,&quot;musicdb://albums/&quot;,return)
</favourite>
</code>

You can find more info about using the **ActivateWindow** function reading the [[https://kodi.wiki/view/Opening_Windows_and_Dialogs|list of available sub-sections]] in the Videos, Music, and Programs sections and reading the list of [[https://kodi.wiki/view/Window_IDs|window IDs]].

===== Web References =====

  * **[[https://forum.kodi.tv/showthread.php?tid=337700|What is the relation between viewMode ID and skin's XML?]]**
  * **[[https://kodi.wiki/view/Opening_Windows_and_Dialogs|Opening Windows and Dialogs]]**
  * **[[https://kodi.wiki/view/Window_IDs|Window IDs]]**