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

      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

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