I've been working on a thermostat project and had to get grips with the thermostat css in the dashboard. I'd seen quite a few questions from people trying to customize this so I created this as a tool to help identify the various components.
This is what an idle thermostat tile looks like in 2 x 2 size.
/* For diagnostic purposes every object has a border. These can be turned off by setting the border width to 0px using the BW CSS variable */
:root {--BW:2px;}
/* Thermostat tile - makes the tile transparent and brings it to the front */
[class*='thermostat']{outline:var(--BW) dashed red}
/* Thermostat tile - Top Line which contains temperature and status */
.thermostat div.self-start {outline:var(--BW) dotted orange; color:red}
/* The Temperature Up\Down controls */
[class*='he-circle-down']{outline:var(--BW) dotted blue}
[class*='he-circle-up']{outline:var(--BW) dotted blue}
/* Information box between the two temperature arrows */
.thermostat div.inline-block { outline:var(--BW) dashed green}
/* Container for the two mode buttons */
.thermostat div.w-full.my-1 {outline:var(--BW) dotted indigo}
/* The Cool Mode and Fan Mode Buttons */
.thermostat div.w-full.my-1>div.inline-block {outline:var(--BW) dotted violet}
/* The container for the device name at the bottom of the Tile */
.thermostat div.absolute.bottom-0.text-center.w-full {outline:var(--BW) dotted white}
With this CSS in place each of the components is identified by the colored box.
If you want to manipulate an item you can add CSS commands to that section like this:
/* The Temperature Up\Down controls */
[class*='he-circle-down']{outline:var(--BW) dotted blue; color:blue}
[class*='he-circle-up']{outline:var(--BW) dotted blue; color:red}
The change shows up.
Once you are done change the CSS BW variable to 0 like this:
:root {--BW:0px}
....and all of the borders disappear.
Sometimes the change takes effect right away when you save the CSS and other times you must refresh your browser for the changes to become visible.
The goal behind all of this was to create an attractive thermostat using Tile Builder. Not quite finished but it looks like this.
