Set image for buttons

Dashboard
1

Hello guys,
i'm new to node red, and building my first app.
i have some buttons and instead of the label i want to show an image.
here on the forum i found this code and tweak it (change the name of tab and group and image parameters)

<style>
#tab_group_cards > md-card:nth-child(1) > button {
    background: url(/home.png);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain; 
  }
</style>

it worked fine.
but the thing is, if i change the order of the buttons, create new one, or delete some, the child number will change, which will affect the image on each button.
is there a way to use the node id instead of child number?

2

There is... unfortunately I get too confused on the order to use when messing with CSS.

I think that somewhere somehow, you place this before, or with the existing line... > button {

I have this when isolation a button, but for changing colours when hovering...

<style id="dashboard-style-override">
[node-id="ec0ae86776081ecf"] > button:hover {
    background-color: #00FF00 !important;
}
</style>
1 Like
3

thanks a lot @Gunner it works perfectly

<style>
#tab_group_cards > [node-id="f9dea81457078859"] > button {
        background: url(/home.png);
        background-position: center;
        background-repeat: no-repeat; 
        background-size: contain; 
    }
</style>
1 Like
4

Well, glad I was able to help... unfortunately I can't seem to get it to work for me :stuck_out_tongue:

I was assuming you were simply using a template, set to widget in group, then sizing the ui_button accordingly.

But while the button works fine, no image or indication of messed up code???

image
image627Ă—586 17.2 KB
image

How are you doing it?

EDIT - BIG Opps... forget it... CSS is mind twisting :stuck_out_tongue:
I didn't change to the appropriate-for-me #Tests_Image_Button_cards

image

5

you need to replace tab and group with the name of your tab and group.
for instance my tab is called "main" and the group is called "controls". so for me the code is

<style>
#main_controls_cards > [node-id="f9dea81457078859"] > button {
        background: url(/home.png);
        background-position: center;
        background-repeat: no-repeat; 
        background-size: contain; 
    }
</style>

let me know if it works

1 Like
6

Since the node id is unique, it ought to be sufficient to use

<style>
[node-id="03c897154d539be7"] button {
    background-color: red !important;
}
</style>

#TAB_GROUP_cards is useful instead of node-id if you are styling all the buttons in a group.
The > before button turns out not to be necessary.
If you are overriding a property that's defined elsewhere in the CSS you need !important. Contrariwise, sometimes you don't. CSS is deep and confusing. :grin:

2 Likes
7

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