• 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.

Duplicate Modules w Different CSS

Scheduled Pinned Locked Moved Troubleshooting
11 Posts 2 Posters 2.7k Views 2 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.
  • A Offline
    ankonaskiff17
    last edited by Jul 18, 2021, 8:36 PM

    When reusing a module, in this case the default weather module, how do you apply unique CSS to each one separately?
    I can see same thing arising with the default calendar module.

    S 1 Reply Last reply Jul 18, 2021, 8:41 PM Reply Quote 0
    • S Away
      sdetweil @ankonaskiff17
      last edited by Jul 18, 2021, 8:41 PM

      @ankonaskiff17 use the module identifier as the selector instead of the module name

      u can look in the developer window, elements tab, to locate the ‘position’ and then the module

      identifiers will be stable top down in config.js

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      A 1 Reply Last reply Jul 26, 2021, 10:12 PM Reply Quote 1
      • A Offline
        ankonaskiff17 @sdetweil
        last edited by Jul 26, 2021, 10:12 PM

        @sdetweil module_3_weather.module.weather and module_4_weather.module.weather would be what I would use to distinguish between the two in my css?

        S 1 Reply Last reply Jul 26, 2021, 10:56 PM Reply Quote 0
        • S Away
          sdetweil @ankonaskiff17
          last edited by sdetweil Jul 26, 2021, 11:14 PM Jul 26, 2021, 10:56 PM

          @ankonaskiff17 module_3_weather
          is enough

          with dot in front, as it’s a class

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          A 1 Reply Last reply Aug 27, 2021, 11:04 PM Reply Quote 0
          • A Offline
            ankonaskiff17 @sdetweil
            last edited by Aug 27, 2021, 11:04 PM

            @sdetweil This about duplicate modules and how to address them in config.js file. On my two calendar modules, how do I distinguish between the first and second modules in the config when module name is the same. The CSS name as you described above didn’t fly. The first module getRelative: 0,works as described but it is using the default getRelative: 6,in the second module

            S 1 Reply Last reply Aug 27, 2021, 11:37 PM Reply Quote 0
            • S Away
              sdetweil @ankonaskiff17
              last edited by Aug 27, 2021, 11:37 PM

              @ankonaskiff17 use the module identifier

              look in the dev window, elements tab, and select the modules 1 at a time and see their identifier , use #id in custom.css

              note if u add/remove modules before this one, its ID will change

              Screenshot at 2021-08-27 18-34-48.png

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              A 1 Reply Last reply Aug 28, 2021, 12:33 AM Reply Quote 0
              • A Offline
                ankonaskiff17 @sdetweil
                last edited by ankonaskiff17 Aug 28, 2021, 12:34 AM Aug 28, 2021, 12:33 AM

                @sdetweil Are you saying to use that identifier in the config file too. I did that and it made the second module disappear.
                I replaced module: 'calendar', with module: 'module_2_calendar',

                This is the line in Developer Tools
                <div id="module_2_calendar" class="module calendar calendar"

                S 2 Replies Last reply Aug 28, 2021, 12:57 AM Reply Quote 0
                • S Away
                  sdetweil @ankonaskiff17
                  last edited by Aug 28, 2021, 12:57 AM

                  @ankonaskiff17 no. only in custom.css

                  identifier is created by mm

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  A 1 Reply Last reply Aug 28, 2021, 12:59 AM Reply Quote 0
                  • S Away
                    sdetweil @ankonaskiff17
                    last edited by sdetweil Aug 28, 2021, 12:58 AM Aug 28, 2021, 12:58 AM

                    @ankonaskiff17 right, so #module_2_calendar

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • A Offline
                      ankonaskiff17 @sdetweil
                      last edited by Aug 28, 2021, 12:59 AM

                      @sdetweil You want me to start as new topic since it relates to config?

                      S 1 Reply Last reply Aug 28, 2021, 1:01 AM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • 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