How to add border to switch node

Dashboard
1

I'm using a dashboard switch node with icon, but with no label so it can be 1x1 in size.
Can I somehow get a border around the 1x1 square so that it would look like a button. A dashboard button has this grey shine around it and it is clear that it can be pressed.
Using only an icon on switch node it is not clear that it can be pressed. It could also be just an information icon.
Is there any way to get the same board as on buttons? Or any other kind of boarder? Or maybe have a grey background color on the 1x1 square?

I'm not using a button since a button does not have a state and outputs the same message whereas a switch node has a state.

2

Seems this is nothing that can be done easily

3

Easy is subjective TBF. It is easy for anyone who knows about things like CSS and understands they can use a ui-template node to affect the style of anything on the page :wink:

The reason no-one has offered an assist is possibly because your post slipped through the cracks but it doesnt help that you haven't told us which dashboard are you using (old/depreciated node-red-dashboard? or the new @flowfuse/node-red-dashboard AKA Dastboard-2)?

If you know about CSS and classes and the like, you can probably apply a style to target your button and adjust it to however you like.

4

Sorry, using dashboard 3.6.5. That should be the latest?
I wouldn't know where to start but also do not want to mess around in the deep code due to probable interference with updating dashboard later on. If there is something out of node-red kind of would be preferred.

5

Yeah, that is what we now refer to as Dashboard 1.0 (or original / depreciated)

You can add a CSS class name to the switch then use a template with styles to set the style of the button

Template node

image
image441Ă—238 9.43 KB

toggle node

image
image273Ă—120 2.03 KB

ui-template styles for full border

<style>
    .slim-black-border {
        border: 1px solid black;
    }
</style>

image
image372Ă—155 2.31 KB

#### ui-template styles for just the toggle
<style>
    .slim-black-border md-switch {
        border: 1px solid black;
    }
</style>

image
image354Ă—150 2.18 KB

If you want to dig deeper, read up on CSS

1 Like
6

Great thanks I will check it out.

Did not know this is dashboard 1.0. Can I just upgrade to dashboard 2.0 by installing @flowfuse/node-red-dashboard ? I guess it will not update the dashboard 1.0 nodes?

7
8

I tried as you posted but somehow not getting it working. also tried to send a message to template just to be sure. What am I missing?

image
image699Ă—138 6.96 KB

image
image842Ă—384 16.4 KB

image
image511Ă—173 3.27 KB

9

Something might be overriding it - you might need to increase the specificity of the style entry.

Check in the dev tools of your browser (or just use the sledgehammer approach and add !important to the border)

    .slim-black-border {
        border: 1px solid black !important;
    }

just don't do it often :wink:

10

I just restarted node-red and now the border appeared without doing anything. Thanks!

11

Try adding border-radius: 50px; and see the difference !!