Kodi Community Forum

Hello,

I am attempting to create my own Kodi skin, using Estuary as a base. I am very new to skinning on Kodi, so I have referenced all I could find for learning the GUI library; Kodi wiki, documentation, sticky posts on this forum, etc. Unfortunately, I'm not making much headway on my project.

Currently, I am trying to have different colored buttons for the home screen. The mockup below shows what I am trying to achieve. After some random prodding, I did manage to add a background color to the list items by adding a texture call to the image control on line 907:



However, this is added to each button on the list, and not individual buttons. I have tried adding texture calls to the individual items listed between lines 932-1042, but they do not appear. I've also tried editing the control group on line 861, but was only able to change the focus background color used for all buttons. I also wasn't able to add an unfocused texture to this group.

I've run out of things to try; I hope someone here can point me in the right direction. Thanks in advance.

@FOFTech

You may not have read all our forum rules, but we are not allowing names of commercial companies as a username.
So, kindly have your username changed to a better suited one, which can be done here: https://forum.kodi.tv/showthread.php?tid...&page=last
Thanks in advance.

Alright, took care of the name.  Anyone care to assist with the original issue please?

you can add an image control to both the itemlayout and focuslayout

xml:
<control type="image">

    <left>0</left>

    <top>0</top>

    <width>462</width>

    <height>95</height>

    <texture>lists/focus.png</texture>

    <colordiffuse>$INFO[ListItem.Property(color)]</colordiffuse>

</control>

then add a color property to each item in the content section.

for example, this will color the Music button green:

xml:
<item>

    <label>$LOCALIZE[2]</label>

    <onclick>ActivateWindow(Music,root,return)</onclick>

    <property name="menu_id">$NUMBER[7000]</property>

    <thumb>icons/sidemenu/music.png</thumb>

    <property name="id">music</property>

    <property name="color">green</property>

    <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>

</item>

Thank you for that ronie. I will try what you've suggested.

Holliday has kept me busy, but I did find the time to add the above code.

I now have the buttons showing individual colors on focus, however the other unfocused buttons show the same focused color. You can see the results here: Imgur Link

I tried toying with the image control on the itemlayout to see if I could change that, but no dice.

To reiterate, I am trying to have each button show a unique color at all times on the menu. With the above edits, there are still no colors until one menu item is focused. I'm thinking I may have to create textures for the individual buttons, then use the earlier image controls to add a simple glow effect on focus to get the desired effect.

On another note, is there a reference I missed for Kodi controls? I've looked through the wiki and found a copy of GUIInfoManager.cpp for Kodi 19 (the link on the wiki seems broken), but I saw no mention of ListItem.Property(color).

it's hard to tell what went wrong without seeing the code you're using.

here's a copy of the Home.xml file of Estuary with the needed changes:
https://paste.kodi.tv/ukaxacifaz.kodi
(see the commented code, starting at line 860)




as for listitem properties, you can use any name you'd like, they are not predefined.
there's an example of lisitem properties in a container with static content here:
https://kodi.wiki/view/Static_List_Content

Thanks. I had read that page while searching for an answer earlier, but didn't realize it wasn't predefined.

I looked over my control edits, and it is more or less an exact copy of yours. The only differences were the lack of comments on my part and the positioning of the itemlayout image control, which I had placed lower to cover the other labels. I tried moving my image control up, with no change for the colors. I then tried using your supplied copy of the edits, but that also rendered the colors incorrect. Screenshots using your edits here: 



Any idea what other difference there could be? I haven't touched any other files yet. Here's a copy of my own home.xml(please excuse the dirty edits): aritohatah.kodi (paste)

Using your hastebin file on Kodi 20 gives this result, the colours seem to work fine.

watch gallery

Which version of Kodi are you running, I had the same problem over a year ago on an older version of Kodi. 

https://forum.kodi.tv/showthread.php?tid=353217

Maybe it's been fixed in later versions.

Aha, that seems to have been the issue. I was using Kodi 19.3 - the latest nightly of Kodi 20 does work as expected.

Thanks for the tip, guess I will have to stick with the nightly builds.