changing skin font

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

Moderators: jiri, drakinite, Addon Administrators

alienbiker99
Posts: 7
Joined: Wed Jan 03, 2007 8:00 pm

changing skin font

Post by alienbiker99 »

Hello,

I am trying to update a skin (Code Monkey) and change out its font file to something more appealing to my eyes.

I cannot seem to get MM5 to pickup the font file change.

Is there something I'm missing other than adding font file to skin directory and updating skin_base_add.less with the new font location & file name?
thesepix
Posts: 4
Joined: Wed Aug 10, 2022 5:41 am

Re: changing skin font

Post by thesepix »

Have you resolved this? I have the same issue as well.
(Switching from MM4 with the skin G-Monkey_PS to MM5 with the Codemonkey Skin as it is the most similar to G-Monkey besides the font.)
thesepix
Posts: 4
Joined: Wed Aug 10, 2022 5:41 am

Changing font in a skin

Post by thesepix »

Hi, i am trying to switch from MM4 to MM5. I have bee using the skin "G-Monkey_PS" for decades and am very used to it, besides, it has great readability. The most similar skin i found is "Codemonkey" which looks great but has a font that is difficult to read. What do i need to do, to switch to a different font file? Surely there is a place in the config where i can switch the necessary variables. Thanks for any hints into the right direction. Cheers
Ludek
Posts: 4959
Joined: Fri Mar 09, 2007 9:00 am

Re: changing skin font

Post by Ludek »

You can add somehting like this:

Code: Select all

@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Regular.ttf"); }
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Medium.ttf"); font-weight: 500; }
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Bold.ttf"); font-weight: bold; }
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Italic.ttf"); font-style: italic; }
to the skin_base_add.less file of the G-Monkey_PS skin.
i.e. you can also unzip the skin file and leave it there just as folder with he individual css/less files

i.e.
in C:\Users\<you>\AppData\Roaming\MediaMonkey5\Skins\CodeMonkey\Skin\fonts\ put a new font as *.ttf
in C:\Users\<you>\AppData\Roaming\MediaMonkey5\Skins\CodeMonkey\Skin\skin_base_add.less
define it per code example above..
thesepix
Posts: 4
Joined: Wed Aug 10, 2022 5:41 am

Re: changing skin font

Post by thesepix »

Ludek wrote: Wed Apr 26, 2023 11:46 am You can add somehting like this:

Code: Select all

@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Regular.ttf"); }
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Medium.ttf"); font-weight: 500; }
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Bold.ttf"); font-weight: bold; }
@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Italic.ttf"); font-style: italic; }
to the skin_base_add.less file of the G-Monkey_PS skin.
Hey Ludek,

i have tried exactly this but failed and i don't see why. I have added the following code into the skin_base_add.less file

Code: Select all

@font-face { font-family: Segoe UI; src: url("/skin/fonts/Segoe UI.ttf"); }
@font-face { font-family: Segoe UI; src: url("/skin/fonts/Segoe UI Bold.ttf"); font-weight: bold; }
and i have added the files "Segoe UI.ttf" and "Segoe UI Bold.ttf" to the AppData\Roaming\MediaMonkey5\Skins\CodeMonkey\skin\fonts folder.

No luck though, the font stays the same in MM5. Any ideas what is missing?
Ludek
Posts: 4959
Joined: Fri Mar 09, 2007 9:00 am

Re: changing skin font

Post by Ludek »

Define it also in the skin_base_add.less as font-family for the body element like:

Code: Select all

body {
    font-family: Segoe UI;
}
The best is to unpack a sample skin =>
e.g. rename codemonkey3059.mmip => codemonkey3059.zip => unpack and watch the sources to see how the fonts are defined for the individual skins.
thesepix
Posts: 4
Joined: Wed Aug 10, 2022 5:41 am

Re: changing skin font

Post by thesepix »

Ludek wrote: Mon May 29, 2023 2:34 pm Define it also in the skin_base_add.less as font-family for the body element like:

Code: Select all

body {
    font-family: Segoe UI;
}
Aha! The body element was missing! Thank you for your help, that seemed to worked :)
vladsinger
Posts: 1
Joined: Sat Mar 30, 2024 10:09 pm

Re: changing skin font

Post by vladsinger »

For anyone running across this thread trying to figure out how to do the same thing.

The above wasn't working for me in version 5.0.4.2693 - no changes made to the \AppData\Roaming\MediaMonkey5\Skins\CodeMonkey\skin\skin_base_add.less would seem to take effect.

However, for some reason there is also a CSS file here:
\AppData\Roaming\MediaMonkey5\precompiledLess_CodeMonkey_Desktop.css
Which has the same parameters. Editing them here does work.
I don't know exactly when this file is generated (on skin install?), but the changes do appear to be persistent.

Now I finally get to enjoy a dark discreet skin with a readable font.
Peke
Posts: 17480
Joined: Tue Jun 10, 2003 7:21 pm
Location: Earth
Contact:

Re: changing skin font

Post by Peke »

Hi,
Always edit skin_base_add.less not precompiled as it can get overwritten.
Best regards,
Peke
MediaMonkey Team lead QA/Tech Support guru
Admin of Free MediaMonkey addon Site HappyMonkeying
Image
Image
Image
How to attach PICTURE/SCREENSHOTS to forum posts
richadd
Posts: 1
Joined: Wed Jan 17, 2024 2:17 am

Re: changing skin font

Post by richadd »

Hello, I'm transitioning from MM4 to MM5 and have relied on the G-Monkey_PS skin for decades due to its readability. I found "Codemonkey," which resembles it but has a less legible font. How can I switch to a different font file? I'm seeking guidance on adjusting the necessary variables in the config. Appreciate any direction.
Peke
Posts: 17480
Joined: Tue Jun 10, 2003 7:21 pm
Location: Earth
Contact:

Re: changing skin font

Post by Peke »

richadd wrote: Sun Mar 31, 2024 3:45 pm Hello, I'm transitioning from MM4 to MM5 and have relied on the G-Monkey_PS skin for decades due to its readability. I found "Codemonkey," which resembles it but has a less legible font. How can I switch to a different font file? I'm seeking guidance on adjusting the necessary variables in the config. Appreciate any direction.
Edit "\AppData\Roaming\MediaMonkey5\Skins\CodeMonkey\skin\skin_base_add.less" body Section like Ludek pointed at https://www.mediamonkey.com/forum/viewt ... 05#p510305 and https://www.mediamonkey.com/forum/viewt ... 50#p509050 then delete \AppData\Roaming\MediaMonkey5\precompiledLess_CodeMonkey_Desktop.css and finally start MM. Font should change.
Best regards,
Peke
MediaMonkey Team lead QA/Tech Support guru
Admin of Free MediaMonkey addon Site HappyMonkeying
Image
Image
Image
How to attach PICTURE/SCREENSHOTS to forum posts
Post Reply