# Highlight dashboard groups by colour

**URL:** <https://discourse.nodered.org/t/highlight-dashboard-groups-by-colour/75107>\
**Category:** Dashboard\
**Created:** [13 February 2023 10:42 UTC](https://discourse.nodered.org/t/highlight-dashboard-groups-by-colour/75107 "2023-02-13T10:42:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiki](https://avatars.discourse-cdn.com/v4/letter/k/dc4da7/32.png) [@kiki](https://discourse.nodered.org/u/kiki)\
**Post date:** [13 February 2023 10:42 UTC](https://discourse.nodered.org/t/highlight-dashboard-groups-by-colour/75107/1 "2023-02-13T10:42:50Z")

</div>

Hey,  
I would like to customise the background colour of dashboard groups individually. With template I was able to change the complete background colour, but I did not manage to change the colour of one group 😐

I would like that it looks like this (now modified with paint), that some groups have a grey background, but now all groups have a white background color:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f21da7e47bb2071841baeefa2380401db7219c1.png)

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

My code in the template node is:

```auto
<script>
      $("#nr-dashboard").css("background","#"+"dddddd");
      $("#Simulation_Zuluftventilator_%").css("background-color","#"+"abcdef");
</script>

```

I would be very happy if someone could help me 🥰 ☺

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [13 February 2023 11:34 UTC](https://discourse.nodered.org/t/highlight-dashboard-groups-by-colour/75107/2 "2023-02-13T11:34:33Z")

</div>

Set a class in the dashboard group config and all widgets added to that group.  
then target that class in the template node.  
e.g.

```auto
[{"id":"44bf512856b51b80","type":"ui_text_input","z":"da8a6ef0b3c9a5c8","name":"","label":"","tooltip":"","group":"2d4fe667.28f8ba","order":19,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":280,"y":2060,"wires":[[]]},{"id":"91edf04cb6a9789d","type":"ui_template","z":"da8a6ef0b3c9a5c8","group":"df9e6e5bb122050f","name":"","order":20,"width":0,"height":0,"format":"<style>\n .background_demo_g2{\n background-color: red !important;}\n</style>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":2020,"wires":[[]]},{"id":"2ab4182058b052c5","type":"ui_text_input","z":"da8a6ef0b3c9a5c8","name":"","label":"","tooltip":"","group":"df9e6e5bb122050f","order":19,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"background_demo_g2","topicType":"msg","x":520,"y":2080,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"df9e6e5bb122050f","type":"ui_group","name":"Group 2","tab":"1caa8458.b17814","order":2,"disp":true,"width":"6","collapse":false,"className":"background_demo_g2"},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_1676288159690](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d81ce75deb29b7ffdc39cfa39966b193e1e566e.png)

---

<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:** [27 February 2023 12:41 UTC](https://discourse.nodered.org/t/highlight-dashboard-groups-by-colour/75107/4 "2023-02-27T12:41:55Z")

</div>

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