Read the statement by Michael Teeuw here.
My first written module
-
@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… -
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!
-
@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,
.tickerbodywould apply the properties to BOTH modules.
But if you use.MMM-yourmodule .tickerbodyit 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 Wow. that’s a really handy description, Thanks.
-
Well, there it is. My silly little module. Pretty.
-
@BKeyport nice work!
-
Ah, the heck with it. It’s released!
