I am newbie here, overall love the platform!!. I added my Ecowitt hub and I am working on the dashboard. The temp and humidity tiles were no problem, customized the colors using Templates. There is no "pressure" tile. I added it as an attribute tile, but can't customize the color. Am I missing something? I know there is Super Tiles, Master Tiles...etc. They all seem overly complicated.
I'll try and take a look at this for you sometime in the next few days (I took over this driver recently). Happy for anyone else to jump in with suggestions or setups they have used.
Thanks for the quick reply, and thanks for taking over the driver. I do see there are some html options within the driver. Take your time 
1 Like
I have a feeling this more a dashboard issue in general. Being able to customize an attribute tile. No?
Yes and no. Certainly plenty of customisation options via CSS, but not based on the attribute value. Might need to think about it some more.... And get back to work 
. (Me that is)
It is probably worth explaining a little more about what you want to do with the colour on the pressure tile.
If you want to set a fixed background or text colour for all attribute tiles, you can do that in the templates section under the default state. If you want to target just that pressure tile, leaving other attribute tiles unaffected, then custom CSS is probably the your best option. If you want to colour the tile based on the level of the pressure reading, separate virtual device(s) and an RM rule and some custom CSS may be required (not as scary as it may sound).
As a note, you cannot use HTML in a preference anymore so the HTML Tile Template that some drivers used to use is not as applicable. You can still use the template, just do not put HTML in it as the Hubitat will strip it out (it is removed as a security measure).
Some drivers have started doing workarounds to this (using [b] for bolding as an example).
1 Like
So to start with targeting a tile to change the background color. I tried the following, it does not work.
.tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}
#tile-5 .tile-title { visibility : visible !important;}
#tile-5 {backgroud-color: blue; !important;}Nevermind, spelling error
Can you guys point me in the right direction to learn how do this?
i used smartly but added my own values for color.. you need one for every value.. this is for temp
see the layout under dashboard tile advanced
basically each of these sets the template tile color.. the state = the value of the tile being displayed.. in the case below the temp is 99 degress
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "99"
},
{
"localization": "English",
"roundedCorners": 20,
"dateFormat": "MM/DD/YYYY",
"hideLabels": false,
"customColors": [
{
"template": "dimmer",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "dimmer",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgb(135,135,135)",
"state": "off"
},
{
"template": "motion",
"bgColor": "rgba(255,255,255,0.9)",
"iconColor": "rgb(0,0,0)",
"state": "inactive"
},
{
"template": "motion",
"bgColor": "rgba(255,248,46,.9)",
"iconColor": "rgb(0,0,0)",
"state": "active"
},
{
"template": "switches",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "switches",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgb(135,135,135)",
"state": "off"
},
{
"template": "multi",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "multi",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "window",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "window",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "open"
},
{
"template": "door",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "door",
"bgColor": "rgb(251,104,14)",
"state": "open"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "low"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "medium-low"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "medium"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "medium-high"
},
{
"template": "fan",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "high"
},
{
"template": "garage-control",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "garage-control",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "garage-control",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "garage-control",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "closing"
},
{
"template": "garage",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "garage",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "garage",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "garage",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "closing"
},
{
"template": "shades",
"bgColor": "hsla(0,0%,50.2%,.5)",
"iconColor": "",
"state": "off"
},
{
"template": "shades",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "",
"state": "on"
},
{
"template": "shades",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "shades",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "closing"
},
{
"template": "shades",
"bgColor": "rgb(67,166,52)",
"iconColor": "",
"state": "open"
},
{
"template": "door-control",
"bgColor": "rgb(251,104,14)",
"iconColor": "",
"state": "opening"
},
{
"template": "door-control",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "door-control",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "lock",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "locked"
},
{
"template": "lock",
"bgColor": "rgba(251,104,14,.9)",
"state": "unlocked"
},
{
"template": "water",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "wet"
},
{
"template": "water",
"bgColor": "rgba(0,243,255,0.9)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "dry"
},
{
"template": "smoke",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "detected"
},
{
"template": "smoke",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "clear"
},
{
"template": "bulb",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "bulb",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgb(135,135,135)",
"state": "off"
},
{
"template": "presence",
"bgColor": "rgba(27,176,116,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "present"
},
{
"template": "presence",
"bgColor": "",
"iconColor": "",
"state": "not present"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-20"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-19"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-18"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-17"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-16"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-15"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-14"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-13"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-12"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-11"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-10"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-9"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-8"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-7"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-6"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-5"
},
{
"template": "temperature",
"bgColor": "c8e3f9a6",
"state": "-4"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-3"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-2"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "-1"
},
{
"template": "temperature",
"bgColor": "#c8e3f9a6",
"state": "0"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "1"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "2"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "3"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "4"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "5"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "6"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "7"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "8"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "9"
},
{
"template": "temperature",
"bgColor": "#dbdee2a6",
"state": "10"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "11"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "12"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "13"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "14"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "15"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "16"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "17"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "18"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "19"
},
{
"template": "temperature",
"bgColor": "#c0d2e4a6",
"state": "20"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "21"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "22"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "23"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "24"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "25"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "26"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "27"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "28"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "29"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "30"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "31"
},
{
"template": "temperature",
"bgColor": "#153591a6",
"state": "32"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "33"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "34"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "35"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "36"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "37"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "38"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "39"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "40"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "41"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "42"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "43"
},
{
"template": "temperature",
"bgColor": "#1e9cbba6",
"state": "44"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "45"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "46"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "47"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "48"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "49"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "50"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "51"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "52"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "53"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "54"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "55"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "56"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "57"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "58"
},
{
"template": "temperature",
"bgColor": "#90d2a7a6",
"state": "59"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "60"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "61"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "62"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "63"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "64"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "65"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "66"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "67"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "68"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "69"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "70"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "71"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "72"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "73"
},
{
"template": "temperature",
"bgColor": "#44b621a6",
"state": "74"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "75"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "76"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "77"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "78"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "79"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "80"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "81"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "82"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "83"
},
{
"template": "temperature",
"bgColor": "#f1d801a6",
"state": "84"
},
{
"template": "temperature",
"bgColor": "#a6",
"state": "85"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "86"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "87"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "88"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "89"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "90"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "91"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "92"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "93"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "94"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "95"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "96"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "97"
},
{
"template": "temperature",
"bgColor": "#bs2323a6",
"state": "98"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "99"
},
{
"template": "temperature",
"bgColor": "#bc2323a6",
"state": "100"
},
{
"template": "temperature",
"bgColor": "rgba(86,58,171,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "default"
},
{
"template": "contact",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "closed"
},
{
"template": "contact",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "open"
},
{
"template": "bulb-color",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "bulb-color",
"bgColor": "rgba(255,255,255,.9)",
"iconColor": "rgba(135,135,135)",
"state": "off"
},
{
"template": "carbon-monoxide",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "detected"
},
{
"template": "carbon-monoxide",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "clear"
},
{
"template": "outlet",
"bgColor": "rgba(33,100,223,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "on"
},
{
"template": "outlet",
"bgColor": "rgba(255,255,255,0.9)",
"iconColor": "rgb(135,135,135)",
"state": "off"
},
{
"template": "humidity",
"bgColor": "rgba(58,186,161,.85)",
"iconColor": "rgb(255,255,255)",
"state": "default"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "50"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "51"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "52"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "53"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "54"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "55"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "56"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "57"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "58"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "59"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "60"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "61"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "62"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "63"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "64"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "65"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "66"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "67"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "68"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "69"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "70"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "71"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "72"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "73"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "74"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "75"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "76"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "77"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "78"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "79"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "80"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "81"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "82"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "83"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "84"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "85"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "86"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "87"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "88"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "89"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "90"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "91"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "92"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "93"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "94"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "95"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "96"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "97"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "98"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "99"
},
{
"template": "battery",
"bgColor": "rgba(0,255,105,0.75)",
"iconColor": "rgba(0,0,0,0.66)",
"state": "100"
},
{
"template": "battery",
"bgColor": "rgba(251,104,12,0.9)",
"iconColor": "rgb(255,255,255)",
"state": "16"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "15"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "14"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "13"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "12"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "11"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "10"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "9"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "8"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "7"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "6"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "5"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "4"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "3"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "2"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "1"
},
{
"template": "battery",
"bgColor": "rgba(255,0,0,0.65)",
"iconColor": "rgb(255,255,255)",
"state": "0"
},
{
"template": "music-player",
"bgColor": "rgba(20,20,20,.9)",
"iconColor": "",
"state": "default",
"customIcon": ""
}
],
"colWidth": 125,
"cloudRefresh": 5,
"hsmPin": "",
"hide3dot": false,
"clockMode": true,
"gridGap": 6,
"tiles": [
{
"template": "smartly",
"id": 0,
"device": "smartly",
"templateExtra": "{"tiles":{"0":{"id":0,"template":"thermostat","templateExtra":null,"pos":1,"mods":{"zoomable":{"value":null},"label":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}}},"1":{"id":1,"template":"thermostat","templateExtra":null,"pos":2,"mods":{"zoomable":{"value":null},"label":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}}},"3":{"id":3,"template":"dashboard","templateExtra":"67","pos":3,"mods":{"height_alignment":{"value":"full"},"buttonize":{"value":"unchecked","modifier":{"icon_only":{"value":"unchecked"}}},"icon":{"value":null},"zoomable":{"value":"1.5"},"label":{"value":"Home"},"color_fg":{"value":"rgba(255, 255, 255, 1.0)"},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"7":{"id":7,"template":"attribute","templateExtra":"lastUpdate","pos":4,"mods":{"unit":{"value":null},"numeric":{"value":"unchecked"},"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":"rgba(0, 0, 0, 0.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"9":{"id":9,"template":"attribute","templateExtra":"lastUpdate","pos":5,"mods":{"unit":{"value":null},"numeric":{"value":"unchecked"},"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":"rgba(0, 0, 0, 0.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"10":{"id":10,"template":"humidity","templateExtra":"outdoorHumidity","pos":6,"mods":{"title":{"value":"Outdoor Humid."},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":"rgba(0, 0, 0, 0.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"11":{"id":11,"template":"temperature","templateExtra":"battery","pos":7,"mods":{"title":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"13":{"id":13,"template":"temperature","templateExtra":"outdoorTemperature","pos":8,"mods":{"title":{"value":"Outdoor Temp."},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":"rgba(0, 0, 0, 0.0)","modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"14":{"id":14,"template":"humidity","templateExtra":null,"pos":9,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"15":{"id":15,"template":"humidity","templateExtra":null,"pos":10,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"16":{"id":16,"template":"temperature","templateExtra":null,"pos":11,"mods":{"title":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"17":{"id":17,"template":"texttile","templateExtra":"Steam Humidifier Info:","pos":12,"mods":{"text_alignment":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}}},"18":{"id":18,"template":"attribute","templateExtra":"humidifierStatus","pos":13,"mods":{"unit":{"value":null},"numeric":{"value":"unchecked"},"title":{"value":"Status"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"19":{"id":19,"template":"attribute","templateExtra":"humidifierLowerLimit","pos":14,"mods":{"unit":{"value":"%"},"numeric":{"value":"unchecked"},"title":{"value":"Minimum"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"20":{"id":20,"template":"attribute","templateExtra":"heatingSetpoint","pos":15,"mods":{"unit":{"value":"%"},"numeric":{"value":"unchecked"},"title":{"value":"SetPoint"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"21":{"id":21,"template":"attribute","templateExtra":"humidifierUpperLimit","pos":16,"mods":{"unit":{"value":"%"},"numeric":{"value":"unchecked"},"title":{"value":"Maximum"},"text_alignment":{"value":null},"remove_title":{"value":"unchecked"},"nudge":{"value":"unchecked"},"icon":{"value":null},"zoomable":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}}},"settings":{"calibration":{"devices":["lg_v20"],"devices_2col":null,"source":"\/var\/www\/html\/smartly\/assets\/data\/device_cals.json","colwidth":135,"gridgap":15,"colcount":3},"iconSize":"53","fontSize":20,"commit":"9621aa326d944b39fea8ea373ba73507a6c7d388"},"dashboard":{"mods":{"cal_devices":["lg_v20"],"cal_devices_2col":null,"header":{"value":"default"},"hide_scrollbars":{"value":null}}}}"
},
{
"rowSpan": 2,
"template": "thermostat",
"col": 1,
"colSpan": 2,
"id": 0,
"row": 1,
"device": "438"
},
{
"rowSpan": 2,
"template": "thermostat",
"col": 1,
"colSpan": 2,
"id": 1,
"row": 6,
"device": "291",
"templateExtra": null
},
{
"rowSpan": 1,
"template": "dashboard",
"col": 1,
"colSpan": 3,
"id": 3,
"row": 15,
"device": "0",
"templateExtra": "67",
"linkName": "Home"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 3,
"colSpan": 1,
"id": 7,
"row": 1,
"device": "438",
"templateExtra": "lastUpdate"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 3,
"colSpan": 1,
"id": 9,
"row": 6,
"device": "291",
"templateExtra": "lastUpdate"
},
{
"rowSpan": 1,
"template": "humidity",
"col": 3,
"hideUnit": false,
"colSpan": 1,
"id": 10,
"row": 3,
"device": "440",
"templateExtra": "outdoorHumidity"
},
{
"rowSpan": 1,
"template": "temperature",
"col": 1,
"hideUnit": false,
"colSpan": 1,
"id": 11,
"row": 3,
"device": "438",
"templateExtra": "battery"
},
{
"rowSpan": 1,
"template": "temperature",
"col": 3,
"hideUnit": false,
"colSpan": 1,
"id": 13,
"row": 2,
"device": "439",
"templateExtra": "outdoorTemperature"
},
{
"rowSpan": 1,
"template": "humidity",
"col": 2,
"colSpan": 1,
"id": 14,
"row": 3,
"device": "438"
},
{
"rowSpan": 1,
"template": "humidity",
"col": 2,
"colSpan": 1,
"id": 15,
"row": 8,
"device": "291"
},
{
"rowSpan": 1,
"template": "temperature",
"col": 1,
"colSpan": 1,
"id": 16,
"row": 8,
"device": "291"
},
{
"rowSpan": 1,
"template": "texttile",
"col": 1,
"colSpan": 2,
"id": 17,
"row": 4,
"templateExtra": "Steam Humidifier Info:"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 1,
"colSpan": 1,
"id": 19,
"row": 5,
"device": "438",
"templateExtra": "humidifierLowerLimit"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 2,
"colSpan": 1,
"id": 20,
"row": 5,
"device": "438",
"templateExtra": "humidifierSetPoint"
},
{
"rowSpan": 1,
"template": "attribute",
"col": 3,
"colSpan": 1,
"id": 21,
"row": 5,
"device": "438",
"templateExtra": "humidifierUpperLimit"
},
{
"rowSpan": 2,
"template": "thermostat",
"col": 1,
"colSpan": 2,
"id": 22,
"row": 9,
"device": "1810"
},
{
"rowSpan": 1,
"template": "temperature",
"col": 1,
"colSpan": 1,
"id": 23,
"row": 11,
"device": "1810"
},
{
"rowSpan": 2,
"template": "attribute",
"col": 3,
"colSpan": 1,
"id": 24,
"row": 9,
"device": "1810",
"templateExtra": "lastUpdate"
},
{
"rowSpan": 2,
"template": "thermostat",
"col": 1,
"colSpan": 2,
"id": 25,
"row": 12,
"device": "1842"
},
{
"rowSpan": 1,
"template": "temperature",
"col": 1,
"colSpan": 1,
"id": 26,
"row": 14,
"device": "1842",
"templateExtra": null
},
....
1 Like
This is CSS?
Oh JSON. Getting a little confused, should I changed BG colors in CSS of JSON?
No. This is the dashboard structure in its JSON format. It does encapsulate the local CSS modifications. You can find it if you search it for smartly.
1 Like
What is "templateExtra"?
That is additional information about the device this tile represents. For example: for a dashboard tile, templateExtra defines the specific dashboard (app number). For a link, it is the url.
1 Like
I was going to suggest some virtual switches, a rule and some overlayed tiles, but seems like you have a solution, nice work @kahn-hubitat, I never knew you could define CSS for values like that, good to know...
2 Likes
Thanks for your help guys!
2 Likes
