Help with a couple CSS issues

[sdetweil]

@nneuland i am a moderator… i don’t know much about specific modules…

I know HOW to do some debugging and some limited css…

I also do the scripted installer and upgrader tools

i have 5 single board computers running different things… Pi0, Pi3, Pi4, Jetson Nano, and Odroid Xu4. also a vm with Macos catalina, and my desktop running ubuntu.

and I know how to google for answers…

there are lots of talented folks here… I reference their work. all the time…

[Nneuland]

@sdetweil
That’s great. Can’t thank you enough.

[matt216]

@sdetweil I wonder if I can ask for some help? I have MMM-ip module that I’d like the change the font size. Following your instructions with dev tools I can see:

So I have put in my custom.css:

.MMM-ip .dimmed {
font-size: 16px;
}

But it doesn’t seem to take effect. Any advice?
Thanks in advance.
Matt

[sdetweil]

@matt216 while in the dev window,

u can see the custom.css value is strike thru, cause the div wins

so u need to apply the style to the div

add it to the element box above.

if that works, you can mark/copy that top right box, and paste to custom.css, should have the right targeting syntax

[matt216]

@sdetweil Thanks for the help.
How do I reference the div in custom.css not the class?
Adjusting the value in the element box above successfully adjusts the font, but this looks to adjust the ‘dimmed’ class.

[sdetweil]

@matt216 and when u copy/paste that from the top box to custom.css, what do u get?

just swipe mark the element entry, copy

here is my favorite cheet sheet on css selectors

https://www.w3schools.com/cssref/css_selectors.asp

[sdetweil]

I’m guessing

.MMM-ip  .dimmed div {
     font-size:16px;
}

[matt216]

@sdetweil Thank you, this works:

.MMM-ip  .dimmed div {
     font-size:16px;
}

[sdetweil]

@matt216 what did the copy/paste result look like?

[Shawangunk]

I’m a raspi & linux newbie (used C years ago. some Arduino experience) and this is my first post so…
In attempting to modify MM I’ve experienced a number of custom.css failures. I found this @sdetweil post https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1623901330356 and believe the “developer Tools” will be a big help, but I quickly got lost. The Tool’s built in help doc (kebab>Help>Documentation) appears to be a null link. I tried to find documentation for this tool online without luck. Can anyone provide a documentation link or more detailed tutorial?

[sdetweil]

@Shawangunk this would be all in the/a browser, nothing w mm.

I have never seen any doc

[sdetweil]

@Shawangunk see this
https://developer.chrome.com/docs/devtools/

but this will not teach u the DOM, css, html (and attributes)

only provides tool to examine and change Dom element styles

[Shawangunk]

@sdetweil
All help at the bottom of the curve is appreciated. Thank you. Cheers