# The colour in/on this isn't changing. (CSS)

**URL:** <https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639>\
**Category:** Dashboard\
**Created:** [10 March 2022 08:11 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639 "2022-03-10T08:11:09Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2022 08:27 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/2 "2022-03-10T08:27:45Z")

</div>

Use CSS classes...

![chrome_4Df5lPLPQT](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d7d1e7f8f78444efc1e5640d3a8a1a043a1c19d2.gif)

```auto
[
    {
        "id": "d9c05df8e5f12ca0",
        "type": "ui_text",
        "z": "7c13b8452619581b",
        "group": "924a2dc07ecdd1a4",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "group1",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "lime-text",
        "x": 1534,
        "y": 304,
        "wires": []
    },
    {
        "id": "8e80beb59e380f96",
        "type": "ui_text",
        "z": "7c13b8452619581b",
        "group": "924a2dc07ecdd1a4",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "group1",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "lime-text",
        "x": 1534,
        "y": 256,
        "wires": []
    },
    {
        "id": "58d9e91c3691c384",
        "type": "inject",
        "z": "7c13b8452619581b",
        "name": "className=lime-text",
        "props": [
            {
                "p": "className",
                "v": "lime-text",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 1354,
        "y": 256,
        "wires": [
            [
                "d9c05df8e5f12ca0",
                "8e80beb59e380f96"
            ]
        ]
    },
    {
        "id": "e079ac245b22b6e2",
        "type": "inject",
        "z": "7c13b8452619581b",
        "name": "className=red-text",
        "props": [
            {
                "p": "className",
                "v": "red-text",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 1354,
        "y": 304,
        "wires": [
            [
                "8e80beb59e380f96",
                "d9c05df8e5f12ca0"
            ]
        ]
    },
    {
        "id": "29b425b84283b9f2",
        "type": "ui_template",
        "z": "7c13b8452619581b",
        "group": "81dd3718.b97888",
        "name": "head styles",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style id=\"text-colours\">\n .lime-text {\n color: lime !important;\n }\n .red-text {\n color: red !important;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 1510,
        "y": 208,
        "wires": [
            []
        ]
    },
    {
        "id": "924a2dc07ecdd1a4",
        "type": "ui_group",
        "name": "group1",
        "tab": "9e1ed5e519ff655f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "81dd3718.b97888",
        "type": "ui_group",
        "name": "Active Alarms",
        "tab": "4e11db25.239e94",
        "order": 1,
        "disp": true,
        "width": 13,
        "collapse": true
    },
    {
        "id": "9e1ed5e519ff655f",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 39,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "4e11db25.239e94",
        "type": "ui_tab",
        "name": "Alarms Monitiring",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

_[View the full topic](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639)._