Editing Skins

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

Moderators: jiri, drakinite, Addon Administrators

AlanH
Posts: 197
Joined: Sun Sep 08, 2013 3:54 pm

Editing Skins

Post by AlanH »

Hi,

I'm no programmer but i like to think i know my way around a computer. Im looking for help on how to make minor changes to a skin.

I currently use Material design dark skin and have it set up for list views with the column browser enabled, what i would like to do is change the seperator colour on the column browser to a slightly lighter shade so each segment is more distinct

Thanks in advance
Alan
TIV73
Posts: 229
Joined: Sat Nov 12, 2011 1:31 pm

Re: Editing Skins

Post by TIV73 »

This will add a red separator between the column filter columns:

Code: Select all

[data-control-class=TracklistFilter] .splitter {
    border-left-color: red; 
    border-left-style: solid;
}
Note that this will change the whole separator. If you want to give the header a different color you might need to drill into the individual components of the TracklistFilter object to see if you can target something there.
AlanH
Posts: 197
Joined: Sun Sep 08, 2013 3:54 pm

Re: Editing Skins

Post by AlanH »

TIV73 wrote: Mon Sep 06, 2021 3:17 pm This will add a red separator between the column filter columns:

Code: Select all

[data-control-class=TracklistFilter] .splitter {
    border-left-color: red; 
    border-left-style: solid;
}
Note that this will change the whole separator. If you want to give the header a different color you might need to drill into the individual components of the TracklistFilter object to see if you can target something there.
Thank you for the quick response, thats exactly what im looking for. It just focuses my eyes better when each one is seperated
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Editing Skins

Post by drakinite »

BTW, if you ever want to share your changes with other people, in case you think others with the same problem can benefit from the same solution, you can publish it as an addon. When MediaMonkey loads its LESS/CSS, it first loads it from the skins and then it loads from addons. This means that if you create an addon with your skin changes, your addon will override any variables or classes needed.

So for example, if you put TIV73's suggested code in skin/skin_layout_add.less, anyone can install the addon and their tracklist columns will obtain the new appearance. If you'd like a reference, Compact Material Design Skins does exactly what I described.
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