Adding image/icon to text home item?
#1
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>
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#2
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>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#3
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>
Reply
#4
(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.
Donate: https://kodi.tv/contribute/donate (foundation), 146Gr48FqHM7TPB9q33HHv6uWpgQqdz1yk (BTC personal)
Estuary: Kodis new default skin - ExtendedInfo Script - KodiDevKit
Reply
#5
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
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#6
you´re not using a grouplist inside another list, right?
Donate: https://kodi.tv/contribute/donate (foundation), 146Gr48FqHM7TPB9q33HHv6uWpgQqdz1yk (BTC personal)
Estuary: Kodis new default skin - ExtendedInfo Script - KodiDevKit
Reply
#7
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
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#8
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>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#9
(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!
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#10
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>
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#11
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>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#12
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
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#13
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.
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#14
Ah yep, thank you again, really appreciate it. Another rep point Smile
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
#15
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.
Please read the online manual (wiki) & FAQ (wiki) before posting.

Skins: Estuary | Xperience1080
Opinion: Never purchase HTC products
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
Adding image/icon to text home item?00