# Switch node backround

**URL:** <https://discourse.nodered.org/t/switch-node-backround/35655>\
**Category:** Dashboard\
**Created:** [10 November 2020 07:59 UTC](https://discourse.nodered.org/t/switch-node-backround/35655 "2020-11-10T07:59:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![niclas.w82](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/niclas.w82/32/31813_2.png) [@niclas.w82](https://discourse.nodered.org/u/niclas.w82)\
**Post date:** [10 November 2020 07:59 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/1 "2020-11-10T07:59:00Z")

</div>

Hi.

Is it possible to change the backround colour dynamicly for a switch node depending the input?

/Niclas

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 November 2020 14:52 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/2 "2020-11-10T14:52:37Z")

</div>

when yo say "switch node" are you talking about the node in the editor, or the ui-switch in the dashboard?

For the dashboard, take a look at this for things you can change: [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

---

<div class="post-metadata">

**Author:** ![niclas.w82](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/niclas.w82/32/31813_2.png) [@niclas.w82](https://discourse.nodered.org/u/niclas.w82)\
**Post date:** [10 November 2020 20:10 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/3 "2020-11-10T20:10:41Z")

</div>

Hi Im talking about the ui-switch. Can't se any property's to change bgcolor for this type in the link you posted.

Best regards Niclas

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 November 2020 20:20 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/4 "2020-11-10T20:20:05Z")

</div>

There is 3 elements in switch where background color can be changed.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d79e4c6948bfbfbef06fa4155af17156b4fce5f9.png)

All of them can be changed by overriding dashboard CSS using `ui_template` nodef  
You can find basics from this thread [🖌 Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139)

---

<div class="post-metadata">

**Author:** ![niclas.w82](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/niclas.w82/32/31813_2.png) [@niclas.w82](https://discourse.nodered.org/u/niclas.w82)\
**Post date:** [11 November 2020 21:23 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/5 "2020-11-11T21:23:10Z")

</div>

Thanks.

Have read a lot about css and have tested to change background in chrome developer tools.  
But I don't understand haw I change backroad in the ui template?

Can someone give me an example how I use a template node to change background color for a ui-switch

/Niclas

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 November 2020 22:01 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/6 "2020-11-11T22:01:54Z")

</div>

Try this

```auto
md-card.nr-dashboard-switch{
        background-color:red !important;
    }

```

---

<div class="post-metadata">

**Author:** ![niclas.w82](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/niclas.w82/32/31813_2.png) [@niclas.w82](https://discourse.nodered.org/u/niclas.w82)\
**Post date:** [11 November 2020 22:33 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/7 "2020-11-11T22:33:18Z")

</div>

Thanks. Will try this tomorrow.

/Niclas

---

<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 December 2020 22:33 UTC](https://discourse.nodered.org/t/switch-node-backround/35655/8 "2020-12-11T22:33:20Z")

</div>

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