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

reverendz

Thank you for the response!

So I am a bit lost. I tried pages and after figuring out the “fixed” vs. “pages” bit, I can’t seem to change the page-indicators to buttons.

The only thing I found was this:

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f055";  // <-- icon code goes here
    font-family: FontAwesome;
}

As a newbie, “code goes here” leaves me grasping. Does your link have another solution or is there somewhere I can complete the content?

Other than that, I saw someone basically created a custom button module to do the same.

sdetweil

@reverendz sorry you didn’t get the link to the link

see here
https://forum.magicmirror.builders/post/118877

reverendz

@sdetweil

Thank you. I got the link and I still don’t get it.

I am lost. The icons that show up look like standard MMM-page-indicator buttons.

I added this based on the image, but it probably doesn’t apply since I’m not using the posters icons.

/* MMM-page-indicator config to turn indicator into buttons */
.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;
}

I just have 3 pages I want to cycle through that coincide with the EXT3 calendar this month, next month and the one after.

What am I missing?

sdetweil

@reverendz so those are the fonticon numbers for different icons

all that stuff went in custom.css right?

reverendz

@sdetweil Yep!

They don’t show up anywhere. Which means I likely missed something major.

I see the regular dots.

sdetweil

@reverendz see the second link in my signature below on how to use the dev window

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?