# How to use the class property in the TreeList widget

**URL:** <https://discourse.nodered.org/t/how-to-use-the-class-property-in-the-treelist-widget/30717>\
**Category:** Developing Nodes\
**Created:** [26 July 2020 09:15 UTC](https://discourse.nodered.org/t/how-to-use-the-class-property-in-the-treelist-widget/30717 "2020-07-26T09:15:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [26 July 2020 09:15 UTC](https://discourse.nodered.org/t/how-to-use-the-class-property-in-the-treelist-widget/30717/1 "2020-07-26T09:15:11Z")

</div>

Hi,

I believe this is a simple question for somebody with more knowledge in css as I have.

I use the TreeList widget in one of my custom nodes:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/1922c1de49cc1ea201f23185191179d2f96cb3a2.png)

Now I like to highlight certain elements/lines by changing the background color for example (indicate offline devices or miss configured properties.

I think it should be possible by the `class` property, but how?

Chris

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [26 July 2020 15:54 UTC](https://discourse.nodered.org/t/how-to-use-the-class-property-in-the-treelist-widget/30717/2 "2020-07-26T15:54:39Z")

</div>

After learning something new ... It is actually quite easy

Define the style(s) in your node.html

```auto
   <style>
      .homie-ready {
        background-color: #1f7a1f;
      }
      .homie-lost {
        background-color: #AD1625;
      }
      .homie-sleeping {
        background-color: #4682B4;
      }
      .homie-init {
        background-color: #66CDAA;
      }
      .homie-disconnected {
        background-color: #696969;
      }
      .homie-alert {
        background-color: #FFFF00;
      }
      .homie-undefined {
        background-color: #ffcc00;
      }
    </style>

```

```auto
class: `homie-${device.$state}`

```

---

<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 September 2020 15:54 UTC](https://discourse.nodered.org/t/how-to-use-the-class-property-in-the-treelist-widget/30717/3 "2020-09-24T15:54:41Z")

</div>

Closed on 24 September 2020 15:54 UTC

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