# Condition in CSS style (text node)

**URL:** <https://discourse.nodered.org/t/condition-in-css-style-text-node/53041>\
**Category:** Dashboard\
**Created:** [1 November 2021 07:31 UTC](https://discourse.nodered.org/t/condition-in-css-style-text-node/53041 "2021-11-01T07:31:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [1 November 2021 07:31 UTC](https://discourse.nodered.org/t/condition-in-css-style-text-node/53041/1 "2021-11-01T07:31:53Z")

</div>

Hi,  
I found in forum this code to set background color of a text node

```auto
<style>
[node-id="9a6b2f8.2010d5"] {
    background-color: red !important;
}
</style>

```

Can I insert a condition to have the background-color = red only if the text is ON or a global variable is ON (better)?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 November 2021 12:19 UTC](https://discourse.nodered.org/t/condition-in-css-style-text-node/53041/2 "2021-11-01T12:19:26Z")

</div>

It somewhat depends on the browser. But in general, yes, you can do that. However, in your example, you are missing a leading `#` or `.` - presumable a `#` as it looks like an ID. Of course, you will have to use the dev tools in your browser to find a suitable 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:** [1 November 2021 14:49 UTC](https://discourse.nodered.org/t/condition-in-css-style-text-node/53041/3 "2021-11-01T14:49:12Z")

</div>

With Dashboard v3 you can use msg.className to set a custom class for the node.

So you need a template node with a little CSS

```auto
<style>
md-card.nr-dashboard-text.on {
    background-color: red;
}
md-card.nr-dashboard-text.off {
    background-color: slategrey;
}
</style>

```

Then when you send some text to the node, also set msg.className to "on" or "off".  
You can do that based on the contents of msg.payload or a context variable as you wish, using a Function or Change node.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [1 November 2021 15:21 UTC](https://discourse.nodered.org/t/condition-in-css-style-text-node/53041/4 "2021-11-01T15:21:36Z")

</div>

I just tried and it's works fine.  
Thank you .....

---

<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:** [15 November 2021 15:22 UTC](https://discourse.nodered.org/t/condition-in-css-style-text-node/53041/5 "2021-11-15T15:22:05Z")

</div>

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