Add an Image to the Menu Bar Kodi

KODI SKINNING HELP TUTORIALS

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.

Add an Image to the Menu Bar Kodi

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

37-min

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).

3-min

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.

5-min

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.

6-min

Open Kodi Texture App (Link Above).

7-min

We will get this.

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

8-min

The Input folder is were you have placed your Image

So Navigate to that folder.

9-min

Now we need to Click “Select Folder”

10-min

We now goto “Select Output Folder”

11-min

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.

12-min

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”.

13-min

You should see something resembling this.

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

14-min

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.

15-min

So what do we do now?….

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

16-min

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

17-min

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.

18-min

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.

19-min

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.

20-min

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++).

21-min

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.

22-min

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 >………<

23-min

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

 

24-min

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.

25-min

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

<texture flipx=”” border=”1″>LOGO NAME</texture>

I have taken out the word true.

26-min

AGAIN GOTO FILE AND THEN SAVE.

REBOOT KODI.

And it should have changed.

A-AH,… there we go.

28-min

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?.

29-min

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.

31-min

And it got me to this point.

30-min

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>

32-min

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

33-min

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.

34-min

Take it out so the line looks like this.

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

That will take away that horrid grey streak lol.

Add an Image to the Menu Bar Kodi

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

Add an Image to the Menu Bar Kodi

Add an Image to the Menu Bar Kodi

Until next Time

So there you have it PeePs.

If you need any further advise or have any quires about anything to do with the skinning side if kodi IF i can help then Follow me on Twitter @ EzZeRmAn

Need to see any more blogs on Building your own Build then go to

https://bestforkodi.com/category/kodi-skinning-help/

https://bestforkodi.com/category/back-2-basics-how-to-guides/

If you dont follow Best For Kodi already on Twitter you can do HERE

If you have anything that you want to see Blogged on the BFK Site then just send me a message on Twiller and will always try to accommodate.

Till next time Be Good

 

 

 

EBOX AIR MINI SMART PROJECTOR

 

 

 

 

 

 

 

More Stories
Exclusive: Smell Food Kodi – Smell the Food through your TV – Coming Soon
error: Alert: Content is protected !!