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

[william2]

@Krishna

auto-determined rather than specified

If I'm understanding your request one approach is to change "rowHeight": 30, in the layout template (settings--> Advance --> Layout), at the lower half of the screen you will see this.

"goBack": true,
  "modePin": "",
  "bgColor": "#282828",
  "lanRefresh": 2,
  "iconSize": 42,
  "cols": 6,
  "rowHeight": 30,  <------
  "hideEvents": false,
  "tempScale": "F",
  "noColors": false,
  "readOnly": null,
  "rows": 5,
  "hideIconText": true,
  "hideTextShadow": true,
  "name": "test",
  "fontSize": 12

then each time you place a button you would get that oval shape, like this

Another option is CSS by grouping tile numbers like this

#tile-0, #tile-1, #tile-2, #tile-3 {
   background-color: rgb(57,57,76) !important;
   height:90px;
   width:90px;
   box-shadow: 1px 1px 5px 0px rgb(12, 12, 14);
}

All 4 of those buttons are exactly the same on the dashboard.

Does this help?

By the way if you choose to go the layout path make sure to click the Save Layout button or else it won't work.

[sburke781]

For your exact question re using a variable, or possibly even a device attribute, I am going to say (without too much authority or confidence) no. My understanding is that CSS cannot use the value of a node (could be the wrong terminology...) to drive the formatting.

That said, one way, which requires some extra config, is to include a switch or something similar, and overlay tiles, where the switch tile provides the colour change. These get a different class assigned when they change state, which you can respond to using CSS. By the sounds of it, you could potentially use a switch instead of a variable you describe in question 1.

I have also seen people adjust settings for tiles using temperature and humidity readings, so there may be something there you could use.

[sburke781]

Should clarify my last statement, not respond with CSS, background colour settings in the templates

Ecowitt Tiles

