How do I change the text size, color, and background color for a dashboard text node?

[Joshua Abramson]

I am using a Timeout Node that will change the payload to Online, Warning, Missing and I would like the Text node to change text size, color, and background color for each payload. i.e.


Online - Normal text size, color, and background

Warning - text size 16, text color black, background color yellow

Missing - text size 24, text color white, background color red

I'm sorry that I cannot figure this out from what I've found. Any direction will help.

[
    {
        "id": "e40a942a.2604c",
        "type": "timeout",
        "z": "8f05a0cb.dae41",
        "name": "Node Timeout",
        "outtopic": "State",
        "outsafe": "Online",
        "outwarning": "Warning",
        "outunsafe": "Missing",
        "warning": "120",
        "timer": "600",
        "repeat": true,
        "again": false,
        "x": 1000,
        "y": 260,
        "wires": [
            [
                "ad36d3c9.275e08"
            ]
        ]
    },
    {
        "id": "ad36d3c9.275e08",
        "type": "ui_text",
        "z": "8f05a0cb.dae41",
        "group": "e8c2579d.6d3628",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "ASOS Status",
        "label": "ASOS Status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "x": 1240,
        "y": 259,
        "wires": []
    },
    {
        "id": "e8c2579d.6d3628",
        "type": "ui_group",
        "z": "",
        "name": "Triggers",
        "tab": "d6a227d2.c0b92",
        "order": 3,
        "disp": true,
        "width": "6"
    },
    {
        "id": "d6a227d2.c0b92",
        "type": "ui_tab",
        "z": "",
        "name": "ASOS",
        "icon": "dashboard"
    }
]

[thebesti...@gmail.com]

I would use a Template node instead of a Text node:

<div id="msg" ng-bind-html="msg.payload" ng-class="{warning: msg.payload == 'Warning', missing: msg.payload == 'Missing'}"></div>

<style>

    #msg * {

        display:table-cell;

        vertical-align: text-top;

    }

    .warning {

        font-size: 16px;

        color: #FFF;

        background-color: #FF0;

    }

    

    .missing {

        font-size: 24px;

        color: #FFF;

        background-color: #F00;        

    }

    

</style>