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.
    • 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
                        • 1
                        • 2
                        • 3
                        • 4
                        • 4 / 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