# Dynamically change individual colours of On and Off ui switch Custom icons

**URL:** <https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362>\
**Category:** Dashboard\
**Created:** [8 April 2023 11:08 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362 "2023-04-08T11:08:50Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 11:08 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/1 "2023-04-08T11:08:50Z")

</div>

Based on the guidance by [jbudd](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302) I have deduced that the colour of a Custom icon can be set dynamically by passing a message to the switch node which in my example includes msg.className "SUCCESS" with a ui\_template of

```auto
<style>

    md-card.nr-dashboard-switch.SUCCESS ng-md-icon {
        color:red;  
    }
    
</style> 

```

However, this will set the colour of both the On and Off Custom icons. Is there a way to specifically address the individual Custom icons?

---

<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:** [8 April 2023 11:12 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/2 "2023-04-08T11:12:24Z")

</div>

What does the html look like when in these 2 different states? Perhaps you can use a more specific selector for the css (it depends on how the html is generated)

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 11:19 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/3 "2023-04-08T11:19:40Z")

</div>

I've looked through the html with web developer tools but I can't see anything that is specific to the individual Custom icons.

```auto
<ng-md-icon ng-if="iconType===='angular-material'" icon="face">

```

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 11:21 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/4 "2023-04-08T11:21:21Z")

</div>

In the other state the icon is "power"

---

<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:** [8 April 2023 11:32 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/5 "2023-04-08T11:32:18Z")

</div>

then there you have a difference. You can probably make a CSS selector specific to the differences.

e.g...

```auto
md-card.nr-dashboard-switch.SUCCESS ng-md-icon[icon="face"] {
    color:red;  
}

md-card.nr-dashboard-switch.SUCCESS ng-md-icon[icon="power"] {
    color:blue;  
}

```

_untested_

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 11:42 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/6 "2023-04-08T11:42:13Z")

</div>

Thanks so much, I didn't know how to make such a CSS selector. 😀

---

<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:** [8 April 2023 12:35 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/7 "2023-04-08T12:35:18Z")

</div>

You can style individual dashboard widgets using their node-id like this

```auto
[node-id="041ba93a7486200e"].SUCCESS {
    background-color: gold;
}
[node-id="041ba93a7486200e"].FAILURE {
    background-color: teal;
}

```

Use the Info tab in the right hand column to get the node ID

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f7406676fd057f9b30ff33f09490815b1d7d8b7.jpeg)

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 12:51 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/8 "2023-04-08T12:51:31Z")

</div>

Thanks, even more enlightening. The first suggestion enables one to independently set the colour of the Custom icon within the widget ui\_switch, while the second suggestion sets the colour of the widget but not the Custom icon.

Thanks again.

---

<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:** [8 April 2023 14:35 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/9 "2023-04-08T14:35:30Z")

</div>

Yes. I didn't address the icon specifically but you can change the CSS selector to refer to whatever aspect of the widget you want.  
I am sure you can combine both suggestions but without a picture of the sort of dashboard you are making I can't imagine how it would work.

Edit - determining CSS selectors.  
There may be a better way to do this, if someone knows one please enlighten me!  
Using the browser "Inspect" option you can select a screen element and see it's properties.  
Using right click, copy CSS Path.

 ![Untitled 3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c1e9826d15f0ad9742981d59ad6de227186591f.jpeg)

For the widget shown I get this

```auto
html body#nr-dashboard.nr-dashboard-theme.layout-column md-content._md.layout-column.flex section.layout-row.flex md-content._md.flex div#Tab_Demo.masonry-container ui-card-panel#Demo_demo.visible div.nr-dashboard-cardpanel.layout-column div#Demo_demo_cards.nr-dashboard-cardcontainer md-card.nr-dashboard-switch._md.layout-align-space-between-center.layout-row.HEATER.visible

```

I'm not interested in anything before md-card, so that cuts it down to

```auto
md-card.nr-dashboard-switch._md.layout-align-space-between-center.layout-row.HEATER.visible

```

Generally I keep md-card, the type of widget and my applied class and throw away the rest.

```auto
md-card.nr-dashboard-switch.HEATER

```

This is what my CSS code should target.

```auto
md-card.nr-dashboard-switch.HEATER {
border: 1px solid red;
}

```

I have found that including md-card sometimes makes the difference between needing !important or not. I don't know why.  
I am also ignorant if it makes a difference including spaces and "div." in the selector.

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 14:59 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/10 "2023-04-08T14:59:52Z")

</div>

