Add an Image to the Menu Bar Kodi

Good Evening Guys Ezz takes a look how to Add an Image to the Menu Bar Kodi, what better time to get into Kodi skinning. The weather has turned cold so its time for a nice hot brew put you feet up and have a go at this.

Add an Image to the Menu Bar Kodi

Hello BFKers

Long time no Write for me but ime happy to say ime back on the “BFK Train”.

On this Blog ime going to show you how to add a Image to your menu bar to make it look more attractive to the eye.

I might of touched on this in the “Back to Basics” section.

But to day i will show you how to implement the procedure from start to finish……

Ok Guys and Dolls lets go.

All of the bellow will be implemented from the following.

Windows 10

Notepad++ HERE

Kodi 16.1 HERE

Kodi Texture Tool HERE

OK lets get going here is what i have from the start (incidentally this is my Build that i will be doing this blog from)If you would like to install my Build you can get it from the Community Build Section of Wookie. Ezzermans Buils.

To install the Wookie Look HERE

This is what i have.

And we should end up something like this at the end.

Bare in mind its what the eye sees that makes this procedure stand out i have made the images FIT in the menu bar.

You can make them any size and put them more or less where you want them.

This is the image we are going to enter in the Menu Bar(Take note its a .PNG File).

To get this into the menu bar we need to incorporate it into the Texture.xbt file. (DONT RUN AWAY ITS NOT THAT HARD).

Every Kodi build has 1 “We are just going to MAKE OUR OWN”.

Make a new folder and put your image that you want to add to your Menu Bar in there.

TIP : GIVE THE FOLDER A ONE WORD NAME.

My folder is called existingbuild.

This is my Folder,Take no notice of the other Images that you can see as they are other parts of my Build.

Ok now we have our Image in the folder we need to make a Texture.xbt File.

This is my existing .xbt file. This is just to show you the size and how it increases with the extra image we are going to add.

You will notice the size of my file is 5.44MB. And you will notice that my .xbt file is called EZ.xbt.

Thats ok cause i will show you how to change yours to what ever you want to.

Open Kodi Texture App (Link Above).

We will get this.

Now we want the “Compile Mode Section” and CLICK select input folder.

The Input folder is were you have placed your Image

So Navigate to that folder.

Now we need to Click “Select Folder”

We now goto “Select Output Folder”

And we Navigate to Exactly the SAME folder.

You get a chance to name the File name herel ,Leave it as it is or rename it.

I named mine EZ.

This Time if you are doing this from SCRATCH you will see nothing in the Folder you just have to click on “SAVE”

As i already have a .xbt file in there this is why it is showing in the File Location.

And for those that do i just wanted to show you the File size increase.

Then once we have done That we now click on “START”.

You should see something resembling this.

You dont Literally have to go for a coffee but you can if you wish lol.

Once the Notifications have closed then you can close the Texture app down.

As you can see below my file size as jumped to 5.48mb as appose to 5.44mb. So we now know that we have included are Image in our .xbt file.

So what do we do now?….

Well we want to go into our folder we created on our Desktop and copy the .xbt file.

Once you have copied the file we need to Navigate to c:/usser/ussername/appdata/roaming/kodi/addons/(BUILD)/media. and then Paste.

If you already have an existing file in that folder with the same name you will see this.

Click Replace the file in the destination tab.

Ok where nearly good to go folks lol.

If you can remember the Name of the Image you wish to enter for your Menu Bar then thats all well and good,….But if your anything like me then i need to copy the file name so i get it EXACTLY CORRECT.

So once you know your Image file name we then need to navigate to the folder that will implement the changes and that file is.

c:/usser/ussername/appdata/roaming/kodi/addons/(BUILD)/1080i.

Then if we scroll down till we find the Home.xml file.

And then “RIGHT” Click and the Edit with Notepad++ (Link is at the top of the Page for Notepad++).

You will be presented with something like this.

On my build this is at the bottom.

You need to look for the lines “side_fade.png.

These are the lines that are going to add your Image.png to the Menu Bar.

Once you have Located the relevant lines then we can proceed in changing them.

As you can see LOGO-MEDIUM.png is the EXACT file name of my Image.

Put your file name in between the >………<

Once you think its correct got the top left of Notepadd++ and click on “FILE” and then “SAVE”

REMEMBER ANYTHING YOU CHANGE IN NOTEPAD++ NEEDS TO BE SAVED FOR THE CHANGES TO TAKE AFFECTED

FOR THE CHANGES TO WORK IN KODI ,KODI ALSO NEED TO BE RESTARTED EITHER THROUGH TASK MANAGER OF ANY OTHER MEANS YOU DO THIS PROCESS.

So once the file has been saved in Notepad++ and Kodi has been rebooted we should have something like this.

Hmmmmmmmmmmmm i hear you ask your selves,.. my Right hand Image is Back-to-Front.

As my Dutch friend would say “Its Not a Matter”lol

Lets go back into Notepad++.

There are two strings to these Images the top string is the LEFT Image and the one below is the Right Image.

Where i have highlighted below ,we need to take out the word “true” so you end up with this line

I have taken out the word true.

AGAIN GOTO FILE AND THEN SAVE.

REBOOT KODI.

And it should have changed.

A-AH,… there we go.

So now its just a matter of putting the Images where we wont them and what size we want them.

If we concentrate on the Left image first we will get 3/4 of the correct sizes for the Right hand side Image.

So yes its back off to Notepad++

All the changes will be made in the same 2 strings as above.

Dont forget the top String is Left and the one under that is Right.

Below is the Left hand side Logo String and its kind of self explanatory.

Left/Top/Width/Height all we need to do is change the “Values” in the ><.

What could be more simpler?.

Its all trial and error at this point as every build is different so the number value will change to accommodate each build.And where you want to position your Logo.

These were the 3 changes i made to my .xml file.

And it got me to this point.

So them 3 changes will be EXACTLY the same for the RIGHT HAND SIDE Image the only other change you need to make is in the <left></left> TAG.

As you can see below i changed mine to <left>1290</left>

So the end result should be something like this?….

Thats it you can now add images to your menu bar.

Just One thing before i go as an ADDED BONUS.

The Greyish/Dark reflection you can see under the Menu Bar.

I hate it lol

If you need to OR want to get shut then again its an easy fix.

Back to Notepad++ we go.

And under the 2 Strings we have changed to get are Images in place you “Should” See this String,

gradient_floor.png.

Take it out so the line looks like this.

<texture border=”1″></texture>.

That will take away that horrid grey streak lol.

Now you have your own Images in you very own Custom built Menu Bar.