Page 1 of 1

Editing Skins

Posted: Mon Sep 06, 2021 11:36 am
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

Re: Editing Skins

Posted: Mon Sep 06, 2021 3:17 pm
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.

Re: Editing Skins

Posted: Mon Sep 06, 2021 4:06 pm
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

Re: Editing Skins

Posted: Mon Sep 06, 2021 6:18 pm
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.