System Requirements:
- Kodi Krypton, 17.0, 17.1, 17.2, 17.3, 17.4
The Problem:
If you are a Kodi user, you will have no doubt noticed that with the change in version from 16 to 17, the XBMB Foundation changed the default skin from Confluence to Estuary. While Estuary is a nice looking skin, with Kodi 17, the programme has become more limited in the font customisation’s that are available through the skin/UI settings menu. Where as under previous versions, you had some pre-defined normal, large, extra large style choices, under version 17 all you can do is switch between default font and the system default font under the guise of it having higher legibility.
If your use case is such that you have a TV that is a long way away, or more importantly, if you need to support a user with accessibility needs who relied on Kodi’s ability to resize the text size in order to navigation the system, then you are somewhat out of luck at the current time.
This article outlines how to change the font size on the Kodi TV Guide/Programme Listings page by modifying the UI skin configuration files directly. It is also intended as a very high level illustration of how to modify other UI elements.
The Fix
The process of changing the font size is fairly easy, one you know what you are doing. The process of changing the font size is a three step process
- Find the correct configuration file
- Establish what your legal parameter values are
- Edit the configuration file in the correct place
Find the correct configuration file
The Estuary skin configuration and interface files are located at .\addons\skin.estuary\, relative to the install path. For example, on Windows, this is most likely:
C:Program Files (x86)\Kodi\addons\skin.estuary\
The key repository that you need to review is the xml folder (C:Program Files (x86)\Kodi\addons\skin.estuary\xml\).
In this folder, you will find the layout parameter files for Kodi. For the purposes of this guide, the file that we need to edit is MyPVRGuide.xml. You need to identify the correct file for the section that you want to edit in order to proceed.
If you are running Windows and User Account Control (UAC) is enabled, copy the file to your desktop and then make a backup copy of it. If you try and edit the fire directly under Program Files (x86) you will get an access denied error when you attempt to save the changes.
Establish what your legal parameter values are
Note: If you just want to edit the font and don’t care about the ‘how’, you can skip this section. Just realise that you cannot put any value that you want in the font size field when editing the skin.
For the font size, Kodi does not use an integer or point value for the font size (12, 36, 48 etc). Instead, it uses an XML enumerable type definition in its DTD representing allowed values. This means that you need to know what the allows values are and that if you want to use a non-standard value, you have to perform a far more complex series of edits to allow Kodi to support a new font size. As this change is something that you will likely need to make every time Kodi receives an official update, I strongly advise not attempting to create your own DTD value and consequently how to do it will remain beyond the scope of this article.
In order to ascertain what the allowed values are, I used a Command Prompt string search to look for all instances of “>font” under the XML folder.
The following command
findstr /s /l ^>font "c:\Program Files (x86)\Kodi\addons\skin.estuary\xml\*.xml"
Yielded the following block of definitions after de-duplication
<name>font10</name>
<name>font12</name>
<name>font13</name>
<name>font14</name>
<name>font25_narrow</name>
<name>font27</name>
<name>font27_narrow</name>
<name>font37</name>
<name>font45</name>
<name>font60</name>
<name>font_clock</name>
<name>font_flag</name>
<name>font20_title</name>
<name>font25_title</name>
<name>font30_title</name>
<name>font32_title</name>
<name>font36_title</name>
<name>font45_title</name>
<name>font52_title</name>
<name>font_MainMenu</name>
These fontXXXXXX values represent the allowed enumerate values that the skin ill accept. Anything else will be ignored and substituted with a default (font12).
Edit the configuration file in the correct place
Go back to the skin .xml file you copied to your desktop. Open the file in Notepad or your preferred text editor.
You now need to find the section that controls the UI element that you want to modify. Read through it looking for clues in the XML naming and if all else fails, it is a case of trial and error to find it (unless you want to go and read the Kodi skin documentation).
If you want to edit the TV Guide programme listing entry under Kodi 17.4, then look for the following section:
<itemlayout height="62" width="60">
<control type="image" id="2">
<width>58</width>
<height>58</height>
<texture border="3" fallback="windows/pvr/epg-genres/0.png">$INFO[ListItem.Property(GenreType),windows/pvr/epg-genres/,.png]</texture>
</control>
<control type="label" id="1">
<left>6</left>
<top>0</top>
<width>50</width>
<height>36</height>
<aligny>center</aligny>
<font>font12</font>
<label>$INFO[ListItem.Label]</label>
</control>
<control type="image">
<left>6</left>
<top>35</top>
<width>20</width>
<height>20</height>
<texture>$VAR[PVRTimerIcon]</texture>
</control>
</itemlayout>
The <font>font12</font> line controls the text size. In the use case that I had, I found that changing it to <font>font30_title</font> was acceptable. Remember: You can only use one of the lookup values shown in the section above and as this is XML, it is case sensitive!
Change the value, save the file and copy it back to the XML folder. Now (re)start Kodi to view your changes.
If you edit this value, you will notice that when you highlight the programme in the TV guide, the highlight goes back to a smaller font size, while non-highlighted programme’s will display in the new, larger font size. This is because the highlight is controlled by a different section. To change the highlight, go back to the .xml file in Notepad and edit the following section accordingly:
<focusedchannellayout height="62" width="350">
<control type="label">
<left>2</left>
<top>-2</top>
<width>75</width>
<height>60</height>
<font>font12</font>
<label>$INFO[ListItem.ChannelNumberLabel]</label>
<textcolor>button_focus</textcolor>
<align>center</align>
<aligny>center</aligny>
</control>
<control type="label" id="1">
<left>68</left>
<top>-2</top>
<width>350</width>
<height>60</height>
<font>font12</font>
<label>$INFO[ListItem.ChannelName]</label>
<textcolor>button_focus</textcolor>
<aligny>center</aligny>
<textoffsetx>10</textoffsetx>
</control>
</focusedchannellayout>
Note: in version 17.4 this is immediately ABOVE the section you just edited!
Change font12 to match your new value, save, put the file back in the XML folder and (re)start Kodi. The highlight font size should now match the rest of the Programme Guide.
Once you know where to go, the process it fairly easy. Do keep pin mind though that when you update Kodi to a new version, it will overwrite your changes and you will need to go back in and edit the font sizes once again. Hopefully the XBMC UI team will get around to restoring some degree of internal configurability for this soon, as not everyone in this world has 20:20 vision!
