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.4k 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

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