# Node red dashboard documentation

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-documentation/53654>\
**Category:** Dashboard\
**Created:** [13 November 2021 00:00 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654 "2021-11-13T00:00:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [13 November 2021 00:00 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/1 "2021-11-13T00:00:29Z")

</div>

After trying out the carbon fiber dashboard background customization I have been looking for a document that lists the different sections you can customize in the dashboard. Does anything exist that I can look at?  
Thanks

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 November 2021 00:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/2 "2021-11-13T00:01:54Z")

</div>

I believe there is/are problems not using the _standard_ dashboard.

`node-red-dashboard`

If you have (are using) another _flavour_ (version)..... I can't help you.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [13 November 2021 00:03 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/3 "2021-11-13T00:03:30Z")

</div>

This is using the standard node red dashboard but there is apparently a code you can use to set custom background, toolbar etc. colors and backgrounds.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 November 2021 00:04 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/4 "2021-11-13T00:04:37Z")

</div>

Oh, ok.

Something like this?

 ![Screenshot from 2021-11-13 11-04-11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f42e23f0b26f0c608931459674e7b1266683c04.png)

(This one may be better)

 ![Screenshot from 2021-11-13 11-06-00](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/980cd16cebb448cc48a87fb38c11d82089f85645.jpeg)

That is done with this node:

```auto
[{"id":"c35d9a99.b28478","type":"ui_template","z":"a60eca3e.4bb198","group":"48d9dd9c.267f3c","name":"Background pictures","order":32,"width":0,"height":0,"format":"<style>\n .nr-dashboard-cardtitle {\n text-align:center;\n }\n body {\n background-image: url(\"/Pictures/metal_4.jpg\");\n background-repeat: repeat;\n }\n #HDMI_TV_control_Full_Remote,#HDMI_TV_control_Full_RemoteBest,#HDMI_TV_control_Full_Remote2,#HDMI_TV_control_Audio,#HDMI_TV_control_Navigation,#HDMI_TV_control_Playback_Ctl,#HDMI_TV_control_POWER,#HDMI_TV_control_Audio{\n background-image: url(\"/Pictures/metal_2.jpg\");\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1690,"y":60,"wires":[[]]},{"id":"48d9dd9c.267f3c","type":"ui_group","d":true,"name":"Full_Remote","tab":"b128eb09.9f681","order":1,"disp":false,"width":"3","collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","name":"HDMI_TV_control","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

And you have to change a setting here:

![Screenshot from 2021-11-13 11-08-46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c510a557c2e6dc37e0da6d088403328702e054b9.png)

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [13 November 2021 00:17 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/5 "2021-11-13T00:17:01Z")

</div>

![background](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cd2b3066974968357324d3af7b748038971bb00.jpeg)

Making a standard dashboard look like this using a css script posted by someone (@hotNipi ?) on the forum. You put it into a header like this

 ![background1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86bf306ddd49682ac3ca7a83116993e7cb1df7c6.jpeg)

to get a custom look for the dashboard  
[EDIT] so where do you get all the different areas like toolbar, card and the rest

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 November 2021 00:18 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/6 "2021-11-13T00:18:56Z")

</div>

I am not that smart.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 November 2021 07:20 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/7 "2021-11-13T07:20:02Z")

</div>

For sure there isn't any document about the HTML/CSS structure of the dashboard.  
Well, saying that - I'm completely wrong because of the dashboard itself is the document.  
But how to use that document, there is two ways. The easy way and the hard way.

The easy way is to examine the dashboard with browser developer tool and see how it is built up. It takes some knowledge of the [HTML](https://www.w3schools.com/html/html_intro.asp) and [CSS](https://www.w3schools.com/css/default.asp) , so the learning curve might be a bit.

The hard way ...

---

<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:** [13 December 2021 07:20 UTC](https://discourse.nodered.org/t/node-red-dashboard-documentation/53654/8 "2021-12-13T07:20:46Z")

</div>

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