Node red dashboard documentation

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?

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


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

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.

Oh, ok.

Something like this?

(This one may be better)

That is done with this node:

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

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

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

I am not that smart.

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 and CSS , so the learning curve might be a bit.

The hard way ...

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