Background colour css syntax for a disabled node

Dashboard
1

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
css code532×572 54.2 KB

2

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)

3

Here is a simplified flow for enabling / disabling the node

[
    {
        "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
    }
]
4

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.

5

The flow does work for me.

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


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

Thanks that is perfect

7

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

8

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.

9

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