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.

    Default Weather Module Icon Position

    Scheduled Pinned Locked Moved Solved Troubleshooting
    38 Posts 4 Posters 11.1k Views 4 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.
    • G Offline
      greedyvegan @sdetweil
      last edited by

      @sdetweil said in Default Weather Module Icon Position:

      @greedyvegan yes, they are the same, that is why you need to add unique classes per my prvious post, OR use the id value in custom css as the primary selector

      #module_{number}_module-name

      I also saw you say IF you choose the module number, be careful when adding modules because the number will change.

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

        @greedyvegan sorry i posted to an issue

        Screenshot_20240330_163923_Chrome.jpg

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        G 1 Reply Last reply Reply Quote 0
        • G Offline
          greedyvegan @sdetweil
          last edited by

          @sdetweil thank you very much

          G 1 Reply Last reply Reply Quote 0
          • G Offline
            greedyvegan @greedyvegan
            last edited by

            that didn’t work, I’m going to try something else

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

              @greedyvegan what didnt work?

              remember the thing before the {
              is the selector clause,

              it selects the elements the stuff after the { will apply to

              i use this cheatsheet to help me build the selector clause
              https://www.w3schools.com/cssref/css_selectors.php

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              G 1 Reply Last reply Reply Quote 0
              • G Offline
                greedyvegan @sdetweil
                last edited by greedyvegan

                @sdetweil changing the classes name didn’t work for me, my custom name gets ignored

                @sdetweil said remember the thing before the {

                is the selector clause,

                it selects the elements the stuff after the { will apply to

                i use this cheatsheet to help me build the selector clause
                https://www.w3schools.com/cssref/css_selectors.php

                I’m going to try that

                S 1 Reply Last reply Reply Quote 0
                • bugsounetB bugsounet referenced this topic on
                • S Offline
                  sdetweil @greedyvegan
                  last edited by

                  @greedyvegan said in Default Weather Module Icon Position:

                  changing the classes name didn’t work for me, my custom name gets ignored

                  you noticed the dot in front of the class name , right?

                  . means element class (html class="foo", .foo) 
                  # means element id  (html id="module_0_clock", #module_o_clock)
                  nothing means html element (html img, body, div...)
                  

                  in MM if you want to select elements in A module, then you would select the content starting with its id (#module_…) its classname (.modulename) or one of the classes specified in the classes:“xxx yyy”, property for that module

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  G 1 Reply Last reply Reply Quote 0
                  • G Offline
                    greedyvegan @sdetweil
                    last edited by

                    @sdetweil said

                    you noticed the dot in front of the class name , right?

                    yes, other modules are easier to me because it’s only one focus

                    nothing means html element (html img, body, div…)

                    this confused me

                    believe me, I’m trying to understand.
                    I’m also trying everything I read/see for hours before reaching out for help

                    in config, I chose to uniquely identify the two weather “classes”
                    however the developer window mentions “class”
                    it also says “class=module weather weather” for both weather modules.
                    Screenshot 2024-03-31 at 5.31.20 PM.png I think THIS is why modifying one modifies both.
                    Screenshot 2024-03-31 at 5.19.18 PM.png

                    the weather.js file says .currentWeather & .forecastWeather
                    the weather.css file doesn’t differentiate current & forecast classes. I’ve even read the current & forecast njk files for individual class indicators…

                    in custom.css I’m trying any and everything I see to individually identify and separate #module_5_weather from #module_6_weather

                    I feel like my focus is in the wrong place(s) and i’m overlooking something extremely simple

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

                      @greedyvegan show me the config for the two modules , xxx out the api key

                      copy paste, dont change anything else

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      G 1 Reply Last reply Reply Quote 0
                      • G Offline
                        greedyvegan @sdetweil
                        last edited by

                        @sdetweil
                        Screenshot 2024-03-31 at 6.15.56 PM.png

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