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

📱 Mobile Apps
495

I use this on nearly everything. Makes a very subtle but dimensional difference.

1 Like
496

I agree, I'm not one for big, bold statements (with my dashboards), it's interesting how the smallest things just make things seem right.

1 Like
497

Hi, I would like some help in fixing the layout of the thermostat icons, pictured below. I don't have CSS knowledge and I've made several attempts with everything I've read from previous posts, but I didn't get what I wanted.

image

Desired changes:

  1. I wish to remove the thermostat temperature and status indication, top line;
  2. The Mode and Fan Mode boxes, is it possible for them to be a single line, i.e. wider so that the text fits on one line only?
  3. On the icon next to the temperature, is it possible to set it to have no decimal place?
  4. Also on the temperature icon, is it possible to add that the humidity of the air appears somehow? So that I don't have to place a second icon?

Another question, I don't want any icon to show the battery level, is it possible to remove this information? Independent of the type of device?

image

Thank you very much for any help possible with these improvements.

498

I fell victim to that exact thing early in my css journey.

2 Likes
499

Hi Wilson,

Glad to see you customising your dashboard :slightly_smiling_face:

I'm happy to have a go at what you want with your thermostat, but I thinking @chad.andrews might have done more with this type of tile than me. Might be a while before I get a chance to take a look.

1 Like
500

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.

1 Like
501

@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

1 Like
502

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.

1 Like
503

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

1 Like
504

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...

1 Like
505

lol, I hear ya there.

2 Likes
506

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

2 Likes
507

So close

image

2 Likes
508

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...

1 Like
509

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

1 Like
510

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;}
2 Likes
511

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...

512

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

image

513

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

514

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

1 Like