Transparent background on md-card in template node

Dashboard
1

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.

2

Perhaps adding this rule in the CSS style ?

#chart {
background-color:blue;
}

3

This is how the id of card is created

image

#TEST_HOME {
   background-color: #cccccc00;
}
4

Considering the specific use case from @bakman2 this solution will not produce what he wants to achieve.

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.

Screenshot 2020-04-24 at 20.36.12
Screenshot 2020-04-24 at 20.36.122458Ă—424 261 KB

The goal

Screenshot 2020-04-24 at 20.40.25
Screenshot 2020-04-24 at 20.40.252136Ă—946 108 KB

6

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

7

What if you add same rule also to the #Network_Network_cards ?

8

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)

9

That doesn't make it portable and no challenge :wink:

@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.

10

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

11

See this flow

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.

12

In the main template node (with brutal force):

<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>
13

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
Screenshot 2020-04-25 at 07.24.172158Ă—378 221 KB

14

Those can still changed with CSS override

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

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

I am now looking at getComputedStyle.

16

The background can be transparent

background:transparent

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

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

17

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

18

Test flow

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

Transparency added to parent container

image

19

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

See the goal

20

Like this?

image

<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

1 Like