Dashboard Button Node - </>Class Field not working

[Steve-Mcl]

@zenofmud

I think the option has opened a can of worms that is going to cause users confusing until the dashboard is rewritten. Users who want to change the defaults are still going to have to use a browser inspector's tool to examng each widget they want to effect and write CSS selectors specific enough to address the area tehy want to change. You know, kind of like what they've been doing all along.

The point of adding class option wasn't to overcome the classes dashboard applies or even to reduce specificity it was to provide a means of setting uniform styling.
An additional side benefit was being able to dynamically set/adjust the class at runtime.

While yes, the dashboard styles and outer elements mean you have to increase specificity in your CSS (or apply the heavy handed !important) its still better than having to address all items individually.

For example...
Say you have a dashboard with 10 blue buttons, 10 red buttons, 10 danger labels, 10 warning labels & 10 info labels...

Without the class to differentiate the blues from the reds or the danger from the warning from the info labels, you would have to write the styles for 50 items (to target them specifically)

With the class you add red class to 10 buttons, add blue to the other 10 buttons (and so on) then simply target them by differentiating them using the class name

---

@zenofmud

I understand the idea of the </> Class option (I was one of the peoplewanting it) is to provide an easy way to apply a change to a single instance of a ui-widget, but in some cases, it doesn't create a CSS selector that it specific enough to override other CSS selectors that are created. The dashboard theme options are taking precedence.

This is (kinda) true - you just need to be more specific. For example, these three buttons have a hard coded background of red

however by using the below CSS, I can target every button with a class of .button-error to "over power" the background style entry

.button-error.nr-dashboard-button button.md-button {
    background: rgba(255, 0, 0, 0.5) !important;
    color: rgb(30, 0, 0);
}

---

Lastly, here is a demo i was using to test things when developing the class entry. It demonstrates how multiple items can use the class (for uniformity) and buttons being styled and how one can dynamically set the class of a widget...

---

Hope that helps?