No need for the space in between red and the semicolon. Also use card_mod: style: (see README for new syntax).
@KTibow thank you so much for your assistance.
I am sorry to trouble you yet again. I have tried the readme and have made the follwoing changes. Still no luck.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
card_mod: null
style: |
ha-card {
--paper-item-icon-color:red
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
No, not like that.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
card_mod:
style: |
ha-card {
--paper-item-icon-color: red;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
Thank you again for your help.
I think I did as you suggested, but still no luck.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
card_mod:
style: |
ha-card {
--paper-item-icon-color: red;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
Styling Glance card:
Check this:
type: vertical-stack
cards:
- type: glance
title: Colored icons
style: |
ha-card {
--paper-item-icon-color: red;
}
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_1_co2
- type: glance
title: Colored icon (1st entity)
entities:
- entity: sensor.cleargrass_1_co2
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.cleargrass_1_co2
The code does this:
Update:
The example above is 100% valid for "sensor".
For entities like "sun.sun", "binary_sensor" it it may not work.
Check this:
type: vertical-stack
cards:
- type: glance
state_color: true
title: '--paper-item-icon-color'
entities:
- entity: sensor.cleargrass_1_co2
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sun.sun
name: styling failed
style: |
:host {
--paper-item-icon-color: red;
}
- type: glance
state_color: true
title: '--paper-item-icon-color: binary_sensor'
entities:
- entity: binary_sensor.service_on_value
name: styling failed
style: |
:host {
--paper-item-icon-color: red;
}
- entity: binary_sensor.iiyama_2_ping_availability_status
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- type: glance
state_color: false
title: '--paper-item-icon-color: binary_sensor'
entities:
- entity: binary_sensor.service_on_value
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- entity: binary_sensor.iiyama_2_ping_availability_status
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- type: glance
title: using long syntax
entities:
- entity: sensor.cleargrass_1_co2
name: styling OK
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
- entity: sun.sun
name: styling OK
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
- entity: binary_sensor.service_on_value
name: styling OK
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
For
"binary_sensor" the short notation "--paper-item-icon-color" will not work in case:
- the sensor = ON
- state_color: true
But the “long notation” (using DOM) will work.
And this is not a Glance card.
This looks like a ‘custom:button-card’ more; mixed code - something from button-card, but “type: glance”.
If you prefer using the button-card then changing a color may be done by button-card itself without card-mod.
If you prefer using a glance card - remove these extra lines from the code.
Hey! This is good stuff!
If you want, please feel free to add this information to the wiki on github.
1 Like
I never did it before… Need to learn first, thank you! And need to verify every case again.
Thank you so much for your assistance. It all works.
What did you do finally?
Rebuild the code for Glance or for button-card?
Thank you. I rebuilt the code for the Glance card using
type: glance
state_color: false
title: '--paper-item-icon-color: binary_sensor'
entities:
- entity: lock.front_door
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
Was the lock icon’s color always yellow without using “style”?
Was it yellow when the lock = “locked” and of some default color when unlocked?
If so then you shoud not set it always red; probably it must be red only if locked.
Yes the lock icon was always yellow.
Yes that is my next challenge to get it to show green when locked and red when unlocked.
I will start work on that code tonight. Any guidance would be much appreciated.
You have been very helpful.
Thank you.
sorry for the direct tag @Ildar_Gabdullin, but latest card-mod gives me flickering badges which we discussed heavily before ;-=) …
what should I have changed according to the latests ideas of correct modding here:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
.: |
:host {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
constant flickering of the state, and in a lesser way, the badge color…
I moved the :host section like:
style: |
:host {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
which seems to stop flickering, but I am uncertain if this will even mod according to state when they change… also, I lost the coloring of the text in the label. So, cut it short:
how to combine the
style: |
:host
with the
style: |
ha-state-label-badge
rechecking: 🔹 Card-mod - Add css styles to any lovelace card which you adapted, makes me change to:
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.: |
.badge-container .label-badge .label span {
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
.: |
ha-label-badge {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
but then the flickering is back, and the page is almost unloadable, causing the fans overtime… must be me missing things 
could you please have a check on this syntax? thanks!
I simulated your case.
First, let’s exclude conditions.
There are 3 examples in your post - I will name them “Marius 1”, “Marius 2”, “Marius 3”.
So we have:
- Marius 1
- Marius 1 (+my correction)
- Marius 2
- Marius 2 (+my correction)
- Marius 3
- entity: device_tracker.iiyama_1_ping_device_tracker
name: Marius 1 (w/o .badge-container) life360
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span {
color: black;
}
.: |
:host {
--label-badge-red: green;
}
- entity: device_tracker.iiyama_1_ping_device_tracker
name: Marius 1 (with .badge-container) life360
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: black;
}
.: |
:host {
--label-badge-red: green;
}
- entity: device_tracker.iiyama_1_ping_device_tracker
name: Marius 2 (w/o .badge-container) life360
style: |
:host {
--label-badge-red: green;
}
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span {
color: black;
}
- entity: device_tracker.iiyama_1_ping_device_tracker
name: Marius 2 (with .badge-container) life360
style: |
:host {
--label-badge-red: green;
}
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: black;
}
- entity: device_tracker.iiyama_1_ping_device_tracker
name: Marius 3 life360
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.: |
.badge-container .label-badge .label span {
color: black;
}
.: |
ha-label-badge {
--label-badge-red: green;
}
As I see, the “span” is not black if ".badge-container" is missing.
The “Marius 2” cases will not work - in my experience this code never works:
style: |
:host {
xxxx
}
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
xxx
}
Also, may be it is not important - you missed a space " " after the "span" word.
Now lets experiment with the 3rd case (replaced "bij" with "мки"):
- entity: device_tracker.iiyama_1_ping_device_tracker
name: Marius 3 (+conditions) life360
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.: |
.badge-container .label-badge .label span {
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
.: |
ha-label-badge {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'мки' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
I tested with device_trackers located in different places (some of them = a “zone”).
I do not see any flickering.
Tested with Chrome (cleared History).
I propose you to do the following:
- create an Entities card;
- add the entities which are flickering now;
- apply a similar styling;
- check if it flickers.
What do you use for device_trackers as a platform?
Is it Life360? I am using it too (+ping).
wow. thanks…
using the person trackers, which incorporate the life360 platform yes. and some more…
this works:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span{
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
.: |
:host {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
missing culprit: .badge-container in front of the first .lable-badge
seems solid as ever.
btw, where you’re from (‘мки’) Is that Cyrillic from Russia?
But your 3rd example was with ".badge-container" - and you wrote that it was flickering.
So, my example = your 3rd example.
I live in Moscow region, right)
don’t get it. It’s flickering again… sorry.
Send me a video please.
And once again I want to propose to check your entities in the Entities card - may be it is a problem of device_tracker itself.
I’ve started playing around with Home Assistant and Card mod, loving the customisability so far! Only I have one problem and it’s because I lack some knowledge of writing the right code. How do you combine two pieces of selectors which lead to different shadow-roots, while having the same parent element?
For example this:
card_mod:
style:
hui-generic-entity-row:
ha-slider:
$:
paper-progress:
$: |
#progressContainer {
background: red;
}
hui-generic-entity-row:
ha-slider:
$: |
.slider-knob-inner {
background-color: none;
}
How do I combine these two custom CSS classes? Currently I get the error:
Configuration errors detected:
duplicated mapping key at line 147, column -152:
hui-generic-entity-row:
^