# Simple change of gauge background color

**URL:** <https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 August 2024 17:02 UTC](https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271 "2024-08-19T17:02:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [19 August 2024 17:02 UTC](https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271/1 "2024-08-19T17:02:12Z")

</div>

I have a gauge that I need to change the background color, I have assigned a name in Styling Class properties and I have entered a template:

But when I enter the color this way, it doesn't work.

```auto
`<style>
    .temp2 {
        background-color: {{msg.payload}};
        }
</style>`

```

But if I enter it like this, it works

```auto
`<style>
    .temp2 {
        background-color: red;
        }
</style>`

```

What would be the correct way to do it?

---

<div class="post-metadata">

**Author:** ![gdziuba](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gdziuba/32/81398_2.png) [@gdziuba](https://discourse.nodered.org/u/gdziuba)\
**Post date:** [20 August 2024 13:35 UTC](https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271/2 "2024-08-20T13:35:55Z")

</div>

I'm doing a little troubleshooting. Your logic is probably working, but the page needs to be refreshed to capture the updated CSS.

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [20 August 2024 13:43 UTC](https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271/3 "2024-08-20T13:43:30Z")

</div>

I would like to pass the value from a function to animate, for example to blink (change color from red to white)

---

<div class="post-metadata">

**Author:** ![gdziuba](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gdziuba/32/81398_2.png) [@gdziuba](https://discourse.nodered.org/u/gdziuba)\
**Post date:** [20 August 2024 13:45 UTC](https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271/4 "2024-08-20T13:45:08Z")

</div>

It makes total sense. Functions like an HMI. If there is a warning, flash the background color to create awareness. I imagine there is a solution.

---

<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:** [19 September 2024 13:45 UTC](https://discourse.nodered.org/t/simple-change-of-gauge-background-color/90271/5 "2024-09-19T13:45:18Z")

</div>

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