Skinning: Moving Menu Bar & Date, Time
The other day I was asked about how to change the position of the menu bar in Xonfluence. You have the ability to move the menu bar wherever you want using xmls. Mind you this is moving it anywhere on the screen not just using the setting in the UI that will allow you for normal or center or low. Some may want to move the menu bar to the top of Xonfluence and there is an easy way to do so. I know we have focused on Aeon Nox Skin; however, this was a specific request about the Xonfluence skin. Therefore, I am going to tackle this one today and we will take a look at some of the others in the near future.
Xonfluence Menu Bar Change
First off, let's start with the skin that was originally asked about. Xonfluence, this is a Confluence Modded skin and very friendly to use. You are going to need two xml's to make these changes. The menu bar can easily be moved; yet it is not the only thing that needs to be changed. Consequently, if you don't move the date & time labels you are going to have an issue where the text will be unreadable. Due to this we will work on moving not only the menu bar but also the data in the right hand corner.
For this change we will need the home.xml & the includes.xml files which can be found in the Kodi/addons/skin.xonfluence/720p/ folder. Once in this folder you will be able to open both the home.xml and includes.xml files to make the few changes you need to move the menu bar. You will also need to use a notepad editor, I personally like to use Notepad++; however, there are a few free ones available. If you are looking to use Notepad++ and don't have it click here to download and install.
As I mentioned, the first change you make is going to be in the home.xml file. You will want to locate line 1043 to make the change this is the line showing <top>400</top>. <Top> will tell you how far from the top you are going to position the menu bar and just so you know if you choose 0 (zero) you will still have a small gap in the top of the screen. So to make the change to have the menu bar flush with the top of the screen we are going to use -5 (negative five) as shown below:
Once you save this you can reload your skin and you will see where the menu bar now sits. Now that you have moved the menu bar to the top you will notice the date & time are in your way. Don't worry we can easily fix that too.
To make the change to date and time we are going to go into the includes.xml file which is located in the same folder as home.xml. Once you have opened the file scroll down to lines 1218 and 1242. Line 1218 will help you change the position of the Time Label and you want to look for <top> once again to change it. Line 1242 is the line for changing the date label. You can move these up and down using the <top></top> and changing the value in between the <> </>. I have found the sweet spot to be roughly 25 between the numbers to space them correctly. For example if you set time to 675 you would want to set the date to 700 to space it correctly so they don't sit on top of each other.
Once you have completed this and you refresh your skin you should have it looking like the following. As you can see we moved the menu bar to the top and now it is flush with the top of the screen. We also dropped our date and time to the bottom so it does not collide or impose on the menu.
So just to review what we learned today. First, we will need some sort of text editor to make the changes as quickly as possible. Secondly, we are going to need two of the xml files for this in the skin.xonfluence/720p folder. You will need to open the home.xml and includes.xml which consequently are right next to each other. Next make the changes and save the changes, refresh your skin and you should be good to go. Feel free to play around with the positioning to make it work for you. If you have any questions or need more guides please visit us on Ares Forum where we would be happy to assist. It makes it tough to do one on one help in the comment section of the blog but on Ares Forum we have members ready to help.