Great job for getting through the first milestone and creating a menu item and a sub-menu item; you are on your way to creating your first build. Since this series is dedicated to Skinning we will focus on creating changes to the Aeon Nox Skin and each article will have a main focus. The focus of this article will specifically be on adding and changing fonts for menu items and sub-menu items. I will also point out a few different options you have in understanding what font name controls different areas inside Kodi. We are not going to create a full font set in this tutorial but will work on the default fonts. This will give those who have never dabbled in an xml file a nice little overview of how it looks and what kind of effort is required to change many settings inside Kodi.
Above you will see a screenshot from my build Shanks Build which uses the Aeon Nox Silvo mod skin. With the Aeon Nox skins the “highlighted” item is the one directly in the middle and the highlight is always on this one. This is different from the Confluence skins which we will explore later on; as the confluence skins highlight can move across the main menu….
Let's not get ahead of ourselves though and focus on Aeon Nox. So as I was saying I found it sometimes difficult to see where the cursor was or highlight on my build so I figured best way to do this was to change the font that was used to make it stand out more. Also I changed the color from red to a neon green and this is something we can explore in the next chapter; yet for now we are going to focus on finding some fun fonts and applying them to work in the kodi build.
Finding the Right Font
This is always one of the most difficult parts for me; yet I know it is easy for others and many love scrolling through to find the right font. I have to admit I am not the most creative person in the world so trying to design things can be a very daunting task for me. I did find a great site for downloading fonts to use for the build and I am pretty sure most use this one also. The web address is http://www.1001fonts.com and it is extremely easy to use. What you can do is scroll through all their designs or focus on specific categories.
Once you find the one you are looking for click download to get a copy of the zip file. The zip files will contain a ttf file, TrueType font file) and sometimes a txt file. I like to extract all of mine into a folder in my downloads folder but you can save them anywhere. I just find it is easiest to remember where I put them here and to keep them all together.
Where do I put my font files?
Now that you have selected a font or two we need to move these to the correct place in the Kodi file. For this exercise I am going to use the Corleone.ttf and the breakingbad.ttf files because they will certainly stand out. As you will see I like to make things as simple as possible so Breakingbad.ttf has been changed to bb.ttf but you can name them anything as long as you remember what they are called. The below picture is showing the fonts I have already downloaded so you can see the ttf files.
We now need to move the ttf files over to the Kodi file group. Using Aeon Nox you will basically go to the same place to paste the ttf files. You want to navigate to C:/users/your_username/appdata/roaming/kodi/addons/skin.aeon.nox.5/fonts) and then you want to paste the ttf files. Once you paste your ttf files in fonts folder you will see the ttf files you added are now showing up as in the picture below.
What is in a Font tag
For the next piece you are going to need a text editor. Your computer is already equipped with notepad which will work; however I, like most, enjoy using notepad ++. It can be downloaded here and then you can install and we will be good to go.
I wanted to take a quick moment to breakdown what you are about to see in the font.xml file. This will show you what each line in the tag does:
<font>: This tag declares that we are starting a new font and we need to define all the particulars for the system to utilize it.
<name>: This tag declares the name of the font i.e. Font13, Font13_title, Font_MainMenu, font_15. I like to use it to define in terms that are easy to find. i.e. Font_submenu, Font_MainMenuFocused.
<filename>: This tag is where you put the name of the ttf font you are using i.e. Arial.ttf, black_fire.ttf, twister.ttf, etc. These will come from the font files we just dropped into the fonts folder inside the skin folder.
<size>: This tag defines the default size for your font.
<style>: This tag defines if you want all Upper or Lower case letters.
You always have to use a </> at the end of each command or line so the program knows that string is over.
The next thing we need to do is change the font for two items for this demonstration. I am going to keep it quite basic but we will go into more detail later on. I just want you to get the gist of making changes to the xml and changing a font before we jump into changing colors and text. For this the first thing we need to do is navigate to the 1080i folder in the skin.aeon.nox.5 folder. This is just one click back from inside the fonts folder. As you scroll through the 1080i folder you will see a ton of xml files; don't worry we are only going to play around in a few today.
The first one we need to locate is called Font.xml which houses all of the font information for everything inside Kodi. This is where you can create a full font set which a user can select inside the Appearance or Skin section inside Kodi or you can change just a few items on the default font set. For this we are going to just change the font_MainMenu, create a sub-menu font, and create a secondary font_MainMenufocused. You want to pay particular attention to your line item because if you do not; you could make the mistake many do at first and make changes to the wrong font section.
Changing Main Menu Font
I want to make is to change the Font on the main menu so we are going to locate Font_MainMenu as I mentioned above. Now that you know the name of the font you can do it two ways – 1. you can search through the xml files for the first time you see Font_MainMenu or -2 you can use the search function to search for Font_MainMenu. Remember to pay close attention to the line item again though. For this you want to look for line 201 (it may differ a little depending on the version of the skin but will keep you in the right vicinity).
You can see I grabbed the Font_MainMenu and currently it is set to BebasNeue.ttf. This will be the first change I am going to make and we are going to change this to breaking bad theme as I have the marathon going in the background on Tv. You just want to highlight BebasNeue.ttf and replace it with bb.ttf to change the font.
I am going to leave the size alone but we can always make it larger or smaller depending on style. After you click save you can boot up Kodi to check out your work. If you have Kodi open, press F5 on the keyboard to reload the skin. One thing I don't like about Aeon Nox is most the main menu items are in Uppercase. It may look strange depending on the font you use like when I used the breaking bad font. I have already gone back and changed it to proper case so you can see how the font looks below:
As you can see the capital letters are boxed around and use the negative space for the letters as similar to the hit show Breaking Bad's theme using the periodic element table. Our first move was a success and we were able to change a font but now we are going to do a little something different with the sub-menu.
Creating a Sub-Menu Font
The sub-menu is one of many items that uses font13_title. I don't want to change everything that is attached to font13_title to the same font as the sub-menu. So I am going to create a separate font title called font_submenu in the font xml. I will scroll down to the bottom of this section we are in before the next break in the page labeled icons. I am going to add another subset for sub-menu on line 216.
We have now added a new font name to the font.xml file. Now we need to change it in the home.xml file because several different items share this font name. We are going to save this file and open the home.xml file to change the sub-menu font. Once you are in the home.xml file you want to locate lines 173-215. These lines have to do with the font for the sub-menu. I have already gone ahead and changed all three; however, I am going to break down what each one does for you.
When you take a look you will see font13_title on lines 177, 196, and 208. You may be wondering what each of them do and why there are three. These give you more customization opportunity and make sure the system knows what font to use.
- Line 177: This will change the font for all of the sub-menu. Look at it as the master should you want it to all be one font.
- Line 196: This will change the font for the highlighted text when the cursor is on the sub-menu.
- Line 208: This will change the font for the highlighted item on the sub-menu when the cursor is not on the sub-menu.
We already changed the font for the sub-menu to be a mobster or godfather theme and used the font Corleone.ttf. Below you will see an image showing you both the main menu and the sub-menu have had their fonts changed. This is just the start of what we can do inside the xmls. We will dive further into this in future articles.
Main Menu Focused Item
Now that we have changed the main menu font and created a subset for the sub-menu font; I want to show you one more thing we can do. I mentioned in Aeon Nox you do not have a highlight for the main menu. So the next thing we are going to practice is creating a font_MainMenuFocused. This will be for when the highlight is over a particular menu item, we are going to have it show up as a different font to help distinguish where the cursor is and also to give the build a little more style. I am going to jump ahead and grab another font from my fonts folder. Once I have found the font I will add it to the font folder inside skins.aeon.nox.5/fonts.
For this example, I am using the black_fire.ttf font. This font will really stick out to you so you can see the difference. I have renamed black_fire.ttf to bf.ttf to clean things neat. We are going to repeat what we had done earlier with the sub-menu font and create a new sub-set. We are going to name it font_MainMenuFocused. I went ahead and put this together the same way and kept the font size at 112.
Now that we have defined the font for the main menu focused item; we are going to need to make a change to another xml file. For this we are going to use the includes_home.xml. Once you are in the includes_home.xml you are going to want to locate lines 35-55. This is going to be what we need to change for the focused text. You need to change the font on lines 28 and 47 to the new font as I have done below:
Once again using the same method as above we are going to rename font_MainMenu to font_MainMenuFocused. You can click save once you have finished and open the Kodi Application. In Kodi you can also use the F5 key to reload your skin to see the changes you have made. If you don't like how it looks you can always play around. As you would agree the 112 font size for the black_fire is a little too big for the space. Luckily we can always make the size smaller and adjust it to our liking.
You should be very happy after getting this far and recognize your achievement. You were able to change a font.ttf and create two new font tags. Skinning and working in the xml files can be quite overwhelming. Remember to always make a back-up of the xml files before you start. This will save you plenty of time in the long run when having to replace the xml file.
I hope you have enjoyed the second installment about building and editing xml files inside Kodi. Next we will take a look at changing colors to do some fun things with the text and menu fonts. If you have any questions as always please feel free to visit us on the Ares Forum.