Change individual switch node background

This quest literally took me several hours and had no answer yet. So any expert help will be appreciated :grinning_face_with_smiling_eyes:

I know how to change the background color of all switch nodes. Please see the following codes. But how to change the background of only the first switch? For example, I only want the background color of the first switch node to be blue. Also how to adjust the switch on icon color? say "yellow". A blue color will match the blue background, which makes the icon invisible.

[{"id":"a7dc7375.637e7","type":"tab","label":"Front page","disabled":false,"info":""},{"id":"1291743b.51e81c","type":"ui_template","z":"a7dc7375.637e7","group":"f3ec2f64.0002b","name":"Dashboard stylesheet","order":2,"width":0,"height":0,"format":"<style>\n\n\n.nr-dashboard-cardcontainer {\n    position: relative;\n    box-shadow: inset 0px 1px 4px 0px #000000bb;\n    border-radius: 15px;\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n    text-align: center;\n}\n\n.nr-dashboard-theme ui-card-panel {\n    background-color: #33333300;\n    color:var(--color-text-primary);\n    border-radius: 15px;\n    box-shadow: 0 0 8px 0px #00000080;\n}\n\n.nr-dashboard-theme .nr-dashboard-switch\n{\n    background-color: blue;\n    \n}\n\n\n}\n\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","className":"","x":420,"y":220,"wires":[[]]},{"id":"0ab453bf682588e6","type":"ui_switch","z":"a7dc7375.637e7","name":"","label":"switch1","tooltip":"","group":"fec8f8edc161fab6","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":700,"y":300,"wires":[[]]},{"id":"d2ed8c9e92205bf3","type":"ui_switch","z":"a7dc7375.637e7","name":"","label":"switch2","tooltip":"","group":"fec8f8edc161fab6","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":690,"y":380,"wires":[[]]},{"id":"10e2634d7295409e","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":1,"width":6,"height":1},{"id":"85e8c732733be5ca","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":2,"width":6,"height":1},{"id":"34f5f518f177102b","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":5,"width":6,"height":1},{"id":"f6616c0d542e132e","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":6,"width":6,"height":1},{"id":"3404ca931615dbfa","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":9,"width":6,"height":1},{"id":"89a27f9b039dc658","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":10,"width":6,"height":1},{"id":"15f5b9ac8b9fca4f","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":11,"width":6,"height":1},{"id":"c08fd3e40481d5c3","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":12,"width":6,"height":1},{"id":"7f76f425fbf469d1","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":13,"width":6,"height":1},{"id":"914de2abe2070bc8","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":1,"width":6,"height":1},{"id":"0243808b3d15475a","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":2,"width":6,"height":1},{"id":"24b87ccef8058589","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":5,"width":6,"height":1},{"id":"c27fe91457dafe01","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":6,"width":6,"height":1},{"id":"7ab8e9f8e2a9e23d","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":9,"width":6,"height":1},{"id":"695d0dcec9ad5d8d","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":10,"width":6,"height":1},{"id":"08ae27c657b12b03","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":11,"width":6,"height":1},{"id":"b1a09324f00f197b","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":12,"width":6,"height":1},{"id":"f0a3e0a477f56c6d","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"","order":13,"width":6,"height":1},{"id":"a97144da467f4772","type":"ui_spacer","z":"a7dc7375.637e7","name":"spacer","group":"61bcd8de.0f4198","order":2,"width":1,"height":1},{"id":"f3ec2f64.0002b","type":"ui_group","name":"hidden_group","tab":"eb23617d.c1c4e","order":1,"disp":false,"width":"6","collapse":false},{"id":"fec8f8edc161fab6","type":"ui_group","name":"test","tab":"39de3350.dc591c","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"eb23617d.c1c4e","type":"ui_tab","name":"Widgets","icon":"dashboard","order":13,"disabled":false,"hidden":true},{"id":"39de3350.dc591c","type":"ui_tab","name":"Home","icon":"home","order":1,"disabled":false,"hidden":false}]

test

With latest dashboard you can add additional classes for dashboard widgets so you can take control over widgets internal elements also with ease.

[
    {
        "id": "cac52ea441a821f7",
        "type": "ui_template",
        "z": "e490bfdba10fb48a",
        "group": "922cc2b20a87f647",
        "name": "CSS",
        "order": 5,
        "width": 0,
        "height": 0,
        "format": "<style id=\"switch-css\">\n    .switch-blue{\n        background:blue !important;\n    }\n    .switch-blue > md-switch .md-thumb{\n        background:yellow !important; \n    }\n    .switch-blue > md-switch.md-checked .md-thumb{\n        background: orange !important;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 340,
        "y": 780,
        "wires": [
            []
        ]
    },
    {
        "id": "e6c7a547060de1fa",
        "type": "ui_switch",
        "z": "e490bfdba10fb48a",
        "name": "",
        "label": "switch 1",
        "tooltip": "",
        "group": "922cc2b20a87f647",
        "order": 6,
        "width": 0,
        "height": 0,
        "passthru": true,
        "decouple": "false",
        "topic": "topic",
        "topicType": "msg",
        "style": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "",
        "oncolor": "yellow",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "",
        "offcolor": "orange",
        "animate": false,
        "className": "switch-blue",
        "x": 350,
        "y": 830,
        "wires": [
            []
        ]
    },
    {
        "id": "fdeeeef30f4d0df3",
        "type": "ui_switch",
        "z": "e490bfdba10fb48a",
        "name": "",
        "label": "switch 2",
        "tooltip": "",
        "group": "922cc2b20a87f647",
        "order": 6,
        "width": 0,
        "height": 0,
        "passthru": true,
        "decouple": "false",
        "topic": "topic",
        "topicType": "msg",
        "style": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "",
        "oncolor": "",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "",
        "offcolor": "",
        "animate": false,
        "className": "",
        "x": 350,
        "y": 880,
        "wires": [
            []
        ]
    },
    {
        "id": "922cc2b20a87f647",
        "type": "ui_group",
        "name": "Default",
        "tab": "b15d581341d0093f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b15d581341d0093f",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
1 Like

Great features. Thanks!

Oh yes :slight_smile: No more boring switches :upside_down_face:

image

3 Likes

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