MagicMirror seemingly ignoring custom.css

[sdetweil]

@mbalmer open the developers window, ctrl-shift-i on the MM keyboard
go to the console tab, and enter css

you should see something like this

[mbalmer]

@sdetweil

Yep; I see what you’re talking about. I do have a “refused to apply style” error, but it’s for “animate.css” and not “custom.css”.

I looked, and the reason it’s showing that is because “animate.css” doesn’t exist, so it’s throwing a 404 there, but I don’t understand why that would stop it from loading custom.css – as far as I know, the two aren’t linked.

Interestingly, the error shows twice – once at the very top of the console, and then again as the last line. I don’t know if that means it’s trying to find it twice or if that’s the inspector shoving errors to the bottom of the list so they’re easily viewed.

Do I have a missing package that should’ve been installed?

Here’s a screenshot:

[sdetweil]

@mbalmer I don’t know why the animate.css is listed twice

but it shows that custom.css was loaded successfully no error produced.

So now we need to understand what’s in custom CSS and is it used properly.

if you go to the elements tab you can use the little pointer to the left of the top left corner and you can use the mouse pointer over the content in the browser side to pick the element you want to look at when you click it will appear on the right hand side and you can see the style sheets CSS tree down the right hand side

see this post for using the elements tab
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1696523432686

[mbalmer]

@sdetweil

I tried repeatedly tweaking values in custom.css and nothing ever seemed to change, so I tried a complete, fresh reinstallation.

Now the config.css file loads and parses properly, but a new thing has popped up: In the config.js file, it’s ignoring the zoom property completely. Everything else works, but even though I have it set to zoom: 1.75, it’s still displaying at a zoom of 1. I suppose I could just change the base font sizes in the custom.css file, but it was nice to have the global zoom set in the config.js file.

[sdetweil]

@mbalmer try this

pm2 stop all
cd ~
rm -rf .config/Electron
cd MagicMirror
npm start

seems electron doesn’t like changing the zoom setting once set.

this will erase all the saved electron settings

you can try the browser keys to zoom as well. these are saved

ctrl-+ (plus) zoom in
ctrl-- (minus)zoom out

some keyboards require those next to backspace some on keypad

[mbalmer]

@sdetweil

The rm -rf did the job. Makes me wonder if adding modules will be as obstinate as this was. Is it grabbing a cached copy somewhere, or is it just that setting that it doesn’t like changing?

[sdetweil]

@mbalmer this is an electron thing not a magic mirror thing.

they don’t disclose what they save and what conditions allow it to be changed.

it originally worked just like you proposed change it in config and then it worked right but then they changed something in electron without telling anybody

MagicMirror does not cache anything