Change background color of group

Dashboard
1

is there a way to change the background color of group ?
there's no id in md-card, even the class doesn't work !!
test3

2

I moved this into #dashboard as it would appear to be about the dashboard

3

The id in on the div that contains the card - ("__Liste_de_reference_cards") - so you can target that with CSS if you wish.

1 Like
4

Hello guys,

I need help, im trying to change the background color in the dashboard group, but i dont understand much about how to edit the css template, i use the dev tools in google chrome to check the ID and i use the template node (with section) but i dont had any sucess, so can someone share a part of the code or explain how to put work with this ?

thanks

5

Hi,

This is exactly what I have been searching for but when following the provided solution, mine still does not work. I am able to change the font size of the group through CSS but the background color will not change.

6

@learning it would be useful if you could show the code that you were using that didn't work. Perhaps someone can see what is wrong...

7

@ukmoose This is the code I am using. It is in a template node and "Added to site section" is selected

<style>
    #Small_Screen_Group_2 {
        font-size: 30px !important;
        background-color: "#FF0000" !important;
    }
</style>

Below is the dashboard. As you can see, the text is larger than the deault.

Small

8

It may help if you do a little research on topic of how to work with chrome dev tools and CSS. https://developers.google.com/web/tools/chrome-devtools/css/
CSS as it name says cascades so it is hard to tell what is wrong by just looking an image of situation. By debugging dashboard elements you can find the real source of CSS rule what affects elements you are interested.

9

Hello

I have that, i can see in the devtools the green color and the style there, but probably it's in the wrong place.

ee

fe
fe.PNG1889Ă—777 92.8 KB

10

The div to change CSS rule for card background is hierarchically second in deeper direction (from your selection). The id of that div is "Home_Teste_cards"

11

Hello

Thanks for the help and your time.

If i use the ""Home_Teste_cards"", i just see a green line between Hello and the switch.
If i use the code in the pic. he do that.

I increased the size of the font to see if i'm in the right place.

My question is the background color of the label and button is it an overlap?

What i want its change the background of the group inclued including all objects inside,I don't know if it's possible.

Thanks

cgbdf
cgbdf.PNG530Ă—727 17.7 KB

12

They are different so you would need to override both. One is the group background and the other is the widget background

13

Hello

thanks for the help.

14

Hi Cristiano,

I am new to node-red and facing the same problem. Can you show me how you override so that the whole group take the same color. Thanks