Is it possible to make a badge (or the badge icon) and a entity icon in a card to blink?
If so please, share the code.
Can I set an icon color template for a whole card based on a specific attribute? I’m trying, but I’m unsuccessful in combining the various examples, here’s my failed attempt:
style: |
:ha-card {
--paper-item-icon-color:
{% if state_attr(config.entity,'1 Dag') < 0 %}
#ff0000
{% else %}
#00cc00
{% endif %}
;
}
entities:
- entity: sensor.dnb_health_care_n
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
- entity: sensor.dnb_norge_indeks_a
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
- entity: sensor.dnb_teknologi_n
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
show_header_toggle: false
title: Fond
type: entities
If possible, I would also like to apply the color to the state and/or the percent part of the secondary info line.
Maybe something like this?
style: |
@keyframes blinker { 50% { opacity: 0; } }
ha-card { animation: blinker 1s linear infinite; }
Tried your code, and the code in the documentation, without luck.
Maybe post what you have for your card and someone here may have an idea how to get it working for you 
I have the Meteorology Alarm integration with the binary sensor. The sensor is displayed when “on”. Since it is an alarm I want to draw attention to it by making it blink. The badge or the icon in the badge.
Is it possible making it blink?
title: Home
views:
- badges:
- entity: binary_sensor.meteoalarm_akershus
style: |
:host {
--label-badge-background-color: red;
display:
{% if is_state('binary_sensor.meteoalarm_akershus', 'off') %}
none;
{% endif %}
}
Maybe this will work:
title: Home
views:
- badges:
- entity: binary_sensor.meteoalarm_akershus
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
--label-badge-background-color: red;
animation: blinker 1s linear infinite;
display:
{% if is_state('binary_sensor.meteoalarm_akershus', 'off') %}
none;
{% endif %}
}
1 Like
Brilliant! 
I assume it worked then? 
1 Like
Oh Yeah.
1 Like
Wondering if anyone can lend me a hand here. I am trying to change the background color of the footer area in a picture glance card. Its the simi-transparent black area at the bottom of the card where entity icons sit. I just can’t quite seem to get the call correct to change that area. Thanks!
I noticed bunch of errors after recent HA upgrade to 0.106.x
I didn’t notice any recent updates for this card from HACS. Am I missing anything here?
- type: 'custom:mod-card'
<<: *card_style_anchor
card:
type: custom:weather-card
entity: weather.dark_sky
# current: true
details: true
forecast: true
card_style: &card_style_anchor
style:
.: |
ha-card {
border-radius: 20px;
overflow: hidden;
width: 89%;
margin: 0 auto;
padding-top: 0px;
}
create-element-base.ts:64 mod-card TypeError: Cannot assign to read only property '.' of object '#<Object>'
at HTMLElement.setConfig (card-mod.js:1)
at o (create-element-base.ts:61)
at a (create-element-base.ts:80)
at l (create-element-base.ts:131)
at Module.Hi (create-card-element.ts:88)
at layout-card.js:1
at HTMLElement.build_card (layout-card.js:1)
at layout-card.js:1
at Array.map (<anonymous>)
at HTMLElement.build_cards (layout-card.js:1)
I’ve got a similar issue since updating, i just copy-pasted the example from git and changed it to my intities.
Any clue what i’m doing wrong?
Cannot assign to read only property 'style' of object '#<Object>'
type: 'custom:mod-card'
style: |
ha-card {
border: 1px solid green;
}
card:
type: vertical-stack
cards:
- type: light
entity: light.kookplaat
- type: light
entity: light.woonkamer
Any idea if this would work with entity filter? I have cards show up if a door is unlocked or window open - I want to be able to have the background as red, so it sticks out in my dashboard - but not working for me:
- type: entity-filter
title: "** ATTENTION NEEDED **"
show_header_toggle: true
style: |
ha-card {
background: red
}
entities:
- binary_sensor.water_leak_sensor_158d000211b48a
- binary_sensor.water_leak_sensor_158d0002138f70
- binary_sensor.water_leak_sensor_158d000211a475
- binary_sensor.water_leak_sensor_158d000214f511
- binary_sensor.door_window_sensor_158d0001e74863
- binary_sensor.door_window_sensor_158d000202774f
- binary_sensor.door_window_sensor_158d0001f3e313
- binary_sensor.door_window_sensor_158d0002045f73
- binary_sensor.door_window_sensor_158d0001e7c2b1
- binary_sensor.door_window_sensor_158d000208e1cf
- binary_sensor.wyzesense_777ed17d
- binary_sensor.wyzesense_778089f4
- binary_sensor.wyzesense_778b2932
- binary_sensor.wyzesense_778c7f1b
- binary_sensor.wyzesense_778c8fb8
- binary_sensor.wyzesense_77809b2a
- binary_sensor.wyzesense_777ed17d
- cover.garage_door
- lock.kwikset_spectrum_brands_touchpad_electronic_deadbolt_locked
state_filter:
- 'on'
- 'open'
- 'unlocked'
show_empty: false
@sbmlat
HACS has had issues in the past (pre 0.22), reinstall the card in HACS, then clear the browser cache.
You need to apply the style to the entities card (which is implied for entity-filter unless otherwise specified).
Add
card:
type: entities
style: |
do your styling here
Sorry - confused on this point. I have the type as “entity-filter” with the list of entities below. Is this not possible with type “entity-filter” then? or do I need to redo this somehow?
Hope this is still timely, but this worked for me: first bit of style code (div.box) makes the background of the footer a bit darker, and centres everything. The second bit gets into the div where the icons are, and changes the colour of the icon for the active entity.
- type: picture-glance
style:
.: |
ha-card > div.box {
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
}
ha-card > div.box div ha-icon.state-on {
fill: var(--paper-item-icon-active-color);
}
1 Like
Hey.
After update from 0.105.4 to 0.106.5 my style for weather isnt working.
Code:
- card:
entity: weather.smhi_home
type: weather-forecast
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.0);
background-repeat: no-repeat;
background-size: 100% 100%;
border: solid 2px rgba(100,100,100,0.5);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
overflow: hidden;
}
type: 'custom:mod-card'
Error message: Cannot assign to read only property ‘style’ of object ‘#’
Whats wrong? Help please!