Hi. I have several "custom:simple-thermostat" cards. Based on the entity state (heat/off) I’m changing the background color for them. After updating to card-mod version 3.0.3 the cards are flickering like changing their backgrounds to default --card-background-color and back to state evaluated background color. Downgrading back to card-mod version 3.0.2 and clearing the cache ends the flickering. I’m missing something or…? If I remove the if condition the flickering stops. Here is my code:
- type: "custom:simple-thermostat"
entity: climate.kitchen
name: Kitchen
icon: none
control:
hvac:
'off':
include: true
icon: false
'heat':
include: true
name: Heat
icon: false
'auto':
include: false
name: Automatic
icon: false
preset:
away: false
home: false
sensors:
- entity: binary_sensor.window_1
name: Window
card_mod:
style: |
:host {
pointer-events: none;
}
card_mod:
style: |
ha-card {
background: {% if is_state('climate.kitchen', 'off') %} black {% else %} red {% endif %};
}
I’m hoping this should be fixed with 3.0.4
Thank you for your efforts!
Also, this code stopped working (since 3.x):
type: entities
title: 'Common: color name & value'
style:
hui-text-entity-row:
$:
hui-generic-entity-row: |
.text-content {
color: red;
}
.:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: green;
}
entities:
- entity: sun.sun
- entity: sun.sun
The names are not colored, only values are.
Another variant - does work:
- type: entities
title: 'Common: color name & value (#2)'
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: green;
}
.: |
.text-content {
color: red;
}
entities:
- entity: sun.sun
- entity: sun.sun
This code worked with 2.x:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.yandex_time_home_ildar
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
}
.:
'div.entity:nth-child(2) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
}
'div.entity:nth-child(4) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- entity: sensor.yandex_time_home_ildar
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: sensor.yandex_time_home_ildar
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: xxxcc
name: Colored all icons
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
Now with 3.x the result is below - the secondary icons are not colored:
Another variant - does work:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.yandex_time_home_ildar
style:
hui-generic-entity-row:
'div.entity:nth-child(2) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
}
'div.entity:nth-child(4) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
}
entities:
- entity: sensor.yandex_time_home_ildar
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: sensor.yandex_time_home_ildar
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: xxxcc
name: Colored all icons
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
.:
anything:
was never supposed to work, and when it did (by chance) it was exactly the same as
anything:
.: is always the end of the chain.
That is an unpleasant surprise for me… but very useful.
I need to revise my code, THANK YOU!
P.S. Made corrections in a code for styling examples according to this post.
Corrections made for some examples in these posts:
Entities card
custom:mini-media-player
custom:multiple-entity-row
Badges
Hi All,
Though it’s supposed to be allowed now, I’m still struggling with my picture-element styling. I guess the problem is not with the code, there must be some settings I missed, cause nothing applies inside my state-badge.
Here is my original plan to change border color if the state changes. (binary sensor)
- type: state-badge
entity: binary_sensor.magnet_window_garage_contact
card_mod:
style: |
:host {
{% if is_state('binary_sensor.magnet_window_garage_contact', 'off') %}
--label-badge-blue: #03A9F4; {% endif %};
{% else %} --label-badge-blue: #fd79a8; {% endif %};
color: #fff;
}
When try a simple label-badge coloring, it gives back the original style, ergo it does not apply.
‘’’
- type: state-badge
entity: binary_sensor.magnet_window_garage_contact
card_mod:
style: |
:host {
'--label-badge-blue': green;
}
I know using state-icons is much easier, but in my floorplan they look quite messy. I like in state-badges that they have own background and a colored border.
Today I’ve updated to version 3.0.5 and cleared the cache but the flickering is still present. The last known working version is 3.0.2 
I also have the same flickering problem on that card.
the flickering is not as exaggerated as before but still exists
The flickering should be severely reduced with 3.0.6.
In your second example, it’s because CSS properties do not have quotes around them in CSS quotes.
For your first example; try copy pasting that into /developer-tools/template and see if that gives you any hints.
Fixed,thanks a lot like always 
I wonder how to pass a card-mod style as a variable into Decluttering card.
Let’s imagine that there is a decluttering template:
decluttering_templates:
test_decl_entity_row:
card:
type: entities
entities:
- entity: '[[SENSOR]]'
name: '[[NAME]]'
card_mod:
style: '[[STYLE]]'
And there is a simple example:
type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: Sun
- STYLE: ':host { color: green; }'
Here I was able to pass a card-mod style as a single-line string variable.
But let’s assume that the style is more complex:
- type: entities
entities:
- entity: sun.sun
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: cyan;
}
Using card-mode 3.0 syntax, the code can be shorten a bit:
- type: entities
entities:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row$: |
.info.pointer.text-content {
color: cyan;
}
and a bit more shorter:
- type: entities
entities:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row$: |
.info.pointer.text-content { color: cyan; }
And then I do not know how to present the style as a single-line string…
Can anyone help me?
Why do you want to do that? Anyway, I think you could just quote it instead of using | (didn’t test it).
Sometimes I wanted to create a decluttering template with different behaviour which can be implemented by using card-mod styling.
Tried this:
- type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: Солнце
- STYLE: 'hui-generic-entity-row$.info.pointer.text-content { color: green; }'
Does not work.
But this simple styling does work:
STYLE: ':host { color: green; }'
Yes, but why do you want to make it short?
This might work:
- type: entities
entities:
- entity: sun.sun
card_mod:
style: {"hui-generic-entity-row$": ".info.pointer.text-content { color: cyan; }"}
I wanted to make it a string - otherwise it will not pass as a variable.
great, thank you so much!!!
Some more working options:
- type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: colored name
- STYLE:
hui-generic-entity-row$: '.info.pointer.text-content { color: cyan; }'
- type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: colored name & value
- STYLE:
hui-generic-entity-row$: '.info.pointer.text-content { color: green; }
.text-content:not(.info) { color: orange; }'
decluttering_templates:
test_decl_entity_row:
card:
type: entities
entities:
- entity: '[[SENSOR]]'
name: '[[NAME]]'
card_mod:
style: '[[STYLE]]'
These options I found by chance - Lovelace editor generates that yaml after saving the code in your format.
And I do not understand why does it work - I believed that there must be smth like “|” or “>” after the “STYLE:” word.
More examples are described here.
Because it’s regular YAML. Regular YAML works like that. I didn’t even know that would work until now.
Well, it 's good that we have a possibility to pass a card-mod style as a variable.
Some more examples - styling multiple-entity-row inside decluttering-card:
Applying styles:
- type: custom:decluttering-card
template: test_decl_entities_row_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons
- STYLE: ':host { --paper-item-icon-color: red;}'
- type: custom:decluttering-card
template: test_decl_entities_row_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons
- STYLE:
hui-generic-entity-row:
$: |
state-badge {
color: orange;
}
.: |
div.entity:nth-child(2) state-badge {
color: green;
}
div.entity:nth-child(4) state-badge {
color: red;
}
The template:
test_decl_entities_row_multi_for_style:
card:
type: entities
entities:
- type: 'custom:multiple-entity-row'
style: '[[STYLE]]'
entity: '[[SENSOR]]'
entities:
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
name: '[[NAME]]'
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
The decluttering template above represents an Entities card with a multiple-entity-row.
That causes a presence of ha-card element necessary for card-mod.
Now I need to apply a style to a decluttering template which is a multiple-entity-row itself (which does not have a ha-card element).
For this I need to use mod-card:
test_decl_multi_for_style:
card:
type: 'custom:mod-card'
style: '[[STYLE]]'
card:
type: 'custom:multiple-entity-row'
entity: '[[SENSOR]]'
entities:
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
name: '[[NAME]]'
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
Applying styles:
- type: custom:decluttering-card
template: test_decl_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons (mod-card)
- STYLE: ':host { --paper-item-icon-color: red;}'
- type: custom:decluttering-card
template: test_decl_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons (mod-card)
- STYLE:
multiple-entity-row:
$:
hui-generic-entity-row:
$: |
state-badge {
color: orange;
}
.: |
div.entity:nth-child(2) state-badge {
color: green;
}
div.entity:nth-child(4) state-badge {
color: cyan;
}
More examples are described here.