Start with fixing the typo: ācard_modā.
In general. In general in technics.
Test with a simple case first.
- type: 'custom:simple-thermostat'
... as minimal as possible for this card to be shown
card_mod:
style: |
ha-card {
background: red;
}
Thanks! Works with --tile-color:
Thanks for pointing me your great list 
Works!
Illdar
I canāt believe you saw this typo right away - I have been staring at this for week now, without seeing it.
Problem solved !
Thank you so much.
/Michael J
I got this working, in case someone needs it here the solution:
square: false
columns: 2
type: grid
cards:
- features:
- type: target-temperature
type: tile
entity: climate.heizung_wohnzimmer
name: Wohnzimmer
icon: mdi:heating-coil
show_entity_picture: false
vertical: true
tap_action:
action: toggle
state_content:
- current_temperature
- valve_open_percent
card_mod:
style:
ha-tile-info$: |
.secondary:after {
visibility: visible;
content: " - {{ states('sensor.shelly_ht_wohnzimmer_humidity') }}%";
.: |
ha-card {
--ha-card-background:
{% set state = ((states('sensor.luften_wohnzimmer')) | string) %}
{% if (state == "Egal" ) %}
{% set color = 'var(var(--paper-toggle-button-unchecked-button-color))' %}
{% elif (state == "Ja" ) %}
{% set color = '#145A32' %}
{% else %}
{% set color = '#78281F' %}
{% endif %}
{{ color }};
}
.info {
{% if states('binary_sensor.fenster_wohnzimmer_alle') == 'on' %}
--primary-text-color: #039be5;
{% endif %};
}
hui-card-features {
{% if states('binary_sensor.fenster_wohnzimmer_alle') == 'on' %}
--primary-text-color: #039be5;
{% endif %};
}
Can anyone suggest an avenue to explore to get the battery icon colored via the following code in custom-auto-enties using a glance card? or an alternative idea?
Green-to-red icon color gradient template (battery percentage)
Example #1
type: custom:button-card
entity: sensor.s22_ultra_battery_level
show_state: true
variables:
var_color: |-
[[[
var percentage = entity.state;
var r = 0; var g = 0; var b = 0;
if (percentage < 50 ) {
var r = 255;
var g = parseInt(5.1 * percentage);
} else {
var g = 255;
var r = parseInt(510 - 5.10 * percentage);
}
var h = r * 0x10000 + g * 0x100 + b * 0x1;
return '#' + ('000000' + h.toString(16)).slice(-6);
]]]
styles:
icon:
- color: '[[[ return variables.var_color ]]]'
Example #2
type: custom:mushroom-template-card
entity: sensor.s22_ultra_battery_level
primary: '{{ state_attr(entity, "friendly_name").title() }}'
secondary: '{{ states(entity) + "%" }}'
layout: vertical
icon: |
{% set battery_level = states(entity) | int // 10 * 10 %}
{% set charging_state = states('sensor.s22_ultra_charger_type') %}
{% set is_charging = is_state('binary_sensor.s22_ultra_is_charging', 'on') | iif(True, False) %}
{% set map = {"none":"", "ac":"charging-", "wireless":"charging-wireless-"} %}
{% set charging = map[states('sensor.s22_ultra_charger_type')] %}
{% if battery_level == 100 and is_charging == True %} mdi:battery-charging
{% elif battery_level == 100 %} mdi:battery
{% elif battery_level >= 10 %} mdi:battery-{{charging}}{{battery_level}}
{% elif battery_level >= 0 %} mdi:battery-{{charging}}outline
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set percentage = states(entity) | int %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
Iāve tried every which way from Sunday but to no avail. This is my most recent code but I canāt figure out a way to use the JS from above in any way shape or form:
type: custom:auto-entities
card:
type: glance
title: Batteries
columns: 3
theme: airy
show_name: true
show_icon: true
show_state: true
state_color: false
card_mod:
style:
.entity:
$: |
state-badge {
color: red;
}
filter:
include:
- entity_id: '*battery'
options: {}
- entity_id: '*battery_level'
exclude:
- state: unknown
- entity_id: automation*
- entity_id: '*low_battery*'
- entity_id: sensor.my_phone_battery_level
sort:
method: state
reverse: false
numeric: true
Iāve managed to make this card but Iām still trying to conquer auto-entities & glance!
If I canāt solve it I will go with this insteadā¦
type: custom:battery-state-card
sort: state
colors:
steps:
- value: 15
color: '#FF0000'
- value: 50
color: '#FFD500'
- value: 52.11
color: '#F1D100'
- value: 54.21
color: '#E4CD00'
- value: 56.32
color: '#D6C901'
- value: 58.42
color: '#C9C601'
- value: 60.53
color: '#BBC201'
- value: 62.63
color: '#AEBE02'
- value: 64.74
color: '#A1BB02'
- value: 66.84
color: '#93B702'
- value: 68.95
color: '#86B303'
- value: 71.05
color: '#78B003'
- value: 73.16
color: '#6BAC04'
- value: 75.26
color: '#5DA804'
- value: 77.37
color: '#50A504'
- value: 79.47
color: '#43A105'
- value: 81.58
color: '#359D05'
- value: 83.68
color: '#289A05'
- value: 85.79
color: '#1A9606'
- value: 87.89
color: '#0D9206'
- value: 90
color: '#008F07'
- value: 92.5
color: '#00AB08'
- value: 95
color: '#00C70A'
- value: 97.5
color: '#00E30B'
- value: 100
color: '#00FF0D'
gradient: true
filter:
include:
- name: entity_id
value: '*_battery_level'
- name: entity_id
value: '*battery'
exclude:
- name: state
value: 94
operator: '>'
- name: entity_id
value: '*low_battery_level'
- name: entity_id
value: '*consumption*'
- name: entity_id
value: '*phone_battery*'
yep, it is really odd, but using the battery device_class entities, I cant override the state-colors eitherā¦
nvm the template I use (you can simply replace that by any valid jinja template )
Iāve also tested some of the other formats for modding the state-badge color
- type: custom:auto-entities
card:
type: glance
columns: 5
filter:
exclude:
- domain: binary_sensor
- state: unavailable
include:
- attributes: {device_class: battery}
options:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity)|int(-5) %}
{% if state > 90 %} black
{% elif state > 70 %} pink
{% elif state > 50 %} maroon
{% elif state > 30 %} purple
{% else %} salmon
{% endif %};
}
sort: {method: state, numeric: true}
Man, that works! I know I was close, at some point or another!
And my version (based on your template)ā¦
type: custom:auto-entities
card:
type: glance
columns: 3
theme: airy
show_name: true
show_icon: true
show_state: true
state_color: false
filter:
include:
- entity_id: '*battery'
options:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set percentage = states(config.entity)|int(0) %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
}
- entity_id: '*battery_level'
options:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set percentage = states(config.entity)|int(0) %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
}
exclude:
- state: unknown
- entity_id: automation*
- entity_id: '*low_battery*'
- entity_id: sensor.my_phone_battery_level
sort:
method: state
reverse: false
numeric: true
Thank you!
you beat me to it on the state_color: false ā¦
Ive always figured that (false) to be the default, as we need to set it to true normallyā¦
while weāre on the subject of modding this glance cardā¦ itās the only card in my config I cant get the scroll bar to go all the way to the top:
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px -16px -16px -16px;
}
.entities {
height: 500px;
overflow-y: scroll;
}
Ya, that one is a bugger! Iāve had to re-read the docs a few times to get itā¦
Beats me (at the moment)!
Itās late here (01:40 PST) and Iāve been trying to beat the icon color all day, last night, yesterday, and the day before!!
itās the one exceptionā¦
while entities:
how confusingā¦
all the more so, since this is not required when modding an individual entity in a listed configā¦
btw, we can also use:
--card-mod-icon-color:
I had gone down that road also, and failed!
And I also tried via custom-uiā¦
# customize_glob:
# "*.*":
# hide_attributes:
# - templates
#
# sensor.*_battery_level:
# templates:
# icon_color: |-
# {% set percentage = states(entity) | int %}
# {% set r, g, b = 0, 0, 0 %}
# {% if (percentage <= 51) %}
# {% set r = 255 %}
# {% set g = (5.0 * percentage) | round | int %}
# {% else %}
# {% set g = 255 %}
# {% set r = (505 - 4.89 * percentage) | round | int %}
# {% endif %}
# {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
#
# icon_color: '[[[ var r = 0; var g = 0; var b = 0; if (state < 50 ) { var r = 255; var g = parseInt(5.1 * state); } else { var g = 255; var r = parseInt(510 - 5.10 * state); } var h = r * 0x10000 + g * 0x100 + b * 0x1; return '#' + ('000000' + h.toString(16)).slice(-6); ]]]'
custom-ui uses javascript and works perfectlyā¦ (and remember, it also colors the more-info icon)
like this:
templates: &battery_color
icon_color: >
if (state > 75) return 'green';
if (state > 50) return 'gold';
if (state > 25) return 'orange';
if (state > 10) return 'brown';
return 'red';
weāve updated it recently and more is coming
I am wary to promote it though, but go here if you need some template examples
btw, I did ask the dev team to add more granularity to the current battery-state-color, but no response was given. Currently, the settings are too crude to be useful.
For some reason custom-ui is dragging my system to its knees now to the point of the UI being unresponsive and I have to resort to ssh and undo my change(s) & ha core restart. Latest addition to break itā¦
please open issue in repo
letās no pollute this thread
Thank you I was over complicating it. yes needed to be above attributes. At card level not tab level thanks again.
hey, can anybody help?
i tried this, but the first icon doesnt remove.
the selected icon doesnt overlay.
how can i put the image over the custom image?
Can you post your code?
