• 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 - how to configure a module multiple times on the SAME page?

Scheduled Pinned Locked Moved Solved Troubleshooting
29 Posts 6 Posters 8.4k Views 6 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 @reverendz
    last edited by Jan 3, 2025, 11:48 PM

    @reverendz I pasted your def into my custom.css and the icons showed and I can click them

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    R 1 Reply Last reply Jan 4, 2025, 2:37 AM Reply Quote 0
    • R Offline
      reverendz @sdetweil
      last edited by reverendz Jan 4, 2025, 2:39 AM Jan 4, 2025, 2:37 AM

      @sdetweil

      I don’t know what to do then. It’s 100% not working.

      I added buttons to a separate module in another region and those work. I can click on calendar events, but those items show up but aren’t clickable.

      .MMM-page-indicator div.module-content div i:nth-child(1)::before { 
              font-size: 20px; 
              content: "\f015"; 
              font-family: FontAwesome;
      }
      
      .MMM-page-indicator div.module-content div i:nth-child(2)::before { 
              font-size: 20px; 
              content: "\f04e"; 
              font-family: FontAwesome;
      }
      
      .MMM-page-indicator div.module-content div i:nth-child(3)::before { 
              font-size: 20px; 
              content: "\f04e"; 
              font-family: FontAwesome;
      }
      
      .MMM-page-indicator div.module-content div i:nth-child(4)::before { 
              font-size: 20px; 
              content: "\f04e"; 
              font-family: FontAwesome;
      }
      

      Can you provide a simple example like what I have above and how it ties to mmm-page-indicator?

      I can only think that this css is providing buttons but they’re not tied to something?

      S 2 Replies Last reply Jan 4, 2025, 2:43 AM Reply Quote 0
      • S Offline
        sdetweil @reverendz
        last edited by Jan 4, 2025, 2:43 AM

        @reverendz all we did was change the icon over
        the <a link in the html generated by page-indicator

        you can open the developers window and look at the html
        see the second link in my sig below

        if you rename custom.css to done other name and reload tye MagicMirror page the circles will be back. do they work?

        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 @reverendz
          last edited by Jan 4, 2025, 3:06 AM

          @reverendz the what

          css allows one to override/replace styles specified in an html document

          MagicMirror is a html page
          each modules content has a class name that matches the module name

          in css the part before the {, is called the selector clause
          is SELECTS the html elements the stuff inside the braces will be applied to.

          a dot prefix means classname, class=
          a pound sign prefix means id id=
          no prefix means and html tag name

          .MMM-page-indicator // element tree with modulename
          div.module-content // a div tree with class module_content
          div //with a div
          i:nth-child(1)::before { // with an i (icon(1st in array of them) and use the ::before placement

          }

          if you oen the developers window you can see this

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          R 1 Reply Last reply Jan 4, 2025, 3:27 AM Reply Quote 0
          • R Offline
            reverendz @sdetweil
            last edited by Jan 4, 2025, 3:27 AM

            @sdetweil Thank you for all your help.

            I figured it out: I’m a dummy (or noob, take your pick).

            I have run into the infamous “stacking” behavior.

            Basically, the controls showed up, but were too close to something else and so even though they didn’t overlap visually, I couldn’t click on the buttons bc of proximity to another element.

            Once I removed the element, it worked.

            Thanks!

            It’d be nice if there were some way to either set precedence or set a padding around each element so that I didn’t lose clickability when something is nearby.

            S 1 Reply Last reply Jan 4, 2025, 3:41 AM Reply Quote 0
            • S Offline
              sdetweil @reverendz
              last edited by sdetweil Jan 4, 2025, 3:45 AM Jan 4, 2025, 3:41 AM

              @reverendz zindex:1-99 will move it up the stack -1… etc will move it down the stack (that is how fullscreen_below works)

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              R 1 Reply Last reply Jan 4, 2025, 3:56 AM Reply Quote 0
              • R Offline
                reverendz @sdetweil
                last edited by Jan 4, 2025, 3:56 AM

                @sdetweil Thank you again!

                That did it!

                I found this on the zindex and once I set it to 1, I was able to click the buttons.

                Huzzah!

                https://forum.magicmirror.builders/topic/4866/troubleshooting-changing-z-index-of-different-modules/4

                S 1 Reply Last reply Jan 4, 2025, 3:59 AM Reply Quote 0
                • S Offline
                  sdetweil @reverendz
                  last edited by Jan 4, 2025, 3:59 AM

                  @reverendz zindex definitely takes negative numbers too

                  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
                  • 3 / 3
                  3 / 3
                  • First post
                    26/29
                    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