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

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.

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

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?

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?

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;
}

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

I see the regular dots.

all that stuff went in custom.css right?

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?

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

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.

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

in pages you can define page names , mom, dad , son , daughtrr, weather, shopping, whatever

and on each module using the classes:property to specify which page(s) this instance is on

i have a setup w 3 CalendarExt3 instances
this month, next and next after that

Found this because this is just what I’m trying to do.

I’m trying to use the EXT3 calendar showing monthly views.

However, when I try the config, one of two things happens:

• If I list a position for the additional months, they all show up on the same page.

• If I don’t list a position, the other months don’t show up.

I can’t seem to get it so that one month shows up with a forward/backward option in Carousel when using MMM-CalendarExt3.

If anyone has an example config and can step me through how to set this up with Carousel it’d be greatly appreciated.

I liked Carousel because I only want to move the calendar forward, but I’m open to other options. The big thing is: I’m using a touch screen so really want on-screen navigation/click.

As mentioned in one of the posts above - the key learning was to use the same carouselId for all modules (which I use multiple times) which should be on the same page.

So my configuration for MMM-Carousel looks like this now:

{
            module: 'MMM-Carousel',
            position: 'bottom_bar', // Required only for navigation controls
            config: {
                transitionInterval: 15000,
                showPageIndicators: true,
                showPageControls: true,
                ignoreModules: ['clock', 'alert', 'updatenotification'],
                mode: 'slides',
                slides: {
                    "1": [
                            {name:'calendar', carouselId: "Calendar1"}, // Calendar of Chris
                            {name:'calendar', carouselId: "Calendar1"}, // Calendar of Karin
                            'MMM-WeeklySchedule'
                         ],
                    "2": [
                            {name:'calendar', carouselId: "Calendar2"}, // Calendar for trash
                            {name:'calendar', carouselId: "Calendar2"}, // Calendar for Austrian holidays
                            {name:'calendar', carouselId: "Calendar2"}, // Calendard for birthdays
                            'newsfeed'
                         ],
                    "3": [
                            {name:'weather', carouselId: "Weather1"}, // current weather at home
                            {name:'weather', carouselId: "Weather1"}, // weather forecast at home
                            {name:'weather', carouselId: "Weather1"}, // weather in some other location
                            'MMM-network-signal',
                            'MMM-NetworkConnection'
                         ],
                    "4": [
                            'MMM-GooglePhotos'
                         ]
                }
            }
		},

It shows two calendars on the first page, and 3 other calendars on the second page. Further, it shows 3 weather modules on the third page.

is that what you are trying to do?

It would be good to improve the documentation for such cases. Do you have a concrete suggestion how?