MMM-Carousel Pagination Icons

Philip 0

Hello ,
By making a small modification, I colored each icon with a different color.

Line 588 of MMM-carousel.js, I removed the Style.

label.innerHTML = “<i class='”+Object.values(this.config.icons)[i]+“>”;

I copied it into each icon line of config.js.

icons: {
1: “fa-solid fa-sun’ style=‘color: #ffff00;’”,
2: “fa-solid fa-house-flood-water’ style=‘color: #718fea;’”,
3: “fa-solid fa-triangle-exclamation’ style=‘color: #0099ff;’”,
4: “fa-solid fa-gas-pump’ style=‘color: #ff0000;’”,
5: “fa-solid fa-calendar-days’ style=‘color: #ffcc00;’”,
6: “fa-solid fa-person-walking-luggage’ style=‘color: #00cccc;’”,
7: “fa-brands fa-spotify’ style=‘color: #009933;’”,
8: “fa-solid fa-person-hiking’ style=‘color: #ffffff;’”,
9: “fa-solid fa-video’ style=‘color: #cc00ff;’”,
10: “fa-brands fa-raspberry-pi’ style=‘color: #ff0000;’”,
11: “fa-solid fa-umbrella’ style=‘color: #999999;’”,
12: “fa-solid fa-image-portrait’ style=‘color: #ff6600;’”
},

sdetweil

@Philip-0 you could do the same in css.

J2FK

Hi,
I also use pages and page indicator with 7 pages and have successfully replaced the circles with colored icons as described above, thank you for that!!

Is there a way to highlight the icons or make them a little bigger, like with the hollow and solid circles, so you can see which page you are on?

thx

sdetweil

@J2FK yes, somehow wit CSS… maybe they change styles when selected…

use the developers window (see second slink in my signature below)

looking in the dev window when active each icon gets the class

indicator

applied

the default style is (in MMM-page-indicator.css)

.MMM-page-indicator .indicator {
    padding: 0 5px;
    margin: 0;
    font-size: 0.5em;
 }

so you would put this in css/custom.css and change it as you want/need

I tried fiddling with this , but the override for the icon is causing trouble.

com1cedric

Dear @sdetweil , hoping your going well, may I ask you something about the comment you put on this page?
-> see this for how to locate the items to set new custom.css entries for https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues/2?_=1719951675453

I do not find where the https://fontawesome.com is referenced to search for the icones.

has it been erased or could you explain me?

Wishing you a relaxing and sunny week-end,

Cédric

sdetweil

@com1cedric search is under the multi bar icon top
left ( often called the hamburger icon, two buns and patties between)

com1cedric

@sdetweil hum… I have to re-explain my question:

fo the moment, in custom.css, the word “hockey” is used for a page using MMM-page-indicator like this:

.MMM-page-indicator div i:nth-child(5)::after {
content: “Hockey”;
}

Let’s say, I want to replace this word “hockey”, with an image of a hockey-puck --> e.g. image “F453” on https://fontawesome.com/search?q=hockey&o=r

Shoud I “just” write instead in custom.css:

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

When I try that, the word “hockey” has disappeared, but not image of a puck is shownd. I should have missed a step…

Can you help me? (could interest other user as well I hope). Thanks in advance!

sdetweil

@com1cedric is the puck in the free section of icons?

sdetweil

@com1cedric i am traveling and dont have my computer out currently, maybe after lunch time.

can you look in the developers window console tab and see if there are any errors

sdetweil

@com1cedric also, is this the 1st or second icon you are trying to change?