MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Carousel Pagination Icons

    Scheduled Pinned Locked Moved Development
    48 Posts 8 Posters 12.5k Views 9 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil @doriangrey
      last edited by

      @doriangrey no… we worked out how to do it in css…
      for example
      one entry like this for each page indicator (nth-child(x) to select the correct thing to override)

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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      D C 2 Replies Last reply Reply Quote 0
      • D Offline
        doriangrey @sdetweil
        last edited by

        @sdetweil said in MMM-Carousel Pagination Icons:

        nth-child

        Nice work.

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @doriangrey
          last edited by

          @doriangrey yeh, css tricky stuff. there is ALWAYS a way

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          BerkSmash1984B 1 Reply Last reply Reply Quote 0
          • BerkSmash1984B Offline
            BerkSmash1984 @sdetweil
            last edited by

            @sdetweil @doriangrey

            Just to show what the final edits look like in my custom.css and how that looks on my mirror, for the good of the group:

            d5c838bf-7a94-4365-88d3-aca1f34280b3-image.png

            The content entries are the unicodes for the respective icons found on Font Awesome’s website (https://fontawesome.com).

            For example, F073 in the first entry (for nth-child(1)) is for a calendar-days Font Awesome icon:

            4762ce12-8c6e-4b2b-b972-f5cc6d69ffe9-image.png

            You can see this icon, and all others used on my MagicMirror display to change pages, in the red box of the screenshot below:

            01db63e9-c58a-4326-baa9-5d6c6b194fdd-image.png

            Thank you @sdetweil for your help, as always!

            I hope this helps others looking to accomplish the same thing!

            S 1 Reply Last reply Reply Quote 1
            • S Offline
              sdetweil @BerkSmash1984
              last edited by

              @BerkSmash1984 and he only has that many entries because he has that many pages defined

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              BerkSmash1984B 1 Reply Last reply Reply Quote 0
              • BerkSmash1984B Offline
                BerkSmash1984 @sdetweil
                last edited by BerkSmash1984

                @sdetweil Yup!

                That is correct, I have 10 unique pages on my MM display. Happy to share more info of my config if anyone needs it.

                I did share a lot of info on my display (some small things have changed since then) in my post below:

                https://forum.magicmirror.builders/topic/18513/my-magic-mirror-desk-display?_=1721136289198

                1 Reply Last reply Reply Quote 0
                • P Offline
                  Philip 0
                  last edited by

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

                  20bf04fb-feb0-4230-be29-4e6462e21dc3-image.png

                  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;’”
                  },

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @Philip 0
                    last edited by

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

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • S sdetweil referenced this topic on
                    • S sdetweil referenced this topic on
                    • S sdetweil referenced this topic on
                    • J Offline
                      J2FK
                      last edited by

                      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

                      S 1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil @J2FK
                        last edited by 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.

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 1 / 5
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy