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

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

      #module_{number}_module-name

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        @sdetweil

        ok, so since this isn’t working, do I change the item “classes” or “type” ?

        Screenshot 2024-03-30 at 3.43.19 PM.png
        Screenshot 2024-03-30 at 3.43.27 PM.png

        let’s say I change it to “weatherDAY” and “weatherWEEK”
        in the css do I change it to

        .weatherDAY .weathericon {
        .weatherWEEK .weathericon {
        

        so on and so forth?

        Screenshot 2024-03-30 at 3.50.03 PM.png

        1 Reply Last reply Reply Quote 0
        • 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
                            • S Offline
                              sdetweil @greedyvegan
                              last edited by sdetweil

                              @greedyvegan ok, the ‘classes’ property in this case is an mm config option NOT a module config option.

                              so it goes outside of the config:{} section, along with position and header

                              see these options in the doc
                              https://docs.magicmirror.builders/modules/configuration.html#example

                              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
                                the ‘classes’ property goes outside of the config:{} section, along with position and header

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

                                I knew it

                                thank you very much, I’ll play around with this in a few

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

                                  @greedyvegan note that modules can also define properties with the same names as we use for mm properties. so one has to check carefully. ive only made this mistake a hundred times…

                                  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 lol noted

                                    1 Reply Last reply Reply Quote 0

                                    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                    With your input, this post could be even better 💗

                                    Register Login
                                    • 1
                                    • 2
                                    • 2 / 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