My first written module

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!