MMM-Carousel - how to configure a module multiple times on the SAME page?

sdetweil

css allows one to override/replace styles specified in an html document

MagicMirror is a html page
each modules content has a class name that matches the module name

in css the part before the {, is called the selector clause
is SELECTS the html elements the stuff inside the braces will be applied to.

a dot prefix means classname, class=
a pound sign prefix means id id=
no prefix means and html tag name

.MMM-page-indicator // element tree with modulename
div.module-content // a div tree with class module_content
div //with a div
i:nth-child(1)::before { // with an i (icon(1st in array of them) and use the ::before placement

}

if you oen the developers window you can see this

reverendz

@sdetweil Thank you for all your help.

I figured it out: I’m a dummy (or noob, take your pick).

I have run into the infamous “stacking” behavior.

Basically, the controls showed up, but were too close to something else and so even though they didn’t overlap visually, I couldn’t click on the buttons bc of proximity to another element.

Once I removed the element, it worked.

Thanks!

It’d be nice if there were some way to either set precedence or set a padding around each element so that I didn’t lose clickability when something is nearby.

sdetweil

@reverendz zindex:1-99 will move it up the stack -1… etc will move it down the stack (that is how fullscreen_below works)

reverendz

@sdetweil Thank you again!

That did it!

I found this on the zindex and once I set it to 1, I was able to click the buttons.

Huzzah!

https://forum.magicmirror.builders/topic/4866/troubleshooting-changing-z-index-of-different-modules/4

sdetweil

@reverendz zindex definitely takes negative numbers too