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.
Thank you for the great work in Card-mod.
I am using Glance card with a lock and would like to change the icon color to Red. The icon is still showing as Yellow.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
style: |
:host {
--paper-item-icon-color: red ;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
What version of card-mod are you using? Are you sure that’s the right styling?
I am using 3.07 of card-mod. No I am not sure my the styling is right. I have gone through all the forums and tried many things. Happy for any suggestions.
Try using the new format. Also, properly use whitespace, if you can:
:host {
--paper-item-icon-color: red ;
} [END OF THING HERE]
should be
:host {
--paper-item-icon-color: red ;
}[END OF THING HERE]
Of course, these are just minor things.
Thank you. I have tried as below. Still no luck.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
style: |
:host {
--paper-item-icon-color: red ;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
No need for the space in between red and the semicolon. Also use card_mod: style: (see README for new syntax).