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

[reverendz]

@sdetweil

Sure, I’ve been looking at that already.

I figured out I had formatting error.

So I fixed it and now I see icons.

However, they’re still not clickable and do nothing. Fixed the formatting. Now I have a bunch of icons the previous poster mentioned.

.MMM-page-indicator div.module-content div i:nth-child(1)::before { 
        font-size: 20px; 
        content: "\f073"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(2)::before { 
        font-size: 20p; 
        content: "\f2c9"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(3)::before { 
        font-size: 20px; 
        content: "\f1b9"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(4)::before { 
        font-size: 20px; 
        content: "|f70c"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(5)::before { 
        font-size: 20px; 
        content: "\f19d"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(6)::before { 
        font-size: 20px; 
        content: " flea";
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(7)::before { 
        font-size:20px; 
        content: "\f03d"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(8)::before { 
        font-size: 20px; 
        content: "\e5ac"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(9)::before { 
        font-size: 20px; 
        content: "\f5ee"; 
        font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child (10): :before { 
        font-size: 20px; 
        content: " f013"; 
        font-family: FontAwesome;
}

[sdetweil]

@reverendz I pasted your def into my custom.css and the icons showed and I can click them

[reverendz]

@sdetweil

I don’t know what to do then. It’s 100% not working.

I added buttons to a separate module in another region and those work. I can click on calendar events, but those items show up but aren’t clickable.

.MMM-page-indicator div.module-content div i:nth-child(1)::before { 
        font-size: 20px; 
        content: "\f015"; 
        font-family: FontAwesome;
}

.MMM-page-indicator div.module-content div i:nth-child(2)::before { 
        font-size: 20px; 
        content: "\f04e"; 
        font-family: FontAwesome;
}

.MMM-page-indicator div.module-content div i:nth-child(3)::before { 
        font-size: 20px; 
        content: "\f04e"; 
        font-family: FontAwesome;
}

.MMM-page-indicator div.module-content div i:nth-child(4)::before { 
        font-size: 20px; 
        content: "\f04e"; 
        font-family: FontAwesome;
}

Can you provide a simple example like what I have above and how it ties to mmm-page-indicator?

I can only think that this css is providing buttons but they’re not tied to something?

[sdetweil]

@reverendz all we did was change the icon over
the <a link in the html generated by page-indicator

you can open the developers window and look at the html
see the second link in my sig below

if you rename custom.css to done other name and reload tye MagicMirror page the circles will be back. do they work?

[sdetweil]

@reverendz the what

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