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.
    • mumblebajM Offline
      mumblebaj Module Developer @sdetweil
      last edited by

      @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
      Check my blog-post: https://mumblebaj.xyz/

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

        @mumblebaj page- was never there

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        mumblebajM 2 Replies Last reply Reply Quote 0
        • mumblebajM Offline
          mumblebaj Module Developer @sdetweil
          last edited by mumblebaj

          @sdetweil Yes, that is correct. I added a classname page-${i}. But the standard code was always zero based and I do not want to update that. It is tied in with MMM-pages and seems like it works with others as well.

          start() {
            this.curPage = 0;
            this.mmmPagesDetected = false;
          },
          

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

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

            @sdetweil And just to note, MMM-pages is zero based. This will need to be updated as well. If I understand MMM-Carousel correct, it is also zero based.

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

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

              @mumblebaj one small step!

              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 @sdetweil
                last edited by

                @sdetweil Hello Sam, may I ask you one question about this topic? do you know how it would be possible to show an image stored on the Raspberry or linked from the web, instead of showing an icon from Fontawesome?

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

                  @com1cedric just point the url() to the file

                  url('/folder_in_mm_tree/xxx.jpg/png/gif as appropriate')
                  

                  note the MM web server root is ~/MagicMirror

                  so the files have to be in THAT folder tree
                  you can LINK files/folders outside into the MM tree with the -->ln<-- command

                  so, assume you made a

                  MagicMirror/icons
                  

                  folder and in it is

                  circle.png
                  

                  then you could use

                  url('/icons/circle.png')
                  

                  or

                  url('http://localhost:mm_port/icons/circle.png')  /* not this ONLY works IF the browser is on the SAME MACHINE as MM..*/
                  

                  if not you need the relative(url(‘/…’), OR have to hard code the MM machine address
                  like this

                  url('http://MM_IP_address:mm_port/icons/circle.png')
                  

                  if linked from the web use its complete url path

                  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 said in MMM-Carousel Pagination Icons:

                    url(‘/icons/circle.png’)

                    Thank you very much Sam.

                    currently, I have the following command (which works well and shows an icon from FontAwesom) in custom.css:

                    .MMM-page-indicator div.module-content div i:nth-child(7)::after {
                    content: “\f207”;
                    font-family: FontAwesome;
                    color: #FF4433;
                    }

                    After putting an image called “olympic.png” in the “MagicMirror/icons” folder, it still does not appear if I write:

                    .MMM-page-indicator div.module-content div i:nth-child(7)::after {
                    url(‘/icons/olympics.png’);
                    }

                    Do I habe to still use “content:” before or something else?

                    PS. sorry for asking, I am quite new in this CSS topic

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