• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Is it possible to change font color based on text payload?

Scheduled Pinned Locked Moved Custom CSS
2 Posts 2 Posters 2.1k Views 2 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.
  • X Offline
    xbmcnut
    last edited by Jul 29, 2018, 4:06 AM

    Is it possible to change the color of text based on the ‘payload’ text? I have MMM-MQTT pulling in my Home Assistant sensors using MQTT Statestream which is great but I have two entities where it would be great to have different colors for the text; my garage door and my pool pump. An example of the MQTT module with the text is shown below. The garage state is either ‘Open’ or ‘Closed’ and the pool pump is either ‘Stopped’ or ‘Running’

    0_1532837004544_0fd5efc6-64b9-4f54-9b41-ef87f070939a-image.png

    Is that possible using custom.css or would I need support from the module author?

    1 Reply Last reply Reply Quote 0
    • D Offline
      doubleT Module Developer
      last edited by doubleT Aug 3, 2018, 10:05 PM Aug 3, 2018, 10:04 PM

      Hi,

      I just saw that you already opened an issue on GitHub and answered there so that the developer get’s a notification, too.

      Meanwhile, you can edit the module yourself like this:

      Change line 103 in MMM-MQTT.js from
      valueWrapper.className = "align-right bright medium";
      to
      valueWrapper.className = "align-right bright medium " + sub.value.toLowerCase();

      provided the value is just one word, not more, the cell with the value now has a class name added that’s the same as the value, in your case ‘closed’ and you can add the following to the CSS file or your custom.css:
      .MMM-MQTT .closed { color: green; } .MMM-MQTT .open{ color: red; }

      Regards,
      Torben

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