# Widget background color transparant v2.0.3

**URL:** https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915
**Category:** Dashboard
**Created:** [26 July 2021 10:43 UTC](https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915 "2021-07-26T10:43:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)
#### Post date: [26 July 2021 10:43 UTC](https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915/1 "2021-07-26T10:43:08Z")

</div>

Hi!

I build a dashboard in the past with transparent widgets  
Now just updated 2.0.3 and dashboard to 2.30.0  
And now my widgets have a background color back from the template

The code that was working is below, any idea how i can get the background of the widget transparant again?

```auto
<html>

<head>
    <style>
            body {
            background-color: black; 
        }

		        .typewriterbig {
            color: #FFFFFF;
            font-size: 45px;
            font-family: "Veteran Typewriter";
            background-color: black;
            text-align: center;

			vertical-align: middle;
			border-color: rgba(62,232,182,1);;
            padding: 5px 10px 5px 10px;
            margin-top:10px;
            border-style: solid;
            border-radius: 5px;

			
		}
    </style>

</head>

<body>
    <span class="typewriterbig">{{msg.payload}}</span>
</body>

</html>

```

---

<div class="post-metadata">

### Author: ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)
#### Post date: [26 July 2021 10:50 UTC](https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915/2 "2021-07-26T10:50:05Z")

</div>

Found this in the dashboard info but have no idea how to use it

> **[node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard)**
>
> A set of dashboard nodes for Node-RED

- --nr-dashboard-widgetBgndColor

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [26 July 2021 12:06 UTC](https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915/3 "2021-07-26T12:06:19Z")

</div>

Do you want all widgets transparent or just one?

This will style all widgets on the tab (you might want to adjust my rgb selection and transparency!) :  
body.nr-dashboard-theme md-content md-card {  
background-color: rgba(102,0,51,.7);  
}

Note, I use the standard dashboard with a template node for any CSS tweeks. The template type is "widget in group" now "added to site head section". So I don't know if it's relevant since you have real HTML on your template(?)

This is my template

```auto
<style id="dashboard-style-override">
 body.nr-dashboard-theme md-content md-card {
    background-color: rgba(102,0,51,.75);
 } 
</style>

```

---

<div class="post-metadata">

### Author: ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)
#### Post date: [26 July 2021 12:08 UTC](https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915/4 "2021-07-26T12:08:12Z")

</div>

All would be great!  
Thanks a lot for helping me out!

---

<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: [25 August 2021 12:08 UTC](https://discourse.nodered.org/t/widget-background-color-transparant-v2-0-3/48915/5 "2021-08-25T12:08:50Z")

</div>

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