Manual Install
This installation method will teach you some of the easy basics of how to edit skin files, you can combine many mods with the knowledge found her and after some time create your own. This install method allows you to add to the files rather then simply replace them, as well as show you where each of the elements is so you can further customize them as you see fit.
First step: Backup
Locate your skin.aeonmq6 in addons, All of the files we will work with are in the 720p folder
Code:
addons/skin.aeonmq6/720p/
***Different OS's, store this info in different places,
Operative system File path
Android Android/data/org.xbmc.kodi/files/.kodi/addons/skin.aeonmq6/ (see note)
iOS /private/var/mobile/Library/Preferences/Kodi/addons/skin.aeonmq6/
Linux ~/.kodi/addons/skin.aeonmq6/
Mac /Users/<your_user_name>/Library/Application Support/Kodi/addons/skin.aeonmq6/
OpenELEC /storage/.kodi/addons/skin.aeonmq6/
Windows Start - type "%APPDATA%\kodi\addons\skin.aeonmq6\" - press <Enter>
Locate and backup the following files (copy them to desktop or other safe location, or append .backup to the end of each filename)
Code:
DialogFullScreenInfo.xml DialogSeekBar.xml VideoOSD.xml IncludesTopMenu.xml IncludesVariables.xml
Each file has a distinct purpose.
DialogFullScreenInfo.xml Configures the widgets of the OSD Info screen, it comes up when you select to view info during playback
DialogSeekBar.xml Configures the widgets on the pause menu, The pause menu replicates the full screen info screen and comes up after being paused for a few seconds
VideoOSD.xml This is file that actually controls the OSD when the controls are on screen, this section only has the logo, not the FullScreeenIcon
IncludesVariables.xml This file holds all the variables for the skin, it allows new variables to be defined and makes skinning very versatile
IncudesTopMenu.xml This file configures all of the different parts of the top menu for all views
Step Two: Add TopArt
Files to be edited: DialogFullScreenInfo.xml DialogSeekBar.xml VideoOSD.xml
First we will replace the title with a selectable graphic that I will call TopArt. The title sits above the tagline and is a part of all three sections of the OSD. You can turn this on and off with the button on the top menu of any view called "Logo as Title (on Top if available)" and select which graphic is used with the OSD TopArt button we will create later.
[spoiler='Find and Replace']: (about 20 lines down, except VideoOSD.xml where its about 64 lines down)
Code:
<control type="label"><!-- Title -->
<left>30</left>
<top>8</top>
<width>1070</width>
<height>40</height>
<font>Font_40</font>
<label>$VAR[value_videoosdtitle]</label>
<textcolor>FFFFFAF0</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
</control>
<control type="label">
<left>30</left>
<top>55</top>
<width>1050</width>
<height>25</height>
<font>Font_18A</font>
<label>$VAR[value_videoosdtag]</label>
<textcolor>90FFFFFF</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
</control>
Replace the above section with the following:
Code:
<control type="grouplist"> <!--TopArt swap group -->
<left>30</left>
<top>8</top>
<orientation>vertical</orientation>
<itemgap>.5</itemgap>
<visible>IsEmpty(Window(2003).Property(AudioLanguage.1))</visible>
<control type="image"><!-- TopLogo e Clearart -->
<left>0</left>
<top>0</top>
<width>400</width>
<height>95</height>
<aspectratio aligny="center" align="left">keep</aspectratio>
<texture background="true">$VAR[value_topart]</texture>
<visible>Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))</visible>
</control>
<control type="label"><!-- Title If No logo -->
<left>0</left>
<top>0</top>
<width>1070</width>
<height>40</height>
<font>Font_40</font>
<label>$VAR[value_videoosdtitle]</label>
<textcolor>FFFFFAF0</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
<visible>![Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))]</visible>
</control>
<control type="group">
<control type="label"><!-- Tagline -->
<left>0</left>
<top>0</top>
<width>1050</width>
<height>25</height>
<font>Font_18A</font>
<label>$VAR[value_videoosdtag]</label>
<textcolor>90FFFFFF</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
<visible>Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))</visible>
</control>
<control type="label"> <!-- tagline no Logo -->
<left>0</left>
<top>0</top>
<width>1050</width>
<height>25</height>
<font>Font_18A</font>
<label>$VAR[value_videoosdtag]</label>
<textcolor>90FFFFFF</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
<visible>![Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))]</visible>
</control>
</control>
</control>
Once complete you will have a graphic in place of the title. If there are is no logo then it falls back to the regular title.
*P.S. In the file VideoOSD.xml there is an additional </control> that you will need to make sure not to replace. (or if you finish and you don't on screen controls then go back and add at the end of what you added here.)
[/spoiler]
Step Three: Set up the code the FullscreenIcon
Files to be edited: DialogFullScreenInfo.xml DialogSeekBar.xml
We will make the FullScreenIcon on Info and Pause screens changeable. The FullscreenIcon can be between Diskart, Banner, Clearart, Logo and Characterart with the FullscreenIcon button we will add later.
Find this section below in both files:
Code:
<control type="image"><!-- Logo e Clearart -->
<left>1080</left>
<top>73</top>
<width>180</width>
<height>340</height>
<aspectratio aligny="bottom">keep</aspectratio>
<texture background="true">$VAR[value_art]</texture>
</control>
and Replace it with this:
Code:
<control type="image"><!-- Logo e Clearart -->
<left>865</left>
<top>73</top>
<width>350</width>
<height>340</height>
<aspectratio aligny="bottom">keep</aspectratio>
<texture background="true">$VAR[value_art_full]</texture>
</control>
For a perfect look, when editing DialogFullScreenInfo.xml add 35 to the <top> Value (makeing it <top>108</top>), for some reason it is different in each, but its not very visible)
P.S.You can any of these bigger or smaller the <width> and <height> lines and position with <left>(the pixels from left) and <top>(pixels from top) lines but if you edit this it changes for all types of art in that place and if you go to large the diskart or fanart can go over other thing pretty quick, these values are about as big as you can go without overlapping somewhere)
Step Four: Add the Variables
Files to be edited: IncludesVariables
First we will add two new variables, one that includes the options for the TopArt and the other for FullscreenIcon. We also add two more variables that has the human readable button options for the upcoming buttons.
If you search and find this following section in "IncludesVariables.xml" you can add in the new variable sections directly after this:
Code:
<variable name="value_art">
<value condition="!VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearlogo)]</value>
<value condition="!VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearart)]</value>
<value condition="VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearart)]</value>
</variable>
The first two variables:
Code:
<variable name="value_art_full">
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + !VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + !VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),discart) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(discart))">$INFO[Player.Art(discart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),discart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.discart))">$INFO[Player.Art(tvshow.discart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),banner) + !VideoPlayer.Content(banner) + !IsEmpty(Player.Art(banner))">$INFO[Player.Art(banner)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),banner) + !VideoPlayer.Content(banner) + !IsEmpty(Player.Art(tvshow.banner))">$INFO[Player.Art(tvshow.banner)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),fanart) + !VideoPlayer.Content(fanart) + !IsEmpty(Player.Art(fanart))">$INFO[Player.Art(fanart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),fanart) + VideoPlayer.Content(fanart) + !IsEmpty(Player.Art(tvshow.fanart))">$INFO[Player.Art(tvshow.fanart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),characterart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.characterart))">$INFO[Player.Art(tvshow.characterart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),characterart) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.characterart))">$INFO[Player.Art(tvshow.clearlogo)]</value>
</variable>
<variable name="value_topart">
<value condition="StringCompare(skin.string(fullscreen_icon_seek),logo) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),logo) + !VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),logo) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),logo) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),clearart) + !VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),clearart) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),clearart) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),clearart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),banner) + !VideoPlayer.Content(banner) + !IsEmpty(Player.Art(banner))">$INFO[Player.Art(banner)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),banner) + VideoPlayer.Content(banner) + !IsEmpty(Player.Art(tvshow.banner))">$INFO[Player.Art(tvshow.banner)]</value>
</variable>
be aware that there are 2 variables here
The Button Values (added directly after)
Code:
<variable name="PLPlusIconLabelFullVar">
<value condition="StringCompare(skin.string(fullscreen_icon),logo)">Logo</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart)">Clearart</value>
<value condition="StringCompare(skin.string(fullscreen_icon),fanart)">Extrathumbs</value>
<value condition="StringCompare(skin.string(fullscreen_icon),banner)">Banner</value>
<value condition="StringCompare(skin.string(fullscreen_icon),discart)">Discart</value>
<value condition="StringCompare(skin.string(fullscreen_icon),characterart)">Characterart</value>
<value condition="StringCompare(skin.string(fullscreen_icon),noicon)">NoIcon</value>
</variable>
<variable name="PLPlusIconLabelFullSeek">
<value condition="StringCompare(skin.string(fullscreen_icon_seek),logo)">Logo</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),clearart)">Clearart</value>
<value condition="StringCompare(skin.string(fullscreen_icon_seek),banner)">Banner</value>
</variable>
Be aware there are 2 variables here
After these variables have been added you can save and move on
Step Five: Add the TopMenu Button
Files to be edited: IncludesTopMenu.xml
The final step adds the two button to allow the user to select graphics used for the TopArt and FullscreenIcon from the top menu screen in any view or globally.
IncludesTopMenu.xml contains every option of the topmenu in every view section of Kodi.
We can add the buttons anywhere throughout the top menu. We can add it to any of the four main sections, or have it appear only in certain views, but I believe its best added Globally with any video view. If you agree then you can add the following code anywhere under Video, then in the Global section. This section starts at line 1111 and you can choose where you want it in that list.
As a safe place I advise to add them below "Logo as Title (on Top if available)" at Line 1249.
Code:
<control type="button" id="92148">
<include>TopMenuButton</include>
<label>OSD Top Art</label>
<label2>$VAR[PLPlusIconLabelFullSeek]</label2>
<onclick condition="StringCompare(skin.string(fullscreen_icon_seek),banner) | IsEmpty(skin.string(fullscreen_icon_seek))">Skin.SetString(fullscreen_icon_seek,logo)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon_seek),logo)">Skin.SetString(fullscreen_icon_seek,clearart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon_seek),clearart)">Skin.SetString(fullscreen_icon_seek,banner)</onclick>
</control>
<control type="button" id="92149">
<include>TopMenuButton</include>
<label>FullScreen Icon</label>
<label2>$VAR[PLPlusIconLabelFullVar]</label2>
<onclick condition="StringCompare(skin.string(fullscreen_icon),noicon) | IsEmpty(skin.string(fullscreen_icon))">Skin.SetString(fullscreen_icon,logo)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),logo)">Skin.SetString(fullscreen_icon,discart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),discart)">Skin.SetString(fullscreen_icon,banner)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),banner)">Skin.SetString(fullscreen_icon,fanart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),fanart)">Skin.SetString(fullscreen_icon,clearart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),clearart)">Skin.SetString(fullscreen_icon,characterart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),characterart)">Skin.SetString(fullscreen_icon,noicon)</onclick>
</control>
Make sure not to put this in the middle of any other buttons
This was the final step, your done!
watch gallery
YOU NOW HAVE A FULLY WORKING FANCY OSD