Help with CSS and dashboard customization

I have a Dashboard with a whole bunch of buttons and I want to find ways to distinguish some types of buttons from others.

Is there a way to make some buttons on a dashboard (but not all) be in an oval shape as opposed to the box shape?

Is there a way to have some buttons on a dashboard (but not all) to have a different color from the default one?

Using CSS and thanks to the help of other members I was able to give custom names to my devices (see example below). It looks to me like there might be other things that can be modified in the code to do what I want, but I'm not sure.

#tile-72 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}

#tile-72 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
#tile-72 .tile-title:after {
content: 'Scene Bright';
}

1 Like

Are you able to provide some screenshots of what you have so far?

But in answer to your question, yes, you can define separate colors for tiles compared to the default template ones....

I must have adjusted the template settings in most of what I have done with colours in the past. Here's a neat trick @BrianP posted last year. You will need to adjust the use of gradient to just a fixed colour.

Here is an example of one of my dashboards. It's loaded with CoCoHue Scenes and Formulas so, being information dense, I wanted to have some way of making it easier to find things, like having all Formula buttons be round or oval, and coloring certain Scenes/Formulas based on the kind of season (autumn, winter, etc) they would be good for.

Wow, those are a lot of buttons... as @sburke781 pointed out a great place to visit is

The Noob’s (in)complete guide to CSS for Hubitat.

1 Like

If you just want control and not visual confirmation of whats on/off you could use multiple dashboards with hyperlink buttons to jump between them.

Download the Hubitat app