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

[WMarcolin]

@chad.andrews

#tile-101 div.weatherTemperature {position: relative; top: 20px !important;}
#tile-101 div.weatherHumidity {position: relative; top: 20px !important;}

Perfect!!

[WMarcolin]

YYYYYYYYEEEEEEESSSSSSSSSSSSS

Thank you very, very much!!!

Now I have to go to work, in the evening I will understand everything you sent. Thank you very much!

[chad.andrews]

Lol, no problem!

[WMarcolin]

Hi,

Well, I've made some progress in the creation of what will be my custom thermostat, but I still need a lot of help from you guys

Below a picture of what I have for now, and then my requests for help.

1. The first column, I had to create a virtual switch, that has the function to turn the air on and off, that I determine the set mode from idle/off to cool, so I won't use the mode and fan mode selectors;
2. The second column I am effectively using the thermostat, I have removed almost all the information, leaving only the temperature selector that appears when the air is on. HELP > is it possible to set the selector to be in the center of the tile?
3. Column two I am using the thermostat tile, see that on line 2 and 4 I have air on. The difference is that row two the mode is "cool" and row four the mode status is "cooling" which is recognized on the dashboard, and thus changes the backround color to blue. HELP > is it possible to adjust something to recognize cool as cooling?
4. To create the perception of being a single tile (Line 3 Collum 4), I added a picture tile, and on it I put the three function tiles. But it is possible to see that it is a different color, a gradient from the background. HELP > how to remove the background of the three tiles leaving only the image tile behind?
5. In line 1, I added the image tile after I already had the other tiles, and so the tile overlaps the others. HELP > How is it possible to change the order of the tiles so that it moves to the back?

Sorry for so many requests @chad.andrews, I am still trying to learn and you have already helped a lot. Likewise thanks @sburke781, great motivator on how to learn to customize.

A clarification. Here we only use the air conditioning in cool mode, there is no air with heater, because I live in Panama and the temperature when it gets below 24 degrees is like a polar cold for us. For this reason the set mode button, like several selectors, is bad, it is not used.

Thanks

[WMarcolin]

Additional comment on why not to use the original thermostat tile:
a. I don't want to have the various thermostat mode options, only the cool (on) and off (column 1);
b. Not every thermostat has humidity information, so I use another sensor in the room that has humidity and temperature, and not the one in the thermostat (row 1 and row 4 - column 3).

[sburke781]

This is what I remembered seeing @WMarcolin, see the thermostat control on the top left. Not sure if this is of any benefit at this stage....

Show Off Your Dashboards!

Winter is back so I decided to redesing my dashboard. This is what I came up with so far: [Capture-20211214184135]

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