MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    modifying css to only one instance of a module

    Custom CSS
    3
    7
    1029
    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.
    • N
      N3RD last edited by

      So I have 2 instances of the darkskyForecast split on my mirror, one for current (top left)and one for hourly/daily (top right). I am attempting to modify the margins/border/padding for the first instance but any reference I make is modifying both. IS there a super simple way to target one versus the other that I’m too blind to find by searching? thanks in advance!

      S strawberry 3.141 2 Replies Last reply Reply Quote 0
      • S
        sdetweil @N3RD last edited by sdetweil

        @N3RD make a copy of the module folder under another name.
        Then the css can be against two names
        U have to rename the module.js to match the folder name, AND edit the module.js and change the registration line name to match as well

        see strawberry’s response below

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • strawberry 3.141
          strawberry 3.141 Project Sponsor Module Developer @N3RD last edited by

          @N3RD every module has a wrapper with an id. This is is the module identifier e.g. module_1_clock. There is no need to modify files. You can then target specifically that instance in CSS.

          #module_1_clock {
              margin: 20px;
          }
          

          you can find out the identifier in the DOM.

          Please create a github issue if you need help, so I can keep track

          S 1 Reply Last reply Reply Quote 1
          • S
            sdetweil @strawberry 3.141 last edited by

            @strawberry-3-141 thanks… didn’t know we could use the identifier…

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • N
              N3RD last edited by

              @strawberry-3-141 thanks for the tip! Now to sound even more newb, how do I read the DOM??

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

                @N3RD modules are numbered from top to bottom in config.js
                Also see the elements tab in the developers window

                Sam

                Create a working config
                How to add modules

                N 1 Reply Last reply Reply Quote 0
                • N
                  N3RD @sdetweil last edited by

                  @sdetweil got it! thanks guys, I’m slowly building confidence to poke around more and tweak. And annoy my wife by constantly tinkering 😉

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy