My first written module

BKeyport

Sam,

I guess what I’m looking for is a “for dummies” version of CSS introduction. I’m not understanding how to use it effectively in building a webpage, once I understand that aspect of it, I can modify what I know into my module. That’s been my problem, jumping from absolute noob to basic understanding.

sdetweil

@BKeyport there are three layers of cascading style sheets.

main.css
any stylesheet inserted by module (module reply to the getStyles() function call
custom.css

u can target system wide, or you can target to module specific

.Modulename .class .class…etc {
settings
}

the .class .class has different operations depending on if there is space between the classnames…

you can target JUST a specific implementation of a class, which is used inside a specific class or tag, multiple layers into the style sheet tree
or in general all uses of a class by that module

there are good books and online resources… it takes time and practice to get it right… and there are amazing things you can do…

sdetweil

@BKeyport something that seems like it should be easy, in css is

make a vertical list of buttons with images,with divs, buttons, images, spans, easy
now rotate that list to be horizontal… easy with flex-direction… but
the images turned too…
so, now rotate the images back 90 degrees…

BKeyport

OK… so, I figured out CSS except for how to write the file to work with magic mirror - this is where the documentation don’t exist.

Some CSS files have the module name in front of the css class, like “.MMM-NewsFeedTicker .tickerbody” - others just have the class as “.tickerbody” - what’s the difference?

Thanks!

lavolp3

@BKeyport In this case css works in hierarchies.

It looks in the webpage from top (document) to bottom for the classes, ids or elements you give it. When the page is loaded all the css files present (main.css, custom.css all module css) are being merged into one big css pool.
Giving it the hierarchy of classes (or elements), you can specify the css adaption.

Imagine your module has a class “.tickerbody” and another modules does as well.

Then, if you reference it in your custom.css, .tickerbody would apply the properties to BOTH modules.
But if you use .MMM-yourmodule .tickerbody it is only applied to the class tickerbody that is A CHILD OF the class .MMM-yourmodule.
You could also use something like .MMM-yourmodule div (note the missing . before div, meaning not a class is referenced but an element) which would affect ALL divs that are child elements of your module. Or .MMM-yourmodule .tickerbody spanwhich would affect all spans in the tickerbody of YOUR module.
In main.css you can see things like ‘.dimmed’. This affects ALL elements of the whole mirror with the class .dimmed and gives the respective color.

Every module gets it’s own name as class, this is general MM behaviour.

lavolp3

@BKeyport Have you seen this?
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1587124513929

BKeyport

@lavolp3 Wow. that’s a really handy description, Thanks.

BKeyport

Well, there it is. My silly little module. Pretty.

sdetweil

@BKeyport nice work!

BKeyport

Ah, the heck with it. It’s released!