Kodi Community Forum
Adding image/icon to text home item? - Printable Version

Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Development (https://forum.kodi.tv/forumdisplay.php?fid=32)
+--- Forum: Skinning (https://forum.kodi.tv/forumdisplay.php?fid=12)
--- Thread: Adding image/icon to text home item? (/showthread.php?tid=158669)

Pages: 1 2


Adding image/icon to text home item? - Piers - 2013-03-08

I'm working on a skin which is based on Confluence, I've done a lot of the work however I can't seem to quite work out how to add an icon to home items, for example 'TV Shows' - I would like to add an icon located in media/icons/tv-shows.png/ next to it.

Here is the current code:

Code:
<item id="11">
            <label>20343</label>
            <onclick condition="IsEmpty(Skin.String(TVTarget))">ActivateWindow(Videos,TVShowTitles,return)</onclick>
            <onclick condition="!IsEmpty(Skin.String(TVTarget))">ActivateWindow(Videos,$INFO[Skin.String(TVTarget)],return)</onclick>
            <icon>special://skin/backgrounds/tvshows.jpg</icon>
            <thumb>$INFO[Skin.String(HomeTVBG)]</thumb>
            <visible>!Skin.HasSetting(HomeMenuNoTVShowsButton) + Library.HasContent(TVShows)</visible>
            </item>



RE: Adding image/icon to text home item? - MassIV - 2013-03-08

If you want to use a static image that is inside the skin's media folder you don't need special://
(Note: you use both .png in your explanation and jpg in your example. And with different paths)
Code:
<icon>icons/tv-shows.png</icon>

If it is outside the media folder you can use the following.
In this example the backgrounds folder is a folder next to the media and 720p folder ect (at the same level).
Code:
<icon>special://skin/backgrounds/tvshows.jpg</icon>

If you need a different image onfocus you need to set something like this in your item.
Code:
<icon>icons/tv-shows.png</icon>
<property name="focused">icons/tv-showsFO.png</property>

And call it like so in your focused layout
Code:
<texture>$INFO[ListItem.Property(focused)]</texture>



RE: Adding image/icon to text home item? - Hitcher - 2013-03-08

I'm guessing this is because you've used up icon and thumb labels.

Add -

Code:
<property name="HomeIcon">media/icons/tv-shows.png</property>

Then use -

Code:
<texture>$INFO[Window(home).Property(HomeIcon)]</texture>



RE: Adding image/icon to text home item? - phil65 - 2013-03-08

(2013-03-08, 18:32)Hitcher Wrote: Then use -

Code:
<texture>$INFO[Window(home).Property(HomeIcon)]</texture>

Code:
<texture>$INFO[Container(xxx).ListItem.Property(HomeIcon)]</texture>
to be exact Wink

Using .ActualIcon would also work.


RE: Adding image/icon to text home item? - Piers - 2013-03-08

I've tried all the above methods but none appear to work. I've posted an image below to explain what I'm trying to do, thank you btw for the help Smile

Image


RE: Adding image/icon to text home item? - phil65 - 2013-03-08

you´re not using a grouplist inside another list, right?


RE: Adding image/icon to text home item? - Piers - 2013-03-08

Sorry I'm quite new to this so I'm not entirely sure, I've now replaced all the XML files with the default ones from the latest version of Confluence and decided to get this part working first then re-add in other mods and additions. So it's more or less a virgin Confluence skin. Again sorry to ask but is there a particular place I should put:

Code:
<property name="HomeIcon">media/icons/tv-shows.png</property>

Thank you again. Ideally I would like 2 icons, one as standard per menu item and then a focused version, just not entirely sure where to put the code. I'm happy with PHP, HTML and CSS but XML and XBMC confuses me Tongue


RE: Adding image/icon to text home item? - MassIV - 2013-03-08

Changes to original Confluence fixedlist id="9000"
http://pastebin.com/SjeRzbj0

Just change the images you want to use in:
Code:
<item id="10">
    <label>20342</label>
    <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
    <icon>settings/video.png</icon>
    <property name="focused">settings/videoFO.png</property>
    <visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>
</item>

So if your images are in a folder called icons:
Code:
<item id="10">
    <label>20342</label>
    <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
    <icon>icons/tv-shows.png</icon>
    <property name="focused">icons/SECOND_IMAGE.png</property>
    <visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>
</item>

Image


Note that the Items, like the examples above just determine what the content is or could be.
And that image and label controls in the layout determine what actually gets loaded and how it looks.

Code:
<control type="image">
    <posx>5</posx>
    <posy>5</posy>
    <width>50</width>
    <height>50</height>
    <fadetime>400</fadetime>
    <aspectratio>stretch</aspectratio>
    <texture>$INFO[ListItem.Property(focused)]</texture>
    <colordiffuse>FFFFFFFF</colordiffuse>
</control>



RE: Adding image/icon to text home item? - Piers - 2013-03-08

(2013-03-08, 19:46)MassIV Wrote: Changes to original Confluence fixedlist id="9000"
http://pastebin.com/SjeRzbj0

Just change the images you want to use in:
Code:
<item id="10">
    <label>20342</label>
    <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
    <icon>settings/video.png</icon>
    <property name="focused">settings/videoFO.png</property>
    <visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>
</item>

So if your images are in a folder called icons:
Code:
<item id="10">
    <label>20342</label>
    <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
    <icon>icons/tv-shows.png</icon>
    <property name="focused">icons/SECOND_IMAGE.png</property>
    <visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>
</item>

Image

THANK YOU!


RE: Adding image/icon to text home item? - Piers - 2013-03-08

Sorry to ask another question, but I'm now trying to set the offset or pos of the icon used so there's not such a large gap between the icon and text. It wouldn't be that bad with the default but I've changed all the fonts, sizes etc so there's are massive gap between the edge of the icon and the text.

Here's the tvshows section:

Code:
                    <item id="10">
                        <label>20342</label>
                        <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
                        <icon>icons/tv-shows.png</icon>
                        <property name="focused">icons/tv-showsFO.png</property>
                        <visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>
                    </item>



RE: Adding image/icon to text home item? - MassIV - 2013-03-08

Note that the Items, like the examples above just determine what the content is or could be.
And that image and label controls in the layout determine what actually gets loaded and how it looks.

Code:
<control type="image">
    <posx>5</posx>
    <posy>5</posy>
    <width>50</width>
    <height>50</height>
    <fadetime>400</fadetime>
    <aspectratio>stretch</aspectratio>
    <texture>$INFO[ListItem.Property(focused)]</texture>
    <colordiffuse>FFFFFFFF</colordiffuse>
</control>

So in that list that i changed, i also added 2 of these to actually load the images we assigned. One in itemlayout and one in focusedlayout.
Line 846 and 896. Here you can change the <posx> and <posy>


RE: Adding image/icon to text home item? - Piers - 2013-03-08

Cheers, added that into there and will try and make it work, again thank you for the help - getting there slowly with your help! I've read all the documentation and tried using the foundation skin (on Eden) but found that Confluence has the right base I need. At the moment I can't seem to make that code work but I will try and have a play.

Oh and added two rep points Smile


RE: Adding image/icon to text home item? - MassIV - 2013-03-08

You did not need to add that code. It was already in the pastebin link in my second post.
Because without it your image would not show up.
You just need to find that code and change the <posx>


Go look in this link again http://pastebin.com/SjeRzbj0
At line 42 and 92
Those are the positions you should change.


RE: Adding image/icon to text home item? - Piers - 2013-03-08

Ah yep, thank you again, really appreciate it. Another rep point Smile


RE: Adding image/icon to text home item? - Piers - 2013-03-09

Would there be anyway of achieving this when the thumb and icon part are already used, for example to add custom backgrounds I'm using part of Confluence Modified as a base, this uses the following:

Code:
                        <icon>special://skin/backgrounds/weather.jpg</icon>
<thumb>$INFO[Skin.String(HomeWeatherBG)]</thumb>

and here is the full extract from the weather area

Code:
                    <item id="7">
                        <label>8</label>
                        <onclick>ActivateWindow(Weather)</onclick>
                        <icon>special://skin/backgrounds/weather.jpg</icon>
                        <thumb>$INFO[Skin.String(HomeWeatherBG)]</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
                        <visible>!Skin.HasSetting(CondWeatherFanart) | [Skin.HasSetting(CondWeatherFanart) + IsEmpty(Skin.String(WeatherFanartDir))]</visible>
                    </item>

I've added:

[code] to handle the placing of the icons and it works but it only displays the background images, I assume this is because you can't have two <icon> for one item?

Update 2: So I've managed to get the focused icon to work using <property name="focused">icons/videosFO.png</property>, will see about getting it to work when not focused.


This forum uses Lukasz Tkacz MyBB addons.