I am controlling x3 433MHz remote control sockets via a PICO from Node Red on a raspberry Pi. Each switch can send a specific on or off code for each remote by a Http Request node. Sometimes because of local conditions the Http Request is unresponsive, resulting in several requests, while host unreachable can be picked up by an error, it is preferable that the switch can show 3 conditions, an off condition, Http Requesting, and Successfully reached. Now that I know how to set the colour of the icon, my objectives should now be attainable. Of course there is no way of knowing whether the Remote has responded, but at least one of weak links in the system is detectable.

 ![1ABF694D168544A384242BFC04AE4C37.png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2e839751fd263c2803de1577258c08f5c6235600.png)

---

<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:** [8 April 2023 15:11 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/11 "2023-04-08T15:11:59Z")

</div>

> [@PdeJ](#):
>
> Of course there is no way of knowing whether the Remote has responded

Can you request a status report from them?  
I use MQTT rather than HTTP and my smart sockets use Tasmota.  
I send a message "ON" and they (hopefully) respond "ON".  
I can also periodically send "STATUS" which returns a status message including "ON". That way the dashboard can reflect presses on the physical button on the socket.

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [8 April 2023 19:05 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/12 "2023-04-08T19:05:06Z")

</div>

The Remotes are inexpensive 433Mhz remote control socket plugs with a simple hand controller from which the signals have been decoded. So alas I am unable to request a status report.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/92b151b9e5f60424f00bd138a9265f1600ad3258.jpeg)

---

<div class="post-metadata">

**Author:** ![stefan24](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stefan24/32/23075_2.png) [@stefan24](https://discourse.nodered.org/u/stefan24)\
**Post date:** [9 April 2023 07:37 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/13 "2023-04-09T07:37:04Z")

</div>

You can get smart plugs with tasmota already pre-installed for about 12 Euro.

> **[Tasmota Steckdose NOUS A1T - Kleinste Wlan ESP8266 smart plug. 16A mini wifi...](https://www.amazon.de/Tasmota-Steckdose-NOUS-stromverbrauch-zeitschaltuhr/dp/B0BPVJMFB9)**
>
> Lernen Sie unsere neue unglaublich flexible intelligente Steckdose mit der Tasmota.Vollständig kompatibel mit dem offiziellen Tasmota OTA-ServerVorkonfigurierte Vorlage - Plug and PlayEingebauter ESP8266-Chip mit 1M FlashTasmota ist...

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [9 April 2023 09:21 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/14 "2023-04-09T09:21:43Z")

</div>

Thanks Stefan, I'll bear them in mind for future projects, but my plug sockets were bought some 15 years ago, so I am just updating their usefulness.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [10 April 2023 07:16 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/15 "2023-04-10T07:16:04Z")

</div>

I have an identical set of remote controlled UK mains switches that are in a cupboard gathering dust.  
Just interested what hardware you used to "talk" from the Pico via 433MHz to the switches?

---

<div class="post-metadata">

**Author:** ![PdeJ](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@PdeJ](https://discourse.nodered.org/u/PdeJ)\
**Post date:** [10 April 2023 12:30 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/16 "2023-04-10T12:30:22Z")

</div>

Hi Dave, the 433Mhz transmitter (FS1000A) and receiver (MX-RM-5V) modules are widely available online. In 2020 I paid less than £6 for thee pairs of modules. The recievers are needed to initially decode the 433 Mhz signals from the hand controller for the socket plugs. I've used them on PICO WH, and on a Pi Zero WH. The range of the transmitter on the Zero seems better than that on the PICO, whether due to individual pecularities of the modules or the raspberry devices. On both devices the transmitter modules are powered by the 5v output. No additional antennas used, but transmits through exterior/interior walls without issue using either the PICO or Pi Zero

The software I used on the PICO to decode and transmit 433 Mhz signals : [pico433mhz/src at main · AdrianCX/pico433mhz · GitHub](https://github.com/AdrianCX/pico433mhz/tree/main/src) and more info at  
[GitHub - AdrianCX/pico433mhz: Simple raspberry pi pico 433mhz receiver/transmitter controlled via http](https://github.com/AdrianCX/pico433mhz)

and for the the Pi Zero [GitHub - ninjablocks/433Utils: 433Kit is a collection of code and documentation designed to assist you in the connection and usage of RF 433MHz transmit and receive modules to/with your Arduino and Rapberry Pi.](https://github.com/ninjablocks/433Utils)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [10 April 2023 12:40 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/17 "2023-04-10T12:40:24Z")

</div>

Thanks - I'll look into these documents.

---

<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:** [24 April 2023 12:40 UTC](https://discourse.nodered.org/t/dynamically-change-individual-colours-of-on-and-off-ui-switch-custom-icons/77362/18 "2023-04-24T12:40:27Z")

</div>

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