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.9k 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.
    • S Offline
      sdetweil @ankonaskiff17
      last edited by

      @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

      ankonaskiff17A 1 Reply Last reply Reply Quote 1
      • ankonaskiff17A Offline
        ankonaskiff17 @sdetweil
        last edited by

        @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 Reply Quote 0
        • S Offline
          sdetweil @ankonaskiff17
          last edited by sdetweil

          @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

          ankonaskiff17A 1 Reply Last reply Reply Quote 0
          • ankonaskiff17A Offline
            ankonaskiff17 @sdetweil
            last edited by

            @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 Reply Quote 0
            • S Offline
              sdetweil @ankonaskiff17
              last edited by

              @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

              ankonaskiff17A 1 Reply Last reply Reply Quote 0
              • ankonaskiff17A Offline
                ankonaskiff17 @sdetweil
                last edited by ankonaskiff17

                @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 Reply Quote 0
                • S Offline
                  sdetweil @ankonaskiff17
                  last edited by

                  @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

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

                    @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
                    • ankonaskiff17A Offline
                      ankonaskiff17 @sdetweil
                      last edited by

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

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

                        @ankonaskiff17 n

                        custom.css entry

                        #module_2_calendar  {
                          background-color:lightblue;
                        }
                        

                        sorry, I had used my cal identifier
                        changed to yours

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply 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