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

I'll admit I did start to look at this, including capturing some steps for traversing the html for the dashboard to help others with CSS adjustments, but the thermostat template is different to other tiles, so will need more of my time or someone more experienced at manipulating it top provide an answer.

@WMarcolin For number 1, try

.thermostat div.p-1 {visibility: hidden !important;}

I'll have a look at the others

for number 4, use a weather tile and CSS out the Wind and Direction

I just tried p-X, not sure that exists for all modes (existed for "dry" in my case and "idle" in Wilson's case, but not for cooling, which was why I wanted more time....) I guess for that specific display it would work, and if not present, p-4 would not have any affect...

EDIT: Technically edit 5 or 6.... :slight_smile: the X in p-X seems to be related to the mode, which makes sense in terms of styling cooling and heating differently. In terms of Wilson's situation, probably need to determine the modes that are available on his thermostat that produce this display with the temperature and operating state at the top of the tile.

Hmmm yep, appears to be dynamic and that box is also a button.

I expect my brain cells are dragging me in a different direction than yours, i.e. time-zone difference.... Although that hasn't stopped me contributing in the past.... Mine might need 24 hrs to ponder the finer details of climate control...

lol, I hear ya there.

You might have a couple of hours "support", but instigating an idea might be a stretch...

So close

image

I'm sure someone posted a cut-down version of a thermostat tile that just had the temperature adjustments.... Maybe it was on the Show Off Your Dashboards thread.... Maybe it was you.... I thought so, but could be wrong...

Could have been me. I have done that before.
this is pretty close to what he wants I think
image

And here is the CSS. The percentage will have to be adjusted for the specific tile size along with the relative position of the "heat" and "auto".

.thermostat div.p-1 {visibility: hidden !important;}
.thermostat div.inline-block.rounded-lg.text-xs.w-1\/3 {width: 30% !important;}
.thermostat div.no-wrap.overflow-hidden {display: inline-block; position: relative; left: -2px; top: 5px; !important;}

There was a slightly more simplified version, essentially with just the temp up / down icons plus a bit more text. Annoying I can't find it now.... Committed it to memory that I wanted to be able to achieve the same outcome myself.... eventually...

Can just hide the whole block and title like this with two lines of CSS

image

Might be enough for what @WMarcolin is wanting to achieve. He may not need to handle heating :wink:

Yes my friend, I am trying to do something, far from the very high level you have reached, but I am working on it.

And # 3 on his list, not sure there is a way to CSS the decimal places. Maybe the best place for that is in the driver of the device?

Ok first try did not remove the text from the first line. Already the tip 4 perfect, now what command I enter to remove the WInd and Direction?

image

try this, replace 101 with your tile number

#tile-101 div.weatherSpeed {visibility: hidden !important;}
#tile-101 div.weatherDirection {visibility: hidden !important;}

Hi, I am repeating exactly your commands, and I can't get the same result. It does not modify the tile.

Save your css, then reload the dashboard. See if it takes