How to Customize Kodi Home Screen – adding image/icon to text home item

My choice of skin for Kodi is Confluence. It’s nice and easy to navigate, however I did not find a way to add some icons to the Home items. While I found some documentation online with some snippets, it wasn’t obvious how they fit together. If you are planning to customize your Kodi Confluence skin with some icons I hope this description will help.

The file you will need to modify is:

.kodi/addons/skin.confluence/720p/Home.xml

Should you want to add new item on the screen this is also the place to add them and if you don’t care about translation it’s pretty strait forward.

Now there are two parts that will made the icon to show up. First you need to define the section the icons should be placed in the layout and in the items section the icons to be used.

The layout also has two components, one when the item is on focus and one when is not. You need to modify both of these.

How does the code look like?

In the default Confluence skin a have added two section in the layout area:

<control type="fixedlist" id="9000">
    <left>-110</left>
    <top>5</top>
    ....
    <itemlayout height="60" width="340">
       <control type="image">
          <left>-20</left>
          <top>4</top>
          <width>1</width>
          <height>52</height>
          <texture>HomeSeperator.png</texture>
       </control>
       ....
       <control type="image">
         <left>0</left>
         <top>10</top>
         <width>60</width>
         <height>40</height>
         <fadetime>400</fadetime>
         <aspectratio>keep</aspectratio>
         <texture>$INFO[ListItem.Property(icon)]</texture>
       </control>
       <control type="label">
          ....
       </control>
   </itemlayout>
   <focusedlayout height="60" width="340">
          ....
          <control type="image">
             <left>0</left>
             <top>10</top>
             <width>60</width>
             <height>40</height>
             <fadetime>400</fadetime>
             <aspectratio>keep</aspectratio>
             <texture>$INFO[ListItem.Property(focused)]</texture>
             <visible>Control.HasFocus(9000)</visible>
             <include>VisibleFadeEffect</include>
           </control>
           ....
</focusedlayout>

At this the layout has two image placeholders, one for the default state and one for the focus state. We won’t see anything yet since we have not added the icons for the labels.

<content>
   ....
   <item id="10">
        <label>31954</label>
         <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
         <icon/>
         <thumb/>
         <property name="icon">special://skin/backgrounds/movie-icon.png</property>
         <property name="focused">special://skin/backgrounds/movie-icon-fg.png</property>
         <visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>
   </item>
   <item id="11">
         <label>31955</label>
         <onclick>ActivateWindow(Videos,TVShowTitles,return)</onclick>
         <icon/>
         <thumb/>
         <property name="icon">special://skin/backgrounds/tvshow-icon-fg.png</property>
         <property name="focused">special://skin/backgrounds/tvshow-icon.png</property>
         <visible>!Skin.HasSetting(HomeMenuNoTVShowButton) + Library.HasContent(TVShows)</visible>
    </item>
    ....
</content>

As you can see I specified two images, a color and a gray scale one, that will be inserted into the layout. The image size should be 60x40pix to fit nicely  but if you choose a different size you can play around with the size/height attribute of the item as well.

To make your life easier you can download the modified Home.xml here. Make sure you extract them in the following locations:

.kodi/addons/skin.confluence/backgrounds/addon-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/addon-icon.png
.kodi/addons/skin.confluence/backgrounds/cartoon-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/cartoon-icon.png
.kodi/addons/skin.confluence/backgrounds/movie-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/movie-icon.png
.kodi/addons/skin.confluence/backgrounds/music-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/music-icon.png
.kodi/addons/skin.confluence/backgrounds/system-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/system-icon.png
.kodi/addons/skin.confluence/backgrounds/tvshow-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/tvshow-icon.png
.kodi/addons/skin.confluence/backgrounds/videos-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/videos-icon.png
.kodi/addons/skin.confluence/backgrounds/weather-icon-fg.png
.kodi/addons/skin.confluence/backgrounds/weather-icon.png
.kodi/addons/skin.confluence/720p/Home.xml

If you still have ant questions or you want to share if it worked for you, leave a comment. Alternatively head over to the kodi.tv forum, the closes topic I found is here: https://forum.kodi.tv/showthread.php?tid=158669

Csaba is passionate about Cyber Security, Pentesting and just making things work.

Leave a reply:

Your email address will not be published.

 

Site Footer

Sliding Sidebar