Examples of Colour change button and switch

For design geeks - they would start with a different dashboard !

(improvement suggestions welcome)

I really like this.

You used fa fa-rotate-90 fa-folder-open-o & closed. Are there other icons available and if so what is available please?

1 Like

As the info for the button widget says...

(* only Fa-icons 4.7)

Nice one!


Well the basis of default set of dashboard widgets is not that bad to not give it a try. For me (miles from being a design geek :smiley: ), the CSS has always been that famous "never properly closing window blinds". No mater that, with slight override of default CSS, I managed to get my dashboard to look quite ok without wasting too much time on it. So It has it's powers. That's for sure.

Oh dear... just when I thought I'd created a nice control dashboard - Using switch node to show actual state

@hotNipi - I'm deflated now :disappointed_relieved: .....

Very nice. Are any of those "slight overrides" something generalisable about the layout ? or are they "just" theming ?
PS - sort of a pre-announcement - did you see the PR in master that allows this ? https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets
testing/feedback appreciated before it goes out.

Theming with CSS override on backgrounds and buttons and sliders simple widgets. Default gauges and graphs can't be modified with ease so I created some own widgets. They are done with ui_template by using svg elements.
I definitely will explore the Creating-New-Dashboard-Widgets. The idea itself is promising enough :slight_smile:



Hi @hotNipi what I nice dashboard , I trying to learn on how to do something similar like you did, is possible to get sample code of what you did ?

Here is how I did it.

  1. Make full working solution of dashboard, using default settings and default dashboard widgets.

  2. Observe the result with all the devices, you will be using it.

  3. Figure out the best layout for elements as there will be one layout for all devices. (unit size, card sizes ....)

  4. Make the list of the problems you need to solve with custom design. (Colors, fonts, sizes, behavior and look of elements, readability issues ....)

  5. Open your dashboard and explore all the elements with browser dev tools. (same time you may need to educate yourself on topic of html, css, angular... https://www.w3schools.com/)

  6. Place ui_template node somewhere in your project and make sure it is configured like this:

  7. Place<style> tags in it and start overriding all you dont like on your dashboard. Don't miss the thing.

  8. Show us the result :slight_smile:

If some element does not give up and does not look as you might like, ask specific questions here and for sure you'll get help.

Happy styling :slight_smile:


@dceejay I came across this post thinking this was exactly what I need but it does not seem to work for me. I am trying to change the button color when the button is clicked and then when another button is pressed, change it back to the original color. I realize that is a little complicated so I am starting with just changing the button color with each click. I copied the flow you provided and changed it to what I needed and my button is just the original default color and does not change when pressed.

my original example at the top still works - so maybe you need to share your flow so we can try to work out what is wrong ?

This is my current flow

[{"id":"64ac3933.070e88","type":"change","z":"24d531e9.e46a1e","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":435,"y":102,"wires":[["9daa42d6.ac744"]]},{"id":"2a508b1c.199094","type":"inject","z":"24d531e9.e46a1e","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":240,"y":102,"wires":[["2c2ce824.67da08"]]},{"id":"17b67eb3.7e2151","type":"function","z":"24d531e9.e46a1e","name":"state","func":"var state = context.state || false;\nstate = !state;\ncontext.state = state;\nif (state) { return [msg,null]; }\nelse { return [null,msg]; }\n","outputs":2,"noerr":0,"x":240,"y":147,"wires":[["64ac3933.070e88"],["2c2ce824.67da08"]]},{"id":"2c2ce824.67da08","type":"change","z":"24d531e9.e46a1e","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":435,"y":147,"wires":[["9daa42d6.ac744"]]},{"id":"9daa42d6.ac744","type":"mui_button","z":"24d531e9.e46a1e","name":"","group":"96a86685.14e458","order":6,"width":"3","height":"2","passthru":false,"label":"Start","tooltip":"","color":"black","bgcolor":"{{colour}}","icon":"","payload":"press","payloadType":"str","topic":"Start","x":635,"y":205,"wires":[["17b67eb3.7e2151"]]},{"id":"96a86685.14e458","type":"mui_group","z":"","name":"Small","tab":"2d3eadc0.8c2392","order":2,"disp":false,"width":"10","collapse":false},{"id":"2d3eadc0.8c2392","type":"mui_tab","z":"","name":"Small Screen","icon":"dashboard","order":1}]

it looks like you are not using node-red-dashboard but another dashboard. The example provided works with node-red-dashboard.

If you want to use node-red-dashboard, you will first have to remove the other dashboard.

Hi @dceejay
I was searching for a code like yours. Sadly I am a bit lost with the thing I want to accomplish. I am rather new to Node Red. I am using it to make a dashboard for my Homey home automation.
I would like to make buttons instead of switches. I like the way they look, more tile like.
I communicate to homey through MQTT.

Can you tell me what I am doing wrong and how to solve it?

It is hard to tell if or what you are doing wrong based on what you shared. Button colors by state of something you can find in this example also. https://flows.nodered.org/flow/cd90709d95fcba9970bd88205871c3c7

Hi @hotNipi,
Thanks for your reply. What I like to accomplish is a button to turn my lights in the living room on and off. The button should reflect the state it is in. For example, lights on button is green with a nice bulb icon that is on. Lights off the button is red with a bulb icon that is off. The node red button should communicate with the light through MQTT (with the topic I showed, this topic works with a switch).

With my switch I use the MQTT in and MQTT out node. In my switch node I have "Pass though msg if payload matches new state:" checked. If I do that now my button goes crazy :grinning:

Do you or anyone els knows how this can be done? I used the above code but need to know how to connect the MQTT to make it work.
The link you provided looks nice but even more complex :sweat_smile:


There is one old thread also about this, may be it helps

Hi @hotNipi,
Aaaargghhg, getting a bit frustrated here :crazy_face:
Tried the code in the post you gave, tried the above code, searched for other solutions but it is still not working. The best I could get is that my light turns off. So, not on again and no representation if I turn it on/off through homey. I don't understand where to connect my MQTT out and in to. And what message do I put in and where to set a light to on or off. Do you by any chance have an example with the MQTT in and out that tells the light to turn on and off?

Thanks and greetings

Share the flow with your best try. Let's try to fix it. :slight_smile: