[SOLVED] Skin variable question

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

Blackcat12
Posts: 113
Joined: Mon Dec 31, 2012 11:41 am

[SOLVED] Skin variable question

Post by Blackcat12 »

Hi,
I am not a coder, but have been working on my own custom skin for MM5. I about have what I am looking for, but struggling with finding away to modify the text color in three areas. I am attaching a screen shot and hope you may be able to lend some guidance.

http://www.mediafire.com/view/sn356dxxa ... 0Theme.jpg

Thanks!
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Skin variable question

Post by drakinite »

For the top three, search for this selector in the code.

Code: Select all

.lvItem[data-selected]
That should also apply to the listview item on the bottom and the now-playing item on the right, but if you need to override them you can. This is the selector for the gridrow:

Code: Select all

.lvItem.gridrow[data-selected]
And this will work for the now playing list items:

Code: Select all

div[data-id=nowplayinglistContainer] .lvItem[data-selected]
If you need a separate color/background color for when it's focused, add your own selector with [data-focused], for example:

Code: Select all

.lvItem[data-selected][data-focused]
If you need to learn more about how CSS selectors work, the Mozilla Developer Network (MDN) is a fantastic resource. And if you don't know how Less works, I believe their site is here.

Here's the LESS that I added to test those selectors:

Code: Select all

div[data-id=nowplayinglistContainer] .lvItem[data-selected]{
    color: red!important;
}

div[data-id=nowplayinglistContainer] .lvItem[data-selected][data-focused]{
    color: green!important;
}

.lvItem[data-selected]{
    color: yellow!important;
}

.lvItem.gridrow[data-selected]{
    font-weight: bold!important;
}
(Note that using "!important" isn't the greatest idea unless you have to. I just decided to add that because I didn't want to bother with CSS overrides elsewhere in the theme. Just used that code for demonstration.)
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Blackcat12
Posts: 113
Joined: Mon Dec 31, 2012 11:41 am

Re: Skin variable question

Post by Blackcat12 »

Thank you so much for the feedback and guidance. It is very much appreciated!
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Skin variable question

Post by drakinite »

No probs! Good luck!
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Post Reply