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 3.8k 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

      @com1cedric i will test this out and get back

      icons are very small images

      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 see here, this is good info

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

        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
          OK, I looked into it, thank you.

          Now, I have this images from Fontawesome. It looks nice, but I would like to be able to use other image if needed.
          Capture d’écran 2025-04-14 à 14.15.41.jpg

          For example, I would replace the “sun” with a picture “04n.png” in the “icons” forder on my raspberry.

          Capture d’écran 2025-04-14 à 14.35.10.jpg

          I tried to change line 251 with 250 in the custom.css file
          Capture d’écran 2025-04-14 à 14.45.08.jpg

          Now, the result is, that the sun has disappeared (correct), but just has been replaced with a gap.
          Capture d’écran 2025-04-14 à 14.47.43.jpg

          do you maybe see a mistake in my custom.css file? the problem is maybe between lines 221 and 240. this is strange…

          S karsten13K 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @com1cedric
            last edited by

            @com1cedric can you open the developers window (ctrl-shift-i), select the console tab
            and put caro in the filter field to limit messages to the carousel module

            this info might be of help on the image selection
            https://elfsight.com/blog/svg-png-jpeg-choose-the-image-format-for-your-website/

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • karsten13K Offline
              karsten13 @com1cedric
              last edited by

              @com1cedric

              the /icons subfolder will not work, you have to use one of these

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

                @karsten13 ok, I forgot we are restrictive

                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 and @karsten13

                  thank you for your inputs.

                  I tried it and put the image (downloaded from flaticon.com) on the CSS file

                  Capture d’écran 2025-04-15 à 10.03.26.jpg

                  When I search for it in the Chromium browser (to be sure the URL is correct), it works

                  Capture d’écran 2025-04-15 à 10.04.42.jpg

                  but when I put this path in the custom.css files, with full or shorten path, it does not appear…
                  Capture d’écran 2025-04-15 à 10.13.37.jpg

                  in the console, I do not find anything suspicious (I only use mm-page and mm-page-indicator, and no carrousel).

                  Capture d’écran 2025-04-15 à 10.16.37.jpg

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

                    @com1cedric again, we wont load the file path url,

                    /home/… in not one of out supported folders

                    it has to be MagicMirror web server based , from the MagicMirror folder as root (/)

                    url('/css/house.svg')
                    

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    karsten13K 1 Reply Last reply Reply Quote 0
                    • karsten13K Offline
                      karsten13 @sdetweil
                      last edited by

                      I did a test with default calendar and custom.css:

                      .calendar div.module-content::after {
                        content: url("/css/k13.svg");
                      }
                      

                      or

                      .calendar div.module-content {
                        content: url("/css/k13.svg");
                      }
                      

                      which works (svg is visible).

                      So maybe something with your css concerning the child-stuff is wrong (my css knowledge is to bad to help here)

                      1 Reply Last reply Reply Quote 0
                      • mumblebajM Offline
                        mumblebaj Module Developer @com1cedric
                        last edited by

                        @com1cedric MMM-page-indicator was updated recently so you do not have to use the nth-child stuff anymore. Checkout the latest version and the readme. I have added some samples of how you can use it. You should reference the svg as either @sdetweil or @karsten13 has shown and it should work.

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

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