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

        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

        With your input, this post could be even better 💗

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