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

[chad.andrews]

@WMarcolin
For #2 add this to your CSS, adjust px to center.

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

For #3, could you set the "cool" color the same blue as the "cooling" in templetes color editor?

For #4 try this, replace 0 with your specific tile

#tile-0 {background-color: rgba(100,100,100,0.0); !important}

For # 5, yes, it can be done. You have to reorder your tile numbers, either in the JSON, or you can delete the tiles under it and re add them and they will be over it

[sburke781]

For 5 you can also adjust the z-index of the tiles, a higher value will put tiles further to the front of overlapped tiles. E.g.

#tile-38 {z-index: 100; !important;}

#tile-40 {z-index: 150; !important;}

Here tile 40 will appear on top of tile 38.

[WMarcolin]

Wow very beautiful, how do I hire this artist?

[sburke781]

Many around here are happy to share their secrets , you could ask @ymerj how he did the cut down thermostat control.

[chad.andrews]

@sburke781 . Was it yourself that was trying to develop a CSS editor app?

[thebearmay]

He is guilty as charged :

[PROJECT] Custom CSS Editor - Now Released See Notes Below

EDIT - This is now released, but I chose to setup a separate thread to start with a clean slate, i.e. no need to include my thought bubbles along the way listed here I've been playing around with the idea of having a "button" on my dashboards where I can make some of the more common CSS styling options available more easily, such as hiding tile titles, adjusting text, placement and size of the refresh config icons, etc. Using a HTML file with some JavaScript, an IFrame virtual…

[chad.andrews]

Ahhhh @thebearmay I knew it was someone here. That would be a real advantage to those of us who use the HE Dashboards.

[thebearmay]

He's come a long way with it.

[chad.andrews]

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

[sburke781]

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.

[chad.andrews]

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

[user136]

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.

[sburke781]

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

Color changing temp tiles

what is the issue with this not working as I have an old verison of smarttiles and it works fine there? it appears not to work because the value on the tile.. temp tiles and others is just free formating text.. They need to change the driver to put out a tag data-value="75" etc on the tag that has the value.. that is all that is needed then we can change color and other based on the value.. should be an easy change in the source.. Who do we need to contact to do this.. /* Temperature Ranges u…

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

[WMarcolin]

Hi @chad.andrews !

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

#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;}

#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"
    }

#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!

[chad.andrews]

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?

[WMarcolin]

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.

[chad.andrews]

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;}

[chad.andrews]

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

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

[sburke781]

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.

[chad.andrews]

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.