Custom CSS?

[Fredde87]

Hey, sorry if this is a stupid question. But how do I apply custom CSS to the module? Using the ~/MagicMirror/css/custon.css doesnt seem to take effect.

The Readme is a bit confusing as it mentions dynamic CSS variable but nothing more on what that means.

Am I missing something obvious?

[Fabrizz]

Edit as I thought that this issue was inside MMM-OnSpotify, DynamicTheming grabs the colors from OnSpotify, if you want to disable or change it you can do it inside LiveLyrics or OnSpotify.

You can just edit custom.css and add any styling that you want.

What do you want to change? Maybe you need to use !important in yor css statements so it overrides the dafaults or look at how the module changes when its status changes.

This last bit is maybe what is conflicting with your config, as there are media queries for different screen sizes, different grid stylings for the backgrouds and some hardcoded values for shadows, etc inside the JS. I tried to make it really modular, so try looking at the default css to copy the selectors

[Fredde87]

Sorry for the late reply, I took a break from working on my MM.

Unfortunately that still hasn't taken effect. My goal is to resize it because I simply want it to occupy just a small section of the bottom of the screen as well as reducing the font size. So I tried this just to resize the height but it still fills the whole screen. I must be missing something obvious?

.MMM-LiveLyrics {
height: 5% !important;
max-height: 5% !important;
}

[Fabrizz]

Then you should probably edit the included.css to override the dafaults and view exactly what you want to change. It also depends on what displayMode: you have configured

You can change everything modifing the font-size of the parent container of the module, as the sizes are relative