• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 4.6k 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 @com1cedric
    last edited by Apr 5, 2025, 4:58 PM

    @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 Apr 6, 2025, 6:02 AM Reply Quote 0
    • C Offline
      com1cedric @sdetweil
      last edited by Apr 6, 2025, 6:02 AM

      @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
      • M Offline
        mumblebaj Module Developer @com1cedric
        last edited by mumblebaj Apr 6, 2025, 11:36 AM Apr 6, 2025, 11:16 AM

        @com1cedric I have submitted a PR for MMM-page-indicator which should give more flexibility per page. See example below:

        .MMM-page-indicator .fa.indicator.page-2::before {
            content:"\f005";
            color: orange !important;
        }
        
        .MMM-page-indicator .indicator.active-page {
           animation: pulse 1.2s ease-in-out infinite;
        }
        

        If PR is accepted you should be able to target specific page indicators as shown in example above from custom.css.

        You could use this fork in the meanwhile:
        MMM-page-indicator

        Check out my modules at: https://github.com/mumblebaj?tab=repositories

        S 1 Reply Last reply Apr 6, 2025, 11:57 AM Reply Quote 0
        • S Offline
          sdetweil @mumblebaj
          last edited by Apr 6, 2025, 11:57 AM

          @mumblebaj you know there has to be one of the icon entries for every page the user defined, right?

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          M 1 Reply Last reply Apr 6, 2025, 12:12 PM Reply Quote 0
          • M Offline
            mumblebaj Module Developer @sdetweil
            last edited by Apr 6, 2025, 12:12 PM

            @sdetweil Not sure if I understand you properly but the other pages would default to the standard circle. The changes I made allows you to target specific pages if you want to change the icon, add animations etc. A little easier to target individuals.

            Check out my modules at: https://github.com/mumblebaj?tab=repositories

            S 1 Reply Last reply Apr 6, 2025, 12:27 PM Reply Quote 0
            • S Offline
              sdetweil @mumblebaj
              last edited by sdetweil Apr 6, 2025, 12:53 PM Apr 6, 2025, 12:27 PM

              @mumblebaj ah, what you meant to say is

              .fa.indicator.page-n
              

              where n is a number for each page found, starting at 0

              page-0 for first page
              page-1 for second page
              etc

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              M 1 Reply Last reply Apr 6, 2025, 12:32 PM Reply Quote 1
              • M Offline
                mumblebaj Module Developer @sdetweil
                last edited by Apr 6, 2025, 12:32 PM

                @sdetweil Correct. Although, MMM-page-indicator is 0 based, same as MMM-pages, so page-0 would be page 1 etc.

                Check out my modules at: https://github.com/mumblebaj?tab=repositories

                S 2 Replies Last reply Apr 6, 2025, 12:54 PM Reply Quote 0
                • S Offline
                  sdetweil @mumblebaj
                  last edited by Apr 6, 2025, 12:54 PM

                  @mumblebaj i updated my post

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 1
                  • S Offline
                    sdetweil @mumblebaj
                    last edited by Apr 6, 2025, 1:28 PM

                    @mumblebaj i will say, i think for humans. 0 based is unfriendly

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    M 1 Reply Last reply Apr 6, 2025, 2:00 PM Reply Quote 0
                    • M Offline
                      mumblebaj Module Developer @sdetweil
                      last edited by Apr 6, 2025, 2:00 PM

                      @sdetweil Yeah, i would agree. Changing that logic now may have some repercussions for users already using the module.

                      Check out my modules at: https://github.com/mumblebaj?tab=repositories

                      S 1 Reply Last reply Apr 6, 2025, 2:16 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 3 / 5
                      3 / 5
                      • First post
                        30/48
                        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