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