MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    MagicMirror-Netatmo-Module CSS

    Troubleshooting
    3
    9
    2968
    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.
    • zdenek
      zdenek last edited by

      Hi all
      is it possible to change color of Temperature for example? I know I can set order of values, but I would like to have for example actual temperature yellow. Thanks, Zdeněk

      broberg 1 Reply Last reply Reply Quote 0
      • broberg
        broberg Project Sponsor @zdenek last edited by

        @zdenek

        Try adding this to your custom.css

        .MagicMirror-Netatmo-Module .wi-thermometer {
        color: yellow;
        }
        

        I don’t really know if this will only change the color of the icon or the entire div.

        zdenek 1 Reply Last reply Reply Quote 0
        • zdenek
          zdenek @broberg last edited by zdenek

          @broberg thanks. I add it at the end - nothing happends ```
          .netatmo{display:inline-block}.netatmo .module,.netatmo .loading,.netatmo .loadTimer,.netatmo .updated{display:inline-block}.netatmo .module{overflow:hidden;margin:.125em .25em;border-radius:.25em;border:1px solid #fff}.netatmo .module .name{color:#000;text-align:center;padding:.125em .25em;background:#fff}.netatmo .module .data{padding:.125em .25em}.netatmo svg.loading{width:.6em;height:.6em}.netatmo svg.loading circle{fill:none;stroke-linecap:round;cx:50;cy:50;r:40}.netatmo svg.loading circle.inner{stroke:#fff;stroke-width:6}.netatmo svg.loading circle.outer{stroke:#aaa;stroke-width:10}.netatmo svg.loadTimer{width:.5em;height:.5em;margin:.2em 0;vertical-align:middle}.netatmo svg.loadTimer .loader{fill:#000}.netatmo svg.loadTimer .border{fill:#aaa}.netatmo .updated{margin:.2em 0;padding:0 .5em;vertical-align:middle}
          .MagicMirror-Netatmo-Module .wi-thermometer {
          color: yellow;
          }

          /* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */

          broberg 1 Reply Last reply Reply Quote 0
          • broberg
            broberg Project Sponsor @zdenek last edited by broberg

            @zdenek Okey first off, that is NOT the custom.css file (that is located in MagicMirror/css/)

            You should not change the modules files if you can avoid it, and you always can when it comes to css code.

            Okey. then you add

            .netatmo .wi-thermometer {
            color: yellow;
            }
            

            to the custom.css file.

            zdenek 1 Reply Last reply Reply Quote 0
            • zdenek
              zdenek @broberg last edited by

              @broberg sorry, I’m still noob. I get your point, moved it to custom.css, but nothing happned. I guess I had to say somewhere/somehow in config to use custom.css And cause I would like to use everything else (at least for now) from “default.css”, I had to copy everything from “deafult” to “custom”. Right?

              strawberry 3.141 1 Reply Last reply Reply Quote 0
              • strawberry 3.141
                strawberry 3.141 Project Sponsor Module Developer @zdenek last edited by

                @zdenek no main.css is the base stylesheet of the mirror and also some modules have their own. you dont touch any of those files except cstom.css where you can overwrite values from each css file because it is loaded as the last css file.

                Please create a github issue if you need help, so I can keep track

                zdenek 1 Reply Last reply Reply Quote 0
                • zdenek
                  zdenek @strawberry 3.141 last edited by

                  @strawberry-3.141 thanks for explanation. now it’s clear. Anyway, inserting of @broberg defintion doesn’t do anything (a place it between commented part of default custom.css and “body{}” section).

                  broberg 1 Reply Last reply Reply Quote 0
                  • broberg
                    broberg Project Sponsor @zdenek last edited by

                    @zdenek

                    I noticed I have added two . in the code,

                    .netatmo .wi-thermometer {
                    color: yellow;
                    }
                    
                    

                    This is just a guess, since I’m not using this module myself,
                    You would probably get a better answer from the ones who wrote the module

                    zdenek 1 Reply Last reply Reply Quote 0
                    • zdenek
                      zdenek @broberg last edited by

                      @broberg said in MagicMirror-Netatmo-Module CSS:

                      .netatmo .wi-thermometer {
                      color: yellow;
                      }

                      still the same 😞 I tried to go through the module files, but I’ve no idea about syntax, so I’ve ne idea, if there is (let call it “object”) objec named “wi-thermometer” with property “color”. Anyway, thanks

                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy