Help with a couple CSS issues

[Nneuland]

@sdetweil
For the NYC-Transit module Changing the font size within the the developers window was smooth as silk.
However, scaling in the custom.css has yielded nothing.
I have attached a screenshot of what I believe is the proper location.

Removing the duration of individual albums seems more difficult considering every album in the collection is different, or it doesn’t have a location at all due to not being in the description.

To clarify, I should be modifying the “custom.css” (blank by default) file. not amending the specific mmm-nyc-transit.css or mmm-discogs.css files?

[sdetweil]

@nneuland so, in custom.css you need this pattern

.modulename (space) .classname {
    stylename: value;
}

SO, in this case from the dev window

go up to the module_11_MMM-nyc-transit

remove the module_11_ prefix and add a dot

.MMM-nyc-transit  

then we need the class name of the element u want to change

mta__train–list (add a dot in front)

now we have

.MMM-nyc-transit   .mta__train--list {

it IS font-size: medium;
in main.css

.medium {
  font-size: 30px;
  line-height: 35px;
}

u want to change that, SO

.MMM-nyc-transit   .mta__train--list {
        font-size:   20px;
}

[Nneuland]

@sdetweil

YES!!! My spacing was allllllll off.
You’re a genius! Thank you so much.

You have the patience of a saint

N

[sdetweil]

@nneuland yes, spacing is critical… it means something else if there are NO spaces between items in the selector list ( stuff before open brace { )

something worth reading
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works

[Nneuland]

@sdetweil
Your so knowledgeable with this realm.
Can I ask, what you know about the hue module?

Specifically, is it only displaying what lights are on, or is it interactive?

I’m genuinely curious what your smart mirror looks like.
If you have one, I imagine it’s incredible.

N

[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