Editing template

[Udina]

Good morning,
I am in the process of modifying my dashboard with templates that I integrate into my flows :

I am encountering a problem with the appearance of the liquid gauges.
I put the integrated modules in the groups in partial transparency and I would like the gauge liquid nodes to have a completely transparent background.

Does anyone have an idea so that the template only concerns the module you want to modify and not all the nodes of dashboard?

[Udina]

I can make the modification directly in the "F12" web page :

When I copy the rule and paste it into the nodered templates, it doesn't work after refreshing the page.

I also tried to create a CSS class in the gauge node :

and then integrate into a template node like this :

An idea ?

[Steve-Mcl]

First your CSS is not valid. Get rid of élément { and the matching }

Next, you will likely find the selector .gauge1 is not specific enough and you will see no change - you will probably need to add more path elements to the selector to give it priority. Failing that you can add a dirty hack !important

[Udina]

Thanks for the answer, a tip to easily turn the module path via the "F12" console?

I have just found the CSS path that corresponds to the object :

html body#nr-dashboard.nr-dashboard-theme.layout-column md-content._md.layout-column.flex section.layout-row.flex md-content._md.flex div#Tab_Bassin.masonry-container ui-card-panel#Bassin_Gestion_grand_bassin.visible div.nr-dashboard-cardpanel.layout-column div#Bassin_Gestion_grand_bassin_cards.nr-dashboard-cardcontainer md-card._md.layout-align-center-center.gauge1.visible

how should we formulate the path in the template?

[Udina]

I found the solution thanks to your help, it is indeed the CSS selector that must be copied and pasted directly into the template. It gives this for those who have the same problem:

copy CSS selector and paste into the template like this :

<style>
   md-card.layout-align-center-center:nth-child(8) {
background-color: #ffe4c400 !important;
}
</style>

Here is the result :