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 2.7k 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
      last edited by

      So i have this module working great, but the text is grey and is almost invisible. I tried to edit it via custom.css. Any advice would be great.

      My custom.css looks like this:

      .MMM-homeassistant-sensors {
        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:

        .MMM-homeassistant-sensors {

        u need the class name of the text… u are going to override the class values…

        wrapper.className = ‘dimmed small’;

        .MMM-homeassistant-sensors.dimmed {
        color: #FFFFFF;
        }

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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