i used smartly but added my own values for color.. you need one for every value.. this is for temp see the layout under dashboard tile advanced basically each of these sets the template tile color.. the state = the value of the tile being displayed.. in the case below the temp is 99 degress { "template": "temperature", "bgColor": "#bc2323a6", "state": "99" }, { "localization": "English", "roundedCorners": 20, "dateFormat": "MM/DD/YYYY", "hideLabels": false, "customColors": [ { "te…

[thebearmay]

If you look at how HE generates some of the tiles, often times you’ll see a class attached to the tile with the value embedded (I know temperature does this, and believe I’ve seen others). Those classes can be defined in the CSS tab to have background-color, etc.

[LibraSun]

For my own edification, I went ahead and created a Variable Connector for a Boolean variable I had been wanting shown (circled in black) on my test Dashboard, and am happy to report that it behaves as intended when I designate "Switch" for its Template.
Touch On, touch Off – colors and custom icons as chosen – with all state changes instantly reflecting back in the underlying Hub var.

This concludes my testing for the day, I believe, although I will naturally go muck around with the other Templates just to "see what happens" (but I won't mention any of that here) and to explore the accompanying CSS styling.

I've got some exciting ideas brewing on how to manage multi-state text and numeric Tiles (think: weather or thermostats) a bit more efficiently than has been presented thus far, which is why I'm even doing this. Stay tuned...

[sburke781]

Nice work

[LibraSun]

SPECIAL HANDLING OF NUMERIC CSS CLASSES

I wasn't sure whether the topic of numeric CSS selectors (e.g. class="3") had been discussed here previously, so I thought I'd share some notes on the subject. It's hard enough to identify, much less isolate, the precise UI element you're targeting!

What I have here is a Dashboard with just one Tile, linked to a Hub Variable of type Number, through its Variable Connector of type Illuminance, and accordingly using the "Illuminance" template as shown. Its sole job is to display the number that corresponds with the value that I (or some rule) might set for "Lux" on the Connector device.

My goal was to have CSS formatting affect only specific number values (in this case, "3"), achievable since Hubitat Dashboards treat "Illuminance" Tiles in a special way, namely assigning a CSS class to the innermost text element (the variable value, e.g. 3). That class happens to be named the same as the value (hence class=3).

BUT NOT SO FAST... The problem, of course, is that technically – according to W3C specifications – "In CSS, identifiers (including element names, classes, and IDs in selectors) should be at least two characters in length; may contain only [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit." In other words, class=3 is (doubly) verboten, thus must be handled in a special way for parsing in Dashboard's custom CSS.

As these screenshots demonstrate, one must escape these numeric Class names with a \3 prefix to make them recognizable and thus allow your special formatting to take effect. This works because the numerals [0-9] represent Unicodes U+0030 through U+0039:

Value = 3 ► font changes to big and red

Value = 4, etc. ► font unchanged from Default

I hope this tidbit is of value to someone out there.

• Libra

NOTES

• There is no prescribed way to select parent nodes located "higher up" in the DOM model than the element your CSS targets; in other words, altering text may work in this example, but it would be impossible to assign, say, a different background color to the Tile containing that text at the same time. For that, you'd need to include another selector statement.

[Krishna]

@william2

#tile-5 {
   border-radius: 25% !important;
}

Thanks for your help. It looks like simply deleting those height/length lines gives me the auto-adjusting button that I want.

Also, when I use border-radius 25%, it gives me one kind of oval, and when I use border-radius 50%, it gives me an oval with more tapered ends. I’m not sure what the border-radius refers to exactly, but I’m assuming I can pick numbers in between for different oval shapes?

[Krishna]

It looks like “Color” refers to the color of the text in the button.

Is there a way to change the button color itself for specific buttons using CSS (not all buttons, just some on a dashboard)?

[sburke781]

Yes. Borrowing from an earlier post by @thebearmay:

#tile-49 .material-icons{
color:rgb(255,0,0) !important;
}

Just replace the tile id (49 in my case) with the tile you want to change on your dashboard, and adjust the rgb values.

[william2]

@Krishna

I’m not sure what the border-radius refers to exactly

The border-radius defines the corners, in this case the button corners. You can do some odd-looking corners if you are into that stuff, like these.

Hope this helps.

[Krishna]

Thanks, but it looks like that changes the color of the icon in the button. What I'm looking for is something that changes the entire button color excluding icon and text (when it's in the off position). For instance, the button normally turns yellow when it is on but it's a sort of light-gray when it's off. What I want to do is change some of the buttons when they are in the off position to a different color other than that light-gray.... is there a way to do that?

[Krishna]

That's cool. How do you get the buttons to be those different colors? That's one thing I'm trying to achieve right now.

[sburke781]

This was the post I provided to you in your customisation topic, which I believe you could use to adjust the background color. It's not the nicest way to have to set it up, but all that we can probably do. It will need some creative thinking to apply to your use case, so see how you go...

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

That would be cool. I tried something like this editing the Layout JSON: "customColors": [ { "template": "switches", "bgColor": "linear-gradient(red,yellow)", "iconColor": "", "state": "on", "customIcon": "" } ], Unfortunately, that didn't work. This is what happens if you set a custom color in the Templates section: "customColors": [ { "template": "switches", "bgColor": "rgba(250,242,0,0.87)", "iconColor": "", "state": "…

[william2]

@Krishna

different colors?

To achieve this with CSS, I am using background-color. Note that background-color property also uses rgb values as well as hex.

#tile-7 {
   background-color: green;
   height: 150px;
   border-radius: 15px 50px 30px; !important;
}

This is what the switch looks like when it is off

Based on your other posts, @sburke781 provided another solution using the JSON layout.

@Krishna

looks like that changes the color of the icon in the button

One thing to keep in mind, some of the icon have a transparent background, when you change the button background the icon's color will adapt to the new color.

[kahn-hubitat]

@sburke781

This was the post I provided to you in your customisation topic, which I believe you could use to adjust the background color. It's not the nicest way to have to set it up, but all that we can probably do. It will need some creative thinking to apply to your use case, so see how you go...

ya i gave up on that approach as the problem with that one was you needed to specify a bgcolor for every temp value which is ok if you are using integer temps but as soon as you start to use decimal values it becomes unteneable.. i wish i knew how to specify a temp range for the state values.

i do something similiar for my version of smarttiles (precursor to actiontiles) that i am running but havent figured out how to do it in the built in dashboards.

ie

[sburke781]

That one was more to do with changing the background color of a switch tile, rather than the other recent link I provided to your Humidity solution. But still, good to know the outcome in case it comes up again.

[Krishna]

Perfect! "background-color" is exactly what I was looking for. Thanks!

[FTimpani]

Hello can anyone help me with the CSS code to change the height and width of a single tile. I'm trying to figure out CSS but having a hard time with the elements. thank you

[thebearmay]

.tile-99 {
  height:190px;
  width:200px;
}