Highlight dashboard groups by colour

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 :neutral_face:

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

My code in the template node is:

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

I would be very happy if someone could help me :smiling_face_with_three_hearts: :smiling_face:

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.

[{"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}]

2 Likes

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