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: 4945
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: 4945
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 :)
Post Reply