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 @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
          • C Offline
            com1cedric
            last edited by

            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

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

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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              C 1 Reply Last reply Reply Quote 0
              • C Offline
                com1cedric @sdetweil
                last edited by sdetweil

                @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!

                S mumblebajM 4 Replies Last reply Reply Quote 0
                • S Offline
                  sdetweil @com1cedric
                  last edited by

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @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

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

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

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

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      C 1 Reply Last reply Reply Quote 0
                      • C Offline
                        com1cedric @sdetweil
                        last edited by

                        @sdetweil hello, and thank you for your time. It helped me a lot, as it is finally working now…

                        I had to change “before” with “after” after the ::

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

                        So, thank you very much for your help and have a great week-end.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 2 / 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