Can the ui_button be modify with CSS

Dashboard
1

First, thanks everyone who has provided me help/guidance while I learn Node-Red.

My project has been to develop an alarm panel, so far I've been able to set the cards transparency, add shadow to the text, add an animated gradient background, change the weather icon based on weather conditions, and several other embellishments.

One thing I haven't been able to do is to modify each ui_button, I figured out how to change them all at once by modifying nr-dashboard-button, but it affects all the buttons on all of the tabs. I looked at the source for an ID but I couldn't see how to identify which button was which, hence my question, can the ui_button be modified with css or do I have to create my own?

Thanks in advance!

Node-Red%20Animated%20Alarm
Node-Red Animated Alarm.gif533×637 2.14 MB

2

As per the info panel on the right
image

3

Thank you @dceejay, I did read that on the sidebar, but I'm not looking to change the background color, I'm looking to modify the button itself. For example using the ui_template I was able to add a shadow to the buttons, unfortunately, the only way I found to do that is to using nr-dashboard-button but it modifies every button not just one, I did insert the same into the background section but that didn't work.

snip_20180720154245

4

If you are using the ui_template and building your buttons there, why not try giving each one a unique 'id' or 'class'?
<md-button class="mybutton1 md-raised btn" .....
<md-button class="mybutton2 md-raised btn" .....

then you could use css like:
md-button.mybutton1 {background-color: red;}
md-button.mybutton2 {background-color: blue;}

5

Msg.background is just an example. You can use msg.foo if you like. You can set the colour of both the text and the button.
But yes if you want fully custom then you will need to use a template.
If you search Pete Scargills blog he had a great post (or 2) or custom buttons

6

@zenofmud / @dceejay, thank you both for your comments. Based on the information you both provided, I'm going to need to create my own buttons. Heading to Pete Scargills blog to read up on customer buttons.