OK guys, I’m sure you’ve all been having endless fun since the publication of part ten in thie series and now you are ready to do a few more tricks.
The whole Creating your own Kodi Build series can be found HERE
Careful how you go with this stuff as the limitations for what you can do are pretty much endless and I have been warned, “a life of nerdiness awaits”.
So in this blog we will just do a couple more tweaks to the menu bar which should set you on your way, and I will show you how to change the sub-menu bars as well.
Thanks again to Dicko the Geordie, I strongly recommend you look this guy up and take a peek at some of his tutorials.
One of the things I have been interested in for a while is how to add images to the main menu bar and having worked through the previous blog in the Create you Own Kodi build series, it all became a bit clearer how I could do it.
All it took was a bit more messing around with PhotoFiltre and the Textures.xbt file.
Here’s how I did it.
First find yourself whatever images you would like to add to the menu bar. If possible make sure they are good quality and .png images although others also work fine. Place these images somewhere that you can access them easily.
Without too much repetition from my previous blog we will start off with our newly coloured menu bar file open in PhotoFiltre.
Now, using the Layer menu, open up the images you want to add to the menu bar. I have chose just two, so I will have two additional layers.
You may have to play around a bit with the sizes of the images to get them to fit onto the bar. If you right click on the image when it is open you can change its size using the “manual settings”
It doesn’t matter if it overlaps the menu bar, but just make sure it doesn’t cover any other images or features on your screen.
I will use the images on both ends of my menu bar so once I have them at the size required I can simply use the feature in PhotoFiltre to “duplicate” – now I have four additional layers.
S0, one by one now, we can chose each layer and position the image where we want. Again, to get it more exact, use the manual setting.
Once this is done, one at a time again, right click on them and choose to merge the images till now you are back to one single image of the bar just how you want it.
That’s it for the menu bar images, as you can see, what you want to do with it is entirely up to you. Don’t forget to save your changes.
All that needs to be done now is to use the Kodi Texture Tool to “pack up” the images and then replace the existing Textures.xbt file with our new one, just as we did in the previous blog.
However, I’m not going to do that yet as I’m going to make a couple more changes while I’m here.
Still in PhotoFiltre lets open up the texture file for the submenu_bar, it looks like this.
This file is used for both the top and bottom submenu bars and some clever xml coding flips the image over for each. That means if we want to use the same colour above and below the main menu bar, we only need to change this one file.
So lets go ahead and change it. Again you can do what you want with it, I’m just going to change the colour of mine to black.
You will notice there is also a texture file called submenu_end. This is the angled end part of the bar that you can see in Kodi. You will need to change this also to match the changes to the submenu bar if you want it all to look the same.
I am not going to change it as I am going to change the xml files to make the submenu bar extend across the entire screen. Which we will do once this is done.
Ok, with the colour changed, I can now save the file.
Using the Kodi Texture Tool, I now “pack up” the images and then replace my Textures.xbt file.
Open kodi and it should look like this. You will notice the ends of the submenu bars don’t match as I have not changed them.
All good, but now we need to do something about those ends of the submenu bar and this is done by making a change within our “Home.xml” file.
This time to make the changes I am using “Notepad++” on my PC.
The first thing we need to do is to delete the section of the xml file that utilises the submenu_end texture file on the top submenu bar and this is shown below.
Repeat this for the bottom submenu bar.
Kodi will now look like this, with the submenu bar ends now not shown.
All we need to do now is to stretch out the top and bottom submenu bars so they cover the screen and that is another change in the home.xml file.
We need to replace the pixel position 1780 with a size of 1920 for the top bar and the same for the bottom, as well as the left pixel position of 140 with 0.This will stretch out the bars.
Also at the beginning of each section you can change the animation effect position from 1870 to 1920 (full screen) also . This can vary depending on what screen size your are using.
Below you can see I have made the changes for the tp submenu bar.
And the bottom submenu bar
Now when we open up Kodi all is good.
I hope this opens up some new horizons for you and shows you just some of the things that are possible for you to change.
If you put together all of the things from the Create you Own Kodi build series you should now be able to assemble some pretty cool stuff.
This just about concludes the series, I hope you have enjoyed reading it as much as I have enjoyed creatuing it for you.
If you have any questions or requests for other build related items to cover, please let me know via twitter @Grendel1905
In the meantime
Please share this Article by clicking on any of the below icons: