Changing the colour of the font in your main menu is a great way to start customising a build. It’s quick and easy to do and is something that you can see instantly within Kodi.
This tutorial will walk you through how to make these changes using the Aeon Nox 5 skin. I’m using this as it’s the most popular skin in the community at the moment and also forms the base of most of the 3rd party builds that are around.
If the build you’re using doesn’t have a menu that looks like the one below, the following tutorial will still be useful, but the location of various menu options may differ a little bit!
Tutorial: Changing menu colour
The first thing that we need to do is to decide what colour we want to make our Menu text. We can make this easy and just chose a generic colour like ‘red’, ‘blue’, ‘green’, ‘white’ etc.
However, you might want to get a bit more detailed and chose a specific shade of red (for example) and to do that we’re going to need a HEX code. A HEX is really just a special code of six numbers and letters which are unique to a specific shade of a colour on the web.
The hex code for white is #FFFFFF
The hex code for black is #000000
To find the HEX value of the colour you want, we suggest heading over to w3School’s Color Picker.
The Color Picker is easy to use:
1. On the left hand side of a screen, select the hexagon representing the colour that you most want to use in your menu. In the screenshot below, I’ve chosen red.
2. Now have a look at the different shades of that red on the right hand side of the screen. I might decide that i want a slightly lighter shade of red, so I’m going to select the shade next to ’60%’
3. You’ll notice that the HEX code relevant to that colour is shown just to the right of the shade I’ve chosen. Highlight that code and copy it to your clipboard.
Changing the colour of your menu text
1. Now that we’ve decided what colour we want to use, load up Kodi.
2. Start off by clicking on ‘System > Skin Settings’
3. Now click on ‘Setup the Aeon Nox main menu’
4. To the left of the screen, you’ll find all of the menu labels that are currently configured to your main menu. Select the label whose colour you want to change. For the purpose of this tutorial, I’m going to select ‘Movies’ and then chose ‘Edit Labels’
5 To change the colour of the label, we need to use the one of the following pieces of mark-up code:
[COLOR colorname]Menu Label[/COLOR]
[COLOR FFhexvalue]Menu Label[/COLOR]
So, if I’m not using HEX values, I could just enter:
That would give me a Movies label on my menu bar looking like this:
Now things get a little more complicated if we’re going to be using a HEX code, but absolutely nothing to worry about. Before, pasting your HEX code into Kodi (the one that you copied to your clipboard from W3Schools) you’ll need to do one thing:
- Replace the hash symbol (#) with ‘FF’
Therefore, the HEX code we copied above now looks like this: FFff3333
We can now copy that into Kodi using the mark-up code above. As a result, we can enter the following menu label:
Once we click done and come back to our main menu, you should find that the Movies link is now the shade of red that we elected from W3Schools:
Some other ideas
Kodi doesn’t limit you to having just one colour in your menu labels – you can have as many as you want. In fact, you can have a multicolour Movie menu if you’re that way inclined:
Just to give you an idea of how it works, the Mark-Up code for that menu would look like the following:
[COLOR FFff3333]M[/COLOR][COLOR blue]o[/COLOR][COLOR white]v[/COLOR][COLOR yellow]i[/COLOR][COLOR green]e[/COLOR][COLOR purple]s[/COLOR]
Anyway, hope you found that useful – let us know what you thought and whether you had any problems either by writing a comment on the blog below or getting in touch with us on Twitter.
Look forward to hearing from you!