Changing background of any widget

Okay, I'm a newbie to this forum. But i think i found out something which i have been looking for a while.
I can see things change but i cannot implement this or i don't know where this needs to be done.

I manually added or figured out how to make all widgets transparent.
How do I do this from the Node Red Dashboard end?

Obviously, if the page reloads, it defaults back to the black background. Any help appretiated

Okay. Its all in the stylesheet.
I managed to change my page to look like this.

If anyone is interested in knowing how i did it, I used a template node. I followed another guy who had a post on custom stylesheet, here's the link to his post.

Here's my template node for those interested.
Thought i'd share this and close this discussion

[{"id":"ec59b076.d8389","type":"ui_template","z":"6af0f382.7eae1c","group":"d7d53078.9580c","name":"Tab Stylesheet","order":1,"width":0,"height":0,"format":"<style>\n\n:root {\n  --color-green-primary: rgb(51, 204, 51);\n  --color-green-secondary: rgb(26, 101, 26);\n  --color-red-primary: rgb(255, 0, 0);\n  --color-red-secondary: rgba(153,0,0,1);\n  --color-gray-primary:rgba(40,40,40,1);\n  --color-gray-secondary:rgba(65,65,65,1);\n  --color-text-primary: rgb(230, 226, 209);\n  --color-widget-border: rgb(84, 78, 78);\n}\n\nbody {\n  background-image: url(https://images.hdqwalls.com/wallpapers/raspberry-pi-logo-h0.jpg);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n#Control_Panel_System {\n  background: transparent;\n  border: transparent; \n}\n\nbody.nr-dashboard-theme md-content md-card {\n    background-color: #33333300;\n    color: #ffffff;\n    text-shadow: 4px 2px 4px #00000045;\n    box-shadow: 0 -1px 5px 1px #00000045;\n    border-radius: 12px;\n    border: 1px solid var(--color-widget-border);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":220,"y":80,"wires":[[]]},{"id":"d7d53078.9580c","type":"ui_group","z":"","name":"System","tab":"b0c27d05.c92f7","order":1,"disp":true,"width":30,"collapse":false},{"id":"b0c27d05.c92f7","type":"ui_tab","z":"","name":"Control Panel","icon":"fa-cogs","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.