Hello,
Is there a way to have the battery tile colors turn to red when below 20%?
Thank You
You'd have to create 100 CSS entries (or at least entries for 0-20) in the general format of:
.battery-999 {background-color:red}
where 999 is the battery%
1 Like
Thanks, I am surprised there is not a "less than" command that can be used.
Also, how can I get the tile text to be over the tile color and have the tile color fill the entire tile?
Now you're rapidly approaching the limit of my CSS expertise. 
Let's see if @sburke781 is around (you may also want to take a look at a cool app he wrote: [RELEASE] Simple CSS Editor).
1 Like
I feel like I have seen it done before, but will need to go hunting. Might be later today or tomorrow before I can though.
Thankfully the time difference makes it look like I made that comment only 1 day ago 
Hmmm.... I would probably need to spend a little more time searching to give you a more considered response (I feel like I'm at work ). The point being there are complicated options, but whether they are worth recommending, I'm not sure. If you are interested you can lookup some of the CSS that people came up with during the incarnation of the Smartly solution by searching for "smartly humidity color".
I may consider something along these lines myself, but no promises....
I am surprised there isn't a native option to change tile color based on a condition with a < or > option.
Thanks
Matt
From what I understand, and this is not a "it can't be done....", It would likely require something in the driver, which would include every driver that implements the humidity (and temperature, etc) driver... So not a super convenient option for all implementations of the capability.
I'd also add, some of the limitation (maybe most of it) in providing a "convenient" solution comes from limitations in CSS, noting to do with HE.
If the tiles currently show battery levels, then it would just be a dashboard display issue correct?
Thanks
Matt
I've probably confused matters with some of my earlier comments. I agree it would be nice if there could be a built-in ability to produce coloring of the tile based on a range. I could try to add something to my editor, but I can't guarantee when. Conceptually it would not be hard to do....
1 Like
I was searching for a way to do this and ran across this thread. Here's what I came up with..
#tile-19:has(.battery-60,.battery-59,.battery-58,.battery-57,.battery-56,.battery-55,.battery-54,.battery-53,.battery-52,.battery-51,.battery-50,.battery-49,.battery-48,.battery-47,.battery-46,.battery-45,.battery-44,.battery-43,.battery-42,.battery-41,.battery-40,.battery-39,.battery-38,.battery-37,.battery-36,.battery-35,.battery-34,.battery-33,.battery-32,.battery-31) { background-color: rgba(240,255,0,.5)!important; }
#tile-19:has(.battery-30,.battery-29,.battery-28,.battery-27,.battery-26,.battery-25,.battery-24,.battery-23,.battery-22,.battery-21,.battery-20,.battery-19,.battery-18,.battery-17,.battery-16,.battery-15,.battery-14,.battery-13,.battery-12,.battery-11,.battery-10,.battery-9,.battery-8,.battery-7,.battery-6,.battery-5,.battery-4,.battery-3,.battery-2,.battery-1,.battery-0) { background-color: rgba(255,0,0,0.5)!important; }
1 Like
just what I've been looking for. Where do you put that code?
if you dont want to set of every tile but on every color you can do this.. it goes in the layout section of the legacy dashboard.. not sure if you are asking there or the newer dashboard.
{
"localization": "English",
"roundedCorners": 20,
"dateFormat": "MM/DD/YYYY",
"hideLabels": false,
"customColors": [
{
"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"
},
Awesome - thank you. How do you alter the Layout section? I can add to the CSS section but can't alter the Layout section. Really appreciate your help.
i am not sure what you are asking what do you need to change in the layout
Sorry, let me be clearer - when I go to paste the new code in to the LAYOUT section, do I just replace the existing piece of code which describes the "battery template"?
no i did not upload my entire section as that would not make sense for you.. you have to paste it in piecemail in the custom color section of your own layout
thank you - got it working! Brilliant!
