# Changing background of any widget

**URL:** <https://discourse.nodered.org/t/changing-background-of-any-widget/30005>\
**Category:** FAQs\
**Created:** [13 July 2020 14:21 UTC](https://discourse.nodered.org/t/changing-background-of-any-widget/30005 "2020-07-13T14:21:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [13 July 2020 14:21 UTC](https://discourse.nodered.org/t/changing-background-of-any-widget/30005/1 "2020-07-13T14:21:23Z")

</div>

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.

 ![sample.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/707e6506fb4f5790aa9a9aa98e86b4beaa418f3d.jpeg)

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

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [15 July 2020 05:12 UTC](https://discourse.nodered.org/t/changing-background-of-any-widget/30005/2 "2020-07-15T05:12:59Z")

</div>

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

 ![test.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2ab6faead8f2e5ced5d4e0af95116581005e251e.jpeg)

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](https://discourse.nodered.org/t/customize-dashboard-css/23139) to his post.

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

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

```

---

<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:** [29 July 2020 05:13 UTC](https://discourse.nodered.org/t/changing-background-of-any-widget/30005/3 "2020-07-29T05:13:06Z")

</div>

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