Create Your Own Build Extra – Improving the look!

In this installment of create your own build we are looking at multiple images and fonts!

As I created my own build on my android box I must apologise for the quality of the images as I am unable to take screenshots. I do hope however you get the overall idea of how the look of your build can be improved by changing the fonts and adding multiple backgrounds.

Firstly if you want to start creating your own build from the very beginning please -CLICK HERE-

Now we are going to look at adding multiple images to each section in your menu and changing the font in the main menu bar. These changes give your build an overall much more professional look.

To start we will first go through how to add multiple backgrounds into your build, this is not very difficult at all and quite similar to putting single backgrounds into your build as I have gone through in a previous blog.

At this stage I would advise anyone creating their build on an android device to install the HD Filemanager application from the playstore. It’s free and it makes creating folders for multiple backgrounds a lot easier and it also helps a lot later on when we are changing the fonts.

First of all you need to of course gather your images to use in your build, as far as I can see you can place as many as you want into each section but I would advise on not putting too many in as it may slow your device a little.

After getting your images you now need to create folders for each of the items in your menu. I would also advise if you only want a single image in a certain menu item to still create a folder for it to place in your build (Doing this will ensure that when you clean your thumbnail files you won’t lose your image!)

When I created my folders for my images using the Hdfilemanager on my android device I moved the folders to the following: Android/Data/Org.xbmc.Kodi (I would recommend placing your folders here) and when using Windows I created the folders in my documents.

• Now to place your folders into the build, first you click on system, appearance, skin/settings, set up main menu and then you see the following screen. Go to the menu item you wish to place the folder in and go across to set item background as highlighted below and click on it.
• Now click on ‘Set multi-image background’
• If you are using Windows you will now click on the C: drive, as highlighted below. If you are using Android you will click on ‘External storage’ at this point.
• Now you need to click on ‘Users’ as highlighted below. If you are using Android you will now click on ‘Android’
• As you can see my user name highlighted below is al, whatever your user name is click on it. If using Android and you have placed the folders in the folder I advised of before you now click on ‘data’
• Now you will see ‘Documents’ or whichever folder you used to save your images. Using Android scroll to the bottom until you see ‘org.xbmc.kodi’ and click there.
• Now finally you will see your folder or folders you have created in both Windows and Android. At this stage you will see all the folders you have created for your build, now choose the folder you need for the menu item you are currently working on.
• After clicking on the folder you will then actually see a blank screen, do not be alarmed, just go across to and click ‘ok’ as highlighted below and all of your images in that folder will now be placed in that section of your build.
• And in the future if you want to add or remove images from your build you only need to go to the corresponding folder, be it in Windows or Android and just add and delete there and they will be changed in your build, no need to go through all of the above again
  

  ---

Next, changing the fonts on your main menu bar, this and adding a splash of colour to your main menu bar can make a huge difference to how your completed build looks when finished.

I tried a few different sites whilst searching for fonts to use, most have very similar fonts and an absolute massive amount but I found that a site called Dafont.com was the easiest to navigate and easiest to download from, without any issues, you must always remember to click on the font and make sure that it is a .ttf file and not an .otf file, because the .otf file will not work in Kodi!

Again I am only familiar with Windows and Android but I am sure other devices can not be all that different once you can find the correct path into the files that require installing and changing.

After downloading the .ttf you have chosen the file will now be in downloads as a zip file in both Windows and Android(Use the HDfilemanager here), click on the zip file to open and copy the .ttf file only. For this I have chosen a font called LaurenScript.ttf Make sure to make an exact note of the name of the .ttf file, including upper and lower case and in some files there are also symbols used.

• Once you have decided on a font you are happy with we will now place the file into the required folder. On Windows to find this folder first click ‘start’ then type %appdata% and click where it is highlighted below. If using Android click on ‘Device‘ then ‘Android‘
• If using Android you must first choose the ‘data‘ folder, then scroll to the bottom and click the ‘org.xbmc.kodi‘ folder, then click on the ‘files‘ folder. Now in both Windows and Android choose the ‘kodi‘ folder.
• Next click on the ‘addons‘ folder on both systems, Android and Windows.
• Now scroll to the bottom of the files and click on ‘skin.aeon.nox.5‘ as highlighted below or whichever skin you are working with. Same on both systems.
• Again the same on both systems, click on the ‘fonts‘ folder, as highlighted.
• This screen is where you now paste the .ttf file you made a copy of earlier, again the same for both systems. As you can see below highlighted I have used LaurenScript.ttf
• Then you need to go back a page and click the folder named ‘1080i‘ as highlighted.
• On this page you now need to find the Font xml file. If you are using Windows you need to highlight were it says ‘Font‘ then right click and then choose to ‘Edit‘. At this point if you are using Android you only need to click on ‘Font’.
• First I will show you how the Windows page you need to edit looks first. On Windows you scroll from left to right until you find <name>font_mainmenu</name> and then to the very right of that you will find the xml file you need to change manually. In the image below it says <filename>OriginalFont.ttf</filename>
• As you can see below I have typed into where the name of the original font was. Remembering to type everything exactly as it was in the .ttf file, upper case, lower case etc. LaurenScript
• Also you need to scroll along further to the right until you find <size>110</size> in order to change the size of the font, I found in most cases this number needs to be reduced, as you can see highlighted below I have reduced this particular font to 70.
• If you are using Android it is only a little different, instead of scrolling from left to right you just need to scroll down the page, it’s also a lot easier to find as all the files are stacked directly on top of one another. And the same as above, you just need to change the name of the .ttf file to the one you are using and directly underneath you can see you can also change the font size very easily.

All of that may have seemed a little daunting to some but I assure you after changing the fonts and size of the fonts a couple of times you will begin to find your way in and out of the required files in no time at all with ease.

Hopefully now the section you have worked on has started to look like the following:

As always I really hope this blog has been of some help to you. And if you ever need help with anything Kodi related feel free to follow me on twitter @Aleighty80 I am always available to help out if I can.

@Aleighty80