# Dashboard CSS styles. How to make the dashboard more beautiful

**URL:** <https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [20 October 2022 17:20 UTC](https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342 "2022-10-20T17:20:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marty1982](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marty1982/32/20162_2.png) [@Marty1982](https://discourse.nodered.org/u/Marty1982)\
**Post date:** [20 October 2022 17:20 UTC](https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342/1 "2022-10-20T17:20:55Z")

</div>

Hi all!

I'm not CSS advance guy or even HTML. I have a basic dashboard but now i want to apply some beautiness and make it more professional.  
So, i have this:

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

The flow:

```auto
[{"id":"7a6ff22b974e055f","type":"ui_text","z":"5c42798006c66cf9","g":"ccbf2129b303602d","group":"1d266853227f9eaa","order":3,"width":0,"height":0,"name":"nombre bot","label":"Nombre bot:","format":"prueba css","layout":"row-left","className":"main-title-content no-gap","x":150,"y":4380,"wires":[]},{"id":"1d266853227f9eaa","type":"ui_group","name":"Group 1","tab":"f3c2ae232b121330","order":1,"disp":true,"width":"6","collapse":true,"className":""},{"id":"f3c2ae232b121330","type":"ui_tab","name":"prueba css estilos","icon":"dashboard","order":21,"disabled":false,"hidden":false}]

```

Ideas?.

- Animated collapsable groups
- Rounded boxes
- A cool background

Thanks a lot!

---

<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:** [20 October 2022 18:44 UTC](https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342/2 "2022-10-20T18:44:16Z")

</div>

Please have a look at the documentation. There are pre-defined themes and you can roll your own.

---

<div class="post-metadata">

**Author:** ![Marty1982](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marty1982/32/20162_2.png) [@Marty1982](https://discourse.nodered.org/u/Marty1982)\
**Post date:** [20 October 2022 19:44 UTC](https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342/3 "2022-10-20T19:44:04Z")

</div>

Ok!.

can you link the docs?.

Regards!

---

<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:** [20 October 2022 20:10 UTC](https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342/4 "2022-10-20T20:10:35Z")

</div>

[https://www.google.com/search?q=node-red+dashboard+themes&oq=node-red+dashboard+themes](https://www.google.com/search?q=node-red+dashboard+themes&oq=node-red+dashboard+themes)

---

<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:** [8 November 2022 13:06 UTC](https://discourse.nodered.org/t/dashboard-css-styles-how-to-make-the-dashboard-more-beautiful/69342/5 "2022-11-08T13:06:19Z")

</div>

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