# Transparent background on md-card in template node

**URL:** https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384
**Category:** Dashboard
**Created:** [23 April 2020 19:35 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384 "2020-04-23T19:35:40Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [23 April 2020 19:35 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/1 "2020-04-23T19:35:40Z")

</div>

As subject, I want a transparent background on md-card (ie the group), somehow I am not able to force it, I see `body.nr-dashboard-theme md-content md-card` getting a background color.

Can I set it to transparent somehow using jquery once template/tab is loaded ? I am having a hard time to grasp which class to set to transparent. Note I only want this on 1 particular tab, not on all.

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 April 2020 18:18 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/2 "2020-04-24T18:18:17Z")

</div>

Perhaps adding this rule in the CSS style ?

#chart {  
background-color:blue;  
}

---

<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: [24 April 2020 18:29 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/3 "2020-04-24T18:29:31Z")

</div>

This is how the id of card is created

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b48b790b22af23ca433855b11fbbebb8bba2e11c.png)

```auto
#TEST_HOME {
   background-color: #cccccc00;
}

```

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 April 2020 18:36 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/4 "2020-04-24T18:36:51Z")

</div>

Considering the [specific use case](https://discourse.nodered.org/t/dynamic-network-map/25406) from @bakman2 this solution will not produce what he wants to achieve.

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [24 April 2020 18:38 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/5 "2020-04-24T18:38:05Z")

</div>

Yes, I tried `#Network_Network` but it somehow gets overwritten (I think by angular).

I cannot get rid of the background color on the right.

 ![Screenshot 2020-04-24 at 20.36.12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9c791efa63d824c5082fceedc02e7756046cd76.jpeg)

The goal

 ![Screenshot 2020-04-24 at 20.40.25](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/825d7c17fbac0efc599f075a88e37f2a5ade550c.jpeg)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [24 April 2020 18:45 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/6 "2020-04-24T18:45:53Z")

</div>

> [@bakman2](#):
>
> I cannot get rid of the background color on the right.
> 
> ![Screenshot 2020-04-24 at 20.36.12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9c791efa63d824c5082fceedc02e7756046cd76.jpeg)

If you right click that element & copy --\> selector then add that in a `<style></style>` tag with the necessary properties (perhaps adding `!important`)?

---

<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: [24 April 2020 18:46 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/7 "2020-04-24T18:46:51Z")

</div>

What if you add same rule also to the #Network\_Network\_cards ?

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [24 April 2020 18:54 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/8 "2020-04-24T18:54:33Z")

</div>

matching colors may be the solution. In such case you could try:

body.nr-dashboard-theme md-content md-card {  
background-color:#111111;  
}

but need to find how to change the color of the border (widget or group, not sure)

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [24 April 2020 19:01 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/9 "2020-04-24T19:01:19Z")

</div>

That doesn't make it portable and no challenge 😉

@hotNipi, I have added it everywhere, I cannot get rid of it :') Only in the browser directly (`background-color:transparent!important`)  
I also added as jquery to remove it once it is refreshed, loaded, no change.

---

<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: [24 April 2020 19:03 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/10 "2020-04-24T19:03:54Z")

</div>

> [@bakman2](#):
>
> I have added it everywhere, I cannot get rid of it :')

That doesn't sound right. Is the flow shareable? Can I try?

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [24 April 2020 19:04 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/11 "2020-04-24T19:04:34Z")

</div>

See this flow

[https://flows.nodered.org/flow/4b940430b92142571c670050f4d98f6d](https://flows.nodered.org/flow/4b940430b92142571c670050f4d98f6d)

Then again, i think you should be able to replicate it with a ui-template node in general.

Yes, just add a ui-template node and try to set the background to transparent.

---

<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: [24 April 2020 19:43 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/12 "2020-04-24T19:43:42Z")

</div>

In the main template node (with brutal force):

```auto
<style>

.device{font-weight:bold}
circle {
	fill: #090;
	stroke: #090;
	stroke-width: 1.5px;
}
circle.unreachable {
	fill: #f00;
	stroke: #f00;
	stroke-width: 1.5px;
}
circle.reachable {
	fill: #090;
	stroke: #090;
	stroke-width: 1.5px;
}
.node,
text {
	font: 10px 'Helvetica Neue';
}
.link {
	fill: none;
	stroke: #888;
	stroke-width: 1px;
	stroke-opacity: 1;
}
.reachable {
	fill: none;
	stroke: #090;
}
.unreachable {
	fill: none;
	stroke: #f30;
}

#chart {
	width: 800px;
	margin: 20px auto;

}
#chart path{
    fill:none;
}
#info{position:absolute;bottom:8px;}
#info p{
    padding:8px;
    font-size:11px;
}
#info a{text-decoration:none;color:#f90}
.weight{font-weight:bold}
</style>
<script type="text/javascript">
function updateContainerStyle (el) {
	el = el.parentElement
	console.log("parent",el)
	if (el && el.classList.contains('nr-dashboard-template')) {
		el.style.backgroundColor = "#12345600"
	}
}
function renderNetwork() {
    updateContainerStyle(document.getElementById("chart"))
	var w = 600,
		h = 600;

	var cluster = d3.layout.cluster().size([h, w - 200]);

	var diagonal = d3.svg.diagonal().projection(function (d) {
		return [d.y, d.x];
	});

	var vis = d3
		.select('#chart')
		.append('svg:svg')
		.attr('width', w)
		.attr('height', h)
		.append('svg:g')
		.attr('transform', 'translate(70, 0)');

	d3.json('../networkapi', function (json) {
		var nodes = cluster.nodes(json);

		var link = vis
			.selectAll('path.link')
			.data(cluster.links(nodes))
			.enter()
			.append('svg:path')

			.attr('class', 'link')
			.attr('d', diagonal);

		var node = vis
			.selectAll('g.node')
			.data(nodes)
			.enter()
			.append('svg:g')

			.attr('transform', function (d) {
				return 'translate(' + d.y + ',' + d.x + ')';
			});

		node.append('svg:circle').attr('r', 4.5);
	
		node.append('svg:text')
			.attr('dx', function (d) {
				return d.children ? -8 : 8;
			})

			.attr('dy', 3)
			.attr('text-anchor', function (d) {
				return d.children ? 'end' : 'start';
			})
			.attr('stroke-opacity', 0)
			.attr('fill', '#fff')
			.text(function (d) {
				return d.name;
			})
			.attr('cursor', 'pointer')
			.on('mouseover', mouseover)
			.on('mouseout', mouseout)
			.on('click', info);

		vis.selectAll('circle')
			.filter(function (d) {
				//console.log(d.properties.reachable);
				return d;
			})
			.attr('class', function (d, i) {
			//	console.log(d, i);
				if (d.properties.reachable) {
					return ' reachable';
				} else {
					return ' unreachable';
				}
			});
	});
}

function updateNetwork() {
    console.log('update')
	d3.select('#chart svg').remove();

	renderNetwork();
}
function mouseover(d, i) {
	d3.select(this).attr({
		fill: 'orange',
	});
}
function mouseout(d, i) {
	d3.select(this).attr({
		fill: '#fff',
	});
}
function info(d, i) {
    if(d.properties.type==="ping"){
        $('#info').html("<p>Pinging...</p>") 
    }
    else{
        $('#info').html("<p>Loading...</p>")
    }

	sc.send({payload:{name:d.name,ip:d.properties.ip,type:d.properties.type}});
}
renderNetwork()

var sc = scope;

int = setInterval(function(){
    updateNetwork()
},30000)
</script>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg.update) {
      // Do something when msg arrives
      updateNetwork()
     // $("#my_"+scope.$id).html(msg.payload);
    }
    if (msg.info){
        $("#info").hide().html("").html(msg.info).fadeIn()
    }
  });
})(scope);
</script>
<div id="chart"></div>
<div id="info"></div>
    

```

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [25 April 2020 05:28 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/13 "2020-04-25T05:28:03Z")

</div>

thanks, I see the change (changed it to transparent), but it doesn't apply it to the ui-card-panel, which is an ng-repeat that has the style

 ![Screenshot 2020-04-25 at 07.24.17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2d8263fa686497005b58daff9c4cc1312c72932.jpeg)

---

<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: [25 April 2020 05:35 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/14 "2020-04-25T05:35:57Z")

</div>

Those can still changed with CSS override

```auto
 #Network_Network{
        background-color:#12312300 !important;
    }

```

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [25 April 2020 05:42 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/15 "2020-04-25T05:42:46Z")

</div>

It's not working :')  
The background color can only be 'transparent' for it to work btw.

I am now looking at getComputedStyle.

---

<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: [25 April 2020 06:08 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/16 "2020-04-25T06:08:01Z")

</div>

The background can be transparent

```auto
background:transparent

```

For `background-color` the value should be color `rgb, rgba, hex ....`

But it works for me. Both ways. With Chrome...

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [25 April 2020 06:15 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/17 "2020-04-25T06:15:05Z")

</div>

I have replaced the whole node with your code, not working in chrome and safari.  
You can try it by just adding a template node and try to set the background to transparent.

Overriding with a color/opacity does not make the background disappear.

Note that the theme styles have been set, group background #5f5f5f

---

<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: [25 April 2020 06:29 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/18 "2020-04-25T06:29:41Z")

</div>

Test flow

```auto
[{"id":"beb0a3a3.ec6e8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"b0bf3de5.ad13c","type":"ui_text","z":"beb0a3a3.ec6e8","group":"2cc829a5.610f36","order":1,"width":3,"height":1,"name":"","label":"text","format":"just a text","layout":"row-spread","x":320,"y":130,"wires":[]},{"id":"b93c110c.dfa28","type":"ui_template","z":"beb0a3a3.ec6e8","group":"2cc829a5.610f36","name":"","order":2,"width":3,"height":2,"format":"<div id=\"div-in-template\">UI Template node</div>\n<style>\n #TEST_group-test_cards{\n background-color:blue;\n }\n</style>\n<script>\nfunction updateContainerStyle (el) {\n\tel = el.parentElement\n\tif (el && el.classList.contains('nr-dashboard-template')) {\n\t // uncomment next line to make the parent container transparent\n\t\t//el.style.backgroundColor = \"#12345600\"\n\t}\n}\n\nupdateContainerStyle(document.getElementById(\"div-in-template\"))\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":330,"y":170,"wires":[[]]},{"id":"2cc829a5.610f36","type":"ui_group","z":"","name":"group-test","tab":"6766858b.dee74c","order":3,"disp":false,"width":3,"collapse":false},{"id":"6766858b.dee74c","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

Without transparency  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf4a2136a8ef55a8801622eb9e7a96c265c31cca.png)

Transparency added to parent container

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0c15df6b3107531c6a849de52236311571e62af.png)

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [25 April 2020 06:33 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/19 "2020-04-25T06:33:37Z")

</div>

Yes, this is not a problem, try removing the blue part 🙂 and make it the same as the page background color (ie transparent)

See the goal

> [@Transparent background on md-card in template node](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/5):
>
> Yes, I tried #Network\_Network but it somehow gets overwritten (I think by angular). I cannot get rid of the background color on the right. The goal

---

<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: [25 April 2020 06:37 UTC](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384/20 "2020-04-25T06:37:31Z")

</div>

Like this?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a8cf6bc1a91a85365e61ce7ec8faf792cf021843.png)

```auto
<div id="div-in-template">UI Template node</div>
<style>
    #TEST_group-test_cards{
        background-color:#12345600;
    }
    #TEST_group-test{
        background-color:#12345600;
        border:none;
    }
</style>
<script>
function updateContainerStyle (el) {
	el = el.parentElement
	if (el && el.classList.contains('nr-dashboard-template')) {
	    // uncomment next line to make the parent container transparent
		el.style.backgroundColor = "#12345600"
	}
}

updateContainerStyle(document.getElementById("div-in-template"))
</script>

```

And without border

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10be50520fd98558cac3b4123a8439a53adb56f7.png)

[Next page](https://discourse.nodered.org/t/transparent-background-on-md-card-in-template-node/25384.md?page=2)