Hello,
i've tried to customize the "Black Monkey" Skin. I would like the font for dark mode, and kind of old-school-terminal-look to be green everywhere.
Here is what I achieved without programming skills, as i've changed @warningColor in skin_base_add.less to #39ff14 and @windowBorderColor: #0af011
I've tried for hours (trial and error) to get the whole text in green, but i failed. Is there any easy way to set the font color for the whole skin to green?
Which *.less or other file did i have to customize?
In MM4 i fall in love with the Noir Skin Green (1.4.0.1) by Dread M and i need that look back:
Sorry for bumpy english an thanks for helping out.
Customizing Sample Skin (Black Monkey) for Dark Mode
Moderators: jiri, drakinite, Addon Administrators
Customizing Sample Skin (Black Monkey) for Dark Mode
Last edited by janko74 on Thu Jun 23, 2022 12:03 pm, edited 2 times in total.
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
Different elements define different font colors for themselves that can change depending on the state of the element, so there isn't a single property you could target to change all font color instances at once.
If you are fine with a good enough approach, append the listview class in skin_listview_add.less with a color property, that should get you most of the way in the main window since almost everything there inherits from listview.
If you are fine with a good enough approach, append the listview class in skin_listview_add.less with a color property, that should get you most of the way in the main window since almost everything there inherits from listview.
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
Thanks a lot! Seems like you directed me into the right direction. I figured out that simply adding "color:" could work it out. At the first try I added:TIV73 wrote: ↑Mon Sep 06, 2021 3:32 pm Different elements define different font colors for themselves that can change depending on the state of the element, so there isn't a single property you could target to change all font color instances at once.
If you are fine with a good enough approach, append the listview class in skin_listview_add.less with a color property, that should get you most of the way in the main window since almost everything there inherits from listview.
.listview {
.border;
color: #009605;
}
It changed the color, but caused an error, and the Monkey refused to work.
Then i learned, that:
.listview {
color: #009605;
.border;
}
resulted in:
Amazing!
Seems that my next quest is figuring out, which class defines font-color of the wikipedia excerpts?
Last edited by janko74 on Thu Jun 23, 2022 12:05 pm, edited 1 time in total.
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
It's actually simpler than you might think!
If you take a look at skin_base.less (in MediaMonkey 5/skin), you'll find the following:
If you override @textColor, you can override the base text color for all elements.
Here's what I got by overriding just @textColor, @warningColor, and @windowBorderColor:
BTW: If you haven't installed the refreshSkinShortcut addon (either by copying the refreshSkinShortcut folder from SampleScripts to Scripts, or installing from here, I'd highly recommend doing so. You just have to click the button once to refresh your skin's LESS/CSS.
If you take a look at skin_base.less (in MediaMonkey 5/skin), you'll find the following:
Code: Select all
@textColor: contrast(@baseColor, black, white);
Here's what I got by overriding just @textColor, @warningColor, and @windowBorderColor:
Code: Select all
@textColor: rgb(61, 226, 61);
@baseColor: #000000;
@warningColor: #bdffb7;
@controlColor: #101010;
@hoverColor: @warningColor;
@hoverBgColor: darken( @warningColor, 52%);
@borderColor: @warningColor;
@selectedColor: lighten(@baseColor, 20%);
@disabledSelectedColor: mix(@baseColor, @selectedColor, 50%);
@highlightBgColor: @highlightColor;
//@shadowColor: @hoverBgColor;
@windowBorderColor: #4fac47;
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Regular.ttf"); }
body {
font-family: Roboto, sans-serif;
}
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.
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
Yesss! Thanks a lot. Now i feel completely at home again in MM5. The refresh skin button is very practically for fiddling around with skins.drakinite wrote: ↑Mon Sep 06, 2021 6:11 pm It's actually simpler than you might think!
If you take a look at skin_base.less (in MediaMonkey 5/skin), you'll find the following:If you override @textColor, you can override the base text color for all elements.Code: Select all
@textColor: contrast(@baseColor, black, white);
Here's what I got by overriding just @textColor, @warningColor, and @windowBorderColor:
BTW: If you haven't installed the refreshSkinShortcut addon (either by copying the refreshSkinShortcut folder from SampleScripts to Scripts, or installing from here, I'd highly recommend doing so. You just have to click the button once to refresh your skin's LESS/CSS.Code: Select all
@textColor: rgb(61, 226, 61); @baseColor: #000000; @warningColor: #bdffb7; @controlColor: #101010; @hoverColor: @warningColor; @hoverBgColor: darken( @warningColor, 52%); @borderColor: @warningColor; @selectedColor: lighten(@baseColor, 20%); @disabledSelectedColor: mix(@baseColor, @selectedColor, 50%); @highlightBgColor: @highlightColor; //@shadowColor: @hoverBgColor; @windowBorderColor: #4fac47; @font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Regular.ttf"); } body { font-family: Roboto, sans-serif; }
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
Great! Glad it's helpful
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.
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
Looks nice!
Feel free to submit it here: https://www.mediamonkey.com/addons/brow ... 1/skins-1/
for others to benefit
Feel free to submit it here: https://www.mediamonkey.com/addons/brow ... 1/skins-1/
for others to benefit
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
I really would like to do that, but it's not mine, i'm not the author. I was just the scriptkiddie here (trapped in the body of someone over 40) ... And I don't even know what to upload, i.e. the whole "Skin" folder, because that's where the skin_base.less folder is stored?Ludek wrote: ↑Wed Sep 15, 2021 3:05 pm Looks nice!
Feel free to submit it here: https://www.mediamonkey.com/addons/brow ... 1/skins-1/
for others to benefit
And it's @drakinite who solved my riddle. And now i realized @drakinite uploaded Black Monkey... So all the fame, and work for uploading "Black Monkey - Old School Terminal Look" should go to him.
Re: Customizing Sample Skin (Black Monkey) for Dark Mode
It actually wasn't me who made the skin - I was just the one that uploaded it. It was initially made by Jiri, and over the course of MM5's development, it looks like the whole team has had their hand in it. You're absolutely free to upload the modified skin for others to download - You can just credit Ventis Media for making the original!janko74 wrote: ↑Wed Sep 22, 2021 2:21 pm I really would like to do that, but it's not mine, i'm not the author. I was just the scriptkiddie here (trapped in the body of someone over 40) ... And I don't even know what to upload, i.e. the whole "Skin" folder, because that's where the skin_base.less folder is stored?
And it's @drakinite who solved my riddle. And now i realized @drakinite uploaded Black Monkey... So all the fame, and work for uploading "Black Monkey - Old School Terminal Look" should go to him.
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.