# Background colour css syntax for a disabled node

**URL:** https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465
**Category:** Dashboard
**Created:** [13 July 2026 11:16 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465 "2026-07-13T11:16:48Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Lapgoch](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@Lapgoch](https://discourse.nodered.org/u/Lapgoch)
#### Post date: [13 July 2026 11:16 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/1 "2026-07-13T11:16:48Z")

</div>

Hi.  
I cant figure out the correct syntax to change the background colour of a template button node when it is disabled.  
I can change its properties when it is enabled.  
Attached is my CSS code for the button.  
Is it possible to change CSS properties for a disabled node?

 ![css code](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/7682094ae12a7dd3806c360e8e49c6f52339975b.jpeg)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [13 July 2026 12:05 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/2 "2026-07-13T12:05:47Z")

</div>

Can you clarify which button you are trying to style? Is this a button in a Node-RED Dashboard (v1 or v2?) or a button attached to a node in the editor (like the Inject/Debug nodes have)

---

<div class="post-metadata">

### Author: ![Lapgoch](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@Lapgoch](https://discourse.nodered.org/u/Lapgoch)
#### Post date: [13 July 2026 12:42 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/3 "2026-07-13T12:42:31Z")

</div>

Here is a simplified flow for enabling / disabling the node

```auto
[
    {
        "id": "71e7c939038b103a",
        "type": "tab",
        "label": "Flow 6",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "bc644d687248fca8",
        "type": "function",
        "z": "71e7c939038b103a",
        "name": "Enable - Disable",
        "func": "\n\n// Check if the device ping is good or bad\nif (msg.payload == true){\n msg.enabled = true\n msg.background = \"cyan\"\n}\nelse {\n msg.enabled = false\n msg.background = \"white\"\n}\n\n// Save the device button text\nmsg.topic = \"myButton\";\n \nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 240,
        "wires": [
            [
                "40e4f943f8620e25"
            ]
        ]
    },
    {
        "id": "40e4f943f8620e25",
        "type": "ui_template",
        "z": "71e7c939038b103a",
        "group": "7491094c2573df91",
        "name": "Centre 1",
        "order": 3,
        "width": "4",
        "height": "1",
        "format": "\n<md-button class=\"devButton\" ng-click=\"send({payload: 'on'})\"> \n {{msg.topic}}\n</md-button> \n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 540,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "13d3b57084692505",
        "type": "inject",
        "z": "71e7c939038b103a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 210,
        "y": 200,
        "wires": [
            [
                "bc644d687248fca8"
            ]
        ]
    },
    {
        "id": "5b503b80df270066",
        "type": "inject",
        "z": "71e7c939038b103a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "false",
        "payloadType": "bool",
        "x": 210,
        "y": 280,
        "wires": [
            [
                "bc644d687248fca8"
            ]
        ]
    },
    {
        "id": "7491094c2573df91",
        "type": "ui_group",
        "name": "Home Automation",
        "tab": "5aa37e9ba7e53bc9",
        "order": 1,
        "disp": true,
        "width": 6,
        "collapse": false,
        "className": ""
    },
    {
        "id": "5aa37e9ba7e53bc9",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 5,
        "disabled": false,
        "hidden": true
    }
]

```

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [13 July 2026 16:21 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/4 "2026-07-13T16:21:57Z")

</div>

I see this is a the old dashboard (dashboard 1) which is now deprecated.

I no longer use the old dashboard, but the docs do not suggest that msg.enabled works for a D1 template, and your flow does not seem to work for me, the button is not being disabled.

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [13 July 2026 17:08 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/5 "2026-07-13T17:08:36Z")

</div>

The flow does work for me.

This template specifies a button whose background colour is grey when disabled:

```auto

<md-button class="devButton" ng-click="send({payload: 'on'})"> 
    {{msg.topic}}
</md-button> 

<style>
    .nr-dashboard-disabled button.md-button.devButton {
        background-color: slategrey;
    }
</style>

```

---

<div class="post-metadata">

### Author: ![Lapgoch](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@Lapgoch](https://discourse.nodered.org/u/Lapgoch)
#### Post date: [13 July 2026 17:26 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/6 "2026-07-13T17:26:17Z")

</div>

> [@jbudd](#):
>
> ```auto
> .nr-dashboard-disabled button.md-button.devButton {
> background-color: slategrey;
> 
> ```

Thanks that is perfect

---

<div class="post-metadata">

### Author: ![Lapgoch](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@Lapgoch](https://discourse.nodered.org/u/Lapgoch)
#### Post date: [13 July 2026 18:18 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/7 "2026-07-13T18:18:47Z")

</div>

How did you manage to find that was the required syntax?

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [13 July 2026 18:35 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/8 "2026-07-13T18:35:26Z")

</div>

My method is very arbitrary and unsatisfactory. I have no doubt at all that there is a simpler way to do it.

I use Firefox Dev Tools - right click/inspect.

Then I highlight the button HTML in the Inspector tab. I think it has to be enabled or you can't find it with the "Pick an element from the page" button.

I would show you a screen capture but I've moved to Linux and screen captures are \*\*\*\*\*\* EXPLETIVE DELETED \*\*\*\*\*\*

Then right click, copy, copy CSS Path.  
Paste into a notepad file, delete everything to the left of the class that contains "disabled" and anything to the right which looks unnecessary.  
Then it's a case of experimenting.  
I always start any tweek with a colour change. If it does not manifest even with !important then the CSS declaration needs to be more specific.

---

<div class="post-metadata">

### Author: ![Lapgoch](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@Lapgoch](https://discourse.nodered.org/u/Lapgoch)
#### Post date: [13 July 2026 21:03 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/9 "2026-07-13T21:03:12Z")

</div>

Thankyou.  
I was trying the same with Chrome dev tools, but never worked it out.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [11 September 2026 21:03 UTC](https://discourse.nodered.org/t/background-colour-css-syntax-for-a-disabled-node/101465/10 "2026-09-11T21:03:30Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.