Today’s Skinning help Tutorial is editing Sub Menu Bar in Kodi, Ezz looks at how you can change the look of the sub menu bar to improve the look of your build. These Tutorial’s are great to give your build a professional look and feel.
Sub Menu Bar in Kodi
Hello all, I am back this time to add your own Sub Menu bar.
This is a follow on of my First off 2 blogs Part 1 and Part 2 of Menu Bar in Kodi.
If you have not seen them then you can get Part 1 HERE and Part 2 HERE.
They will explain everything you will need, to carry out the process for you to be able to give yourself a new look Kodi Build.
So for those of you who have followed up to now you will know what is required in the tool department.
Just a little recap to see where were at.
This is were we left off last time.
As you can see we have the Menu Bar more or less where we want it.
Don’t forget you can always do the Finer tweaks at the end.
So for the Sub Menu Bar.
This is what i will be using as my new Bar.
So IF you have done what i have done and created your .xbt file in the same folder as all the png files you want to use then there is no need to create another so all we have to do is….
Open our Home.xml file in NotePad++
You should know the root as that is in my Part 1 blog.
So for the Sub Menu bar these are the numbered lines we require.
You will notice that there is an end.png and a bar.png. thats because there are 2 parts to the whole Sub Menu Bar
For the majority of the Sub Menu bar we need to change the submenu_bar.png to your new .png file.
Mine is called submenu1.png.
And i am going to change the values to…
<left>170</left>
<width>1580</width>
<height>120</height>
DON’T FORGET save the file in Notepad++ and if you have Kodi Open THEN Task Manager and End the Kodi Task.
When you re-open kodi it will look something like this.
Also a LITTLE TIP.
You can add your own tag to the string and what i mean by that is this.
you will notice i have added <top>30</top>
And this is what that “tag” will do.
Can you see the SPACE between the Menu Bar and the Sub Menu Bar now?
So there is another value you can have a play with.
As i have said before this is all TRIAL and ERROR and REMEMBER always SAVE then END TASK.
OK to the submenu_end.png.
Theres 2 ways you can deal with this.
1. You can Take the .png out of the tag all together like so. Line 177 ><
That will give you this.
No end.png at all
2. You can replace it with another .png like so
So now the completed .xml for the Sub Menu looks like this.
If you want to go 1 step further you can duplicate part of the code by copy/paste to look like this. it starts from <control> and ends at </control>
You should have something like this in Notepad++.
And the only tag i changed in that was <left>
And with a bit of luck and a lot of TRIAL and ERROR you should have something like this.
Until next Time
OK there you have it thats the Sub Menu Bar sorted out with a few extras.
Hope you enjoyed this and i hope its working for you.
Till next time with the Sub Menu Highlight Bar.
Hope you have found this helpful and easy to follow till next time.
Anyway guys will catch up with all of you soon.
If you don’t follow us on Twitter you can do so by clicking HERE.
If you get stuck on any of the Skinning Blogs in this section of the website drop a tweet to either Damo Here or Ezzerman Here and i am sure we will help you if they are not busy.
Why not Bookmark our page and check in with us on daily basis to see what’s new. We appreciate every one of you that follow us or read our articles. The feedback has been amazing. So, thank you. We really appreciate it.
Ezz
