[Piers]

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>

[MassIV]

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>

[Hitcher]

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>

[phil65]

Then use -

Code:

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

Code:

<texture>$INFO[Container(xxx).ListItem.Property(HomeIcon)]</texture>

to be exact

Using .ActualIcon would also work.

[Piers]

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

[phil65]

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

[Piers]

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

[MassIV]

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>

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>

[Piers]

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>

THANK YOU!

[Piers]

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>

[MassIV]

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>

[Piers]

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

[MassIV]

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.

[Piers]

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

[Piers]

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.