Hubitat Dashboard - change thermostat template

🛎️ Get Help Apps
1

Hi all,

I would like to ask if it is possible to edit/change thermostat dashboard template where I need just information about temperature, thermostatOperatingState, thermostatSetpoint and don't lose the functionality of the thermostat template.
By functionality of thermostat template I mean when thermostatOperatingState=HEAT than background will change to red and in case of thermostatOperatingState=IDLE it will change to default.
Thanks in Advance

image

2

If I'm understanding what you want correctly, you can already do this:

  1. Click the gear/cogs icon (upper right of dashboard)
  2. Click the "Templates" link/heading
  3. Scroll down to "Thermostat"
  4. Adjust the colors (far right) for the various possible states (middle column) as desired.

I'm also pretty sure the defaults might already be what you want, so you might not even need to do this, but I don't remember that exactly off the top of my head.

3

What I want to do is to remove all the thermostat tile information except temperature, thermostatOperatingState, thermostatSetpoint but keep the functionality of changing tile color in case thermostatOperatingState changes.

4

Ah. In that case, what you want can probably be done with custom CSS (which you may have seen you can also specify). However, I don't have specifics on how to do that exact thing myself. Maybe someone else can chime in. If you're familiar with CSS, you can also probably figure out something yourself using the "inspector" in your browser to figure out what elements you need to hide or move.

5

Thanks for your reply.
I will wait a few days if somebody can navigate me how to do that.

6

I'm not saying I can do it (this is hacked up inspector, won't save on refresh), but is this what you want?

image

7

Yes, that is what I want to do with thermostat tile :slight_smile:

8

Looks like those elements (mode and fan) are the exact same name, so I cannot target one without hitting the other. The means they both stay or both go.

image

Here's the code for your CSS section if you or anyone wants it.

Remove device title.

.thermostat div.absolute.bottom-0.text-center.w-full {
 display:none ;
}

Remove Mode and Fan

.thermostat div.w-full.my-1>div.inline-block  {
  visibility:hidden;
}
9

I tried to remove the title at the botton in CSS and it didn't go like the rest of my tiles.
No expert at CSS so maybe my code needs a mod.
#tile-105 > .tile-title { visibility: hidden; }

10

it's not a normal tile. use the above.

11

Hey thanks! All good now.

1 Like
12

@TechMedX
Thanks for your assistance.
By your assistance I got exactly what I want and I did a small change :slight_smile:

.thermostat div.w-full.my-1>div.inline-block {
visibility:hidden;
}
.thermostat i.material.icons.he-circle-down.pr-3 {
visibility:hidden;
}
.thermostat i.material.icons.he-circle-up.pl-3 {
visibility:hidden;
}

image

1 Like
13

Is there any way to hide the top line display: ie. "72.4 and idle"? I have a separate tile that displays the temperature.

1 Like
14 
.thermostat div.p-1 {
  visibility : hidden;
}
1 Like
15

@TechMedX Thank you so much!

1 Like
16

I have 2 questions about the thermostat template (or tile). I'd like to use only the background color as an indicator. I can rid of all the text and controls but when I reduce the size of the tile bellow a certain threshold sliders appear:

Screenshot_20210323_081941

How can I remove these?

Secondly, is there a way to have the bakground color changed according to the mode? I would like the tile to show a different color if the thermostat is OFF because it is not the same as being IDLE.

Edit: Forget about the sliders, those only appear in chromium and not on safari nor on fully kiosk browser. The background mode color inquiry still stand though.

17

I'm lost too. I got this:

image

by using the following CSS:

.thermostat div.w-full.my-1>div.inline-block {
display : none;
}

.thermostat div.bottom-0 {
display : none;
}

That nearly what I wanted for a Spirit Heating valve (NO Fan). It would be great to have the Mode menu sitting in the middle below the arrows, but that might be to complicated...

BUT, what is really bad is that the tile must be set to this size. As soon as I try to make it smaller in height, the arrows are moving over the top text. I thought that display:none also removes the space (hidden, does not remove spaces), but apparently the space is still there.

2nd question, I thought that I can just modify it on a tile base by using this syntax:

#tile-9 .thermostat div.bottom-0 {
display : none;
}

but this does not work at all (the tile id is 9, checked)

Any suggestions ? - Thanks.