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.

    MMM-homeassistant-sensors Text Color

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    11 Posts 3 Posters 3.2k Views 3 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
      scuppasteve @sdetweil
      last edited by

      @sdetweil

      I tried what you suggested and it didn’t seem to have an effect. Is there something that i need to do in the /css/main.css to make the /css/custom.css load?

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

        @scuppasteve no… custom.css is force loaded by the runtime.

        try a space between the module name and the .dimmed

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Offline
          scuppasteve
          last edited by

          I tried the following to no effect, not sure what the issue is.

          wrapper.className = 'dimmed small';
          
          .module.MMM-homeassistant-sensors .dimmed {
            color: #FFFFFF;
          }
          

          and

          wrapper.className = 'dimmed small';
          
          .MMM-homeassistant-sensors .dimmed {
            color: #FFFFFF;
          }
          
          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @scuppasteve
            last edited by

            @scuppasteve said in MMM-homeassistant-sensors Text Color:

            .module.MMM-homeassistant-sensors .dimmed {
            color: #FFFFFF;
            }
            that one is wrong for sure

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • S Offline
              scuppasteve
              last edited by

              I got it figured out, i appreciate the help in getting this figured out.

              .MMM-homeassistant-sensors .dimmed {
                color: #FFFFFF;
              }
              
              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @scuppasteve
                last edited by

                @scuppasteve cool… how is that one different than your second one?

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                E 1 Reply Last reply Reply Quote 0
                • E Offline
                  edd189 @sdetweil
                  last edited by

                  @sdetweil

                  Any idea how I can change the text color of one specific word in this module?

                  2023-06-12 13_13_47-MagicMirror².jpg

                  I want “peak” to be red, “shoulder” yellow, and “off-peak” green.

                  I messed around with the custom.css file, but it doesnt look like it accepts conditional formatting.

                  S 2 Replies Last reply Reply Quote 0
                  • S Offline
                    sdetweil @edd189
                    last edited by sdetweil

                    @edd189 find the element, see if it has a class, if so use it

                    if not, figure the html path to get there and use that

                    either in custom.css

                    each entry for magicmirror
                    starts with the module name as a class

                    .modulename xxxx {
                       styles
                    }
                    

                    xxx is a selector clause (selects the elements the enclosed styles will apply to
                    they can be quite explicit…
                    here is one from my MMM-Config module, to hide a generated element I don’t want to show

                    .possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item 1"] {
                      display: none;
                    }
                    

                    I use this to remind me of the css selector clause elements
                    https://www.w3schools.com/cssref/css_selectors.php

                    there is currently no selector clause attribute that can examine the text content of an element… there is a spec proposal to extend .has() to allow text elements…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

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

                      @edd189 other than the above, you would have to change the code

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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