Dashboard ui button hover color


how to access the hover color of standard button? I would like to override it with custom css.

this is how the button looks like. Thanks to @hotNipi I managed to achieve this look.

now I would like to upgrade hover to similar look, right now it looks like this:

Perhaps more details and showing your flow might help user involvement.

As well as some clarification... like what do you mean by "hover" color

hover is when you hover with the mouse over the button.
atm it is the theme color. there is some css atribute to override, so it would change

I have never seen any reaction to a "hovering" of the mouse cursor on the dashboard (short of the browser changing the icon)... I don't think there is any such thing with the dashboard :thinking:

add button and then hover over it... my first button is when the cursor is not on it, and the blue one is hovered

I have buttons in my dashboard and none of them react at all when "hovering" with the mouse cursor.

EDIT... Sorry, I added a new button without any colouring... and yes there is a faint 'greying out' (I use dark mode) when hovering.

No idea how to manipulate that to a colour.


see? this is hovering. I would like to change the custom theme color (here green) to anotherone with overriding css. but for this i need the css class

I forgot that I had an example theme edit going on my whole dashboard... might have been affecting how I saw the "hover" results.

Anyhow, I found this in that list... might help with what you are looking for in the CSS class

.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
    background-color: #88888855;

YES... commenting that out on my dashboard theme edit, caused a hover (on a default button NOT one that I pre-chose the colour for) to change between blank and system colour (blue in my case)

I'm far from sure this is the best way to do it but this will change the background hover colour for all buttons

[{"id":"36310a4f.be421e","type":"ui_template","z":"6a947c4c.60270c","group":"a6e358b.672ffa8","name":"Button CSS","order":6,"width":0,"height":0,"format":"<style id=\"dashboard-style-override\">\n.nr-dashboard-button .md-button:hover {\nbackground-color: #00ffff !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":153.1999969482422,"y":477.20001220703125,"wires":[[]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

Or this will change it for a specific button (You have to use your button node's id in the css selector)

[{"id":"44c6a8d6.01ec1","type":"ui_template","z":"6a947c4c.60270c","group":"a6e358b.672ffa8","name":"Button CSS","order":6,"width":0,"height":0,"format":"<style id=\"dashboard-style-override\">\n/*.nr-dashboard-button .md-button:hover {\nbackground-color: #00ffff !important;\n}*/\n[node-id=\"20d45887.d8ef1\"] > button:hover {\n    background-color: #ff00ff !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":306.20001220703125,"y":435.20001220703125,"wires":[[]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
1 Like

Nice, even works for my pre-coloured button.

.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
background-color: #88888855;

Thank you, this is what I was looking for!

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