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

He's come a long way with it.

1 Like

Indeed, I was just having a peek at the thread, looks impressive!

1 Like

Thanks. It definitely has come a long way if I sit back and look at it now.

It's definitely useful the way it is, but I just want to setup a driver to cover the iframe and manage downloading and storing the html file. If I get a relatively clear weekend I'm hoping to role it out. Plenty I still want to get into like allowing the sharing of template, but better to get a first version out and then build on it I think.

Yes, for sure. That's a lot of work right there.

When using an Attribute tile, how can I display different text than the actual attribute value?
For example, when the attribute value is “powerON” i want the tile text to display “OK” and when the attribute value is “powerOff” to display “FAIL”.
I can successfully change the text value of a Contact tile to display Locked instead of Closed using techniques in this very helpful thread, but so for I’ve been unsuccessful with this.

There may be a way with CSS, but an alternative would be a rule that populates a variable that you then display on the dashboard.

If you want to go down the css route I can only offer a very vague suggestion.... If you can find an example of using temperature readings to set the background colour of a tile....

, you can use a similar technique, replacing the temp reading reference with your power on and power off states. Then if you find the css to replace the text you can use that in place of the background colour settings in the temperature example. I can probably help more in another 5-6 hrs.

Hi @chad.andrews !

Sorry to bother you so much, we are trying to make progress :slight_smile:

#2 didn't work, I've checked several times and the temperature selector is still on the top and not in the middle;

.thermostat div.p-1 {visibility: hidden !important;}
.thermostat div.w-full.my-1 {visibility: hidden !important;}
.thermostat div.heating.pt-1.w-full {position: relative; top: 20px; !important;}

image

#3 sorry for the lack of knowledge, I already changed the instruction from "cooling" to "cool" (column 2) and it doesn't work, only if it is cooling (column 4). Is it possible to have both together, i.e. one or the other will put the color?

    {
      "template": "thermostat",
      "bgColor": "rgb(0,240,0)",
      "iconColor": "",
      "state": "cooling",
      "customIcon": ""
    },
    {
      "template": "thermostat",
      "bgColor": "",
      "iconColor": "",
      "state": "off",
      "customIcon": "he_thermometer2"
    }

image

#4 disappeared the background, as can be seen in the example below, Thanks!!

#5 understood master, path excludes and includes in sequence or @sburke781 information to put z-index.

Thank you!

1 Like

For # 2 have you adjusted the 20px to something different? try different numbers to see if it moves.

For # 3 , can you use the built in Template Color Editor? Cooling and pending cooling?

Hi!

#2, I tried it now and went up to 100px and it didn't move. I see in the instruction it is "heating", any difference if I use it only for cool mode? I tried putting cooling in place and it didn't work either.

#3 yes I used this color editor, but see that it only accepts cooling, it doesn't recognize the cool mode that some thermostats have.

Thanks.

Maybe this could be of use, here I replaced the icons of a blinds tile with a simple on and off.

#tile-69 .material-icons.he-shades_open::before {content: "On"; position:relative; font-size: 23px; font-weight: 400; left:62px; top:-29px; !important;}
#tile-69 .material-icons.he-shades_closed::before {content: "Off"; position:relative; font-size: 23px; font-weight: 400; left:62px; top:-29px; !important;}

#2, that could be the case. Can you open your dashboard, hit F12, then press the arrow inside the box (right over Page) and hover over the buttons on the thermo tile, actually to the left of the buttons to see what div. is it? make sure the CSS editor is closed before you do this.
image

#3, hmmmm, appears it only changes when a mode is active. cool is not really a mode, try the color for "idle" cool when it's not active should be idle.

I think it's the operating state it is displaying, rather than the mode. Cooling, heating, idle, etc are the states, whereas cool, heat, off are the modes.

Yes, your exactly right, getting my thermo terminology confused. and color only changes with State right?

I may have to rethink what exactly is his goal for # 3.

Thanks. What would be really nice is a ‘Template Creator” app and a way to export and share the custom templates. Much of this thread would not be needed if some programming guru were to create such an app, even if it was limited to fairly simple tiles. I have been taking existing templates not needed for their original purpose and modifying them as much as possible within the settings, the throwing a bunch of CSS at them, but what a PITA. Just adding the ability to add, subtract and rename states would be nice. I started at this a week or so ago and I am a total Noob at this which didn’t know any CSS. Maybe I’m missing something?

1 Like

It's coming.... :slightly_smiling_face:

1 Like

In terms of what we can reference, yes, I believe so

Could you tell me again what your goal is for # 3?
So Cool is just a mode. The color of the tile should be the "idle" (provide your thermostat supports the state "idle") color until it starts "cooling", then it will change to what color you have it set for in the editor.

Hi!

#2 does this help? You who are crazy and understand these things lol

#3 I think the problem is something else, the two that don't work in color is because they are remote control thermostats, they actually repeat the signal. So even though it is an air controller, it is actually an IR. I will make some attempts to put the powe switch behind and see if I can get the color effect.

What is the instruction to hide the icon and the text with the device name?

Thanks.

Ah ha
#2 try

.thermostat div.cooling.w-full {position: relative; top: 20px; !important;}

#3 is a ah ha moment as well. IR blaster will not report State, and this is why it isn't working. I too had this issue with my ZXT-600's and use an underlayed tile to change the color based on temperature. I used the fan tile and wrote a rule to change the fan state at a certain temperature, worked like a charm. The thermo tile on top I made transparent to let the color through.

Here is what I done to achieve the color change under the thermo tile