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!
Any idea how to change the Font Size of the Card Title? I’m stumped?!
- type: entities
title: Test Card
show_header_toggle: false
style: |
.card-header{
color: rgb(0, 255, 255);
font-size: 48px;
line-height: 48px;
font-weight: 500;
}
entities:
- ....
1 Like
Hi everyone,
I’m having some styling issues. I’m not very familiar with css so that’s the reason of the struggle.
Below you can see what I want to accomplish.
The card is a layout-card with embedded vertical and horizontal stacks.
I’m trying to set the height of the button cards (in this case the television and radio cards of the bottom picture) to 100%.
The “path” to the cards is layout-card (black square) --> vertical stack (orange) --> horizontal stack (green) --> button cards (see sketch below)
I know that I need to set the height to 100% for the divs with id root as well as the "hui-horizontal-stack-card (yellow highlight in image below). If I do it manually via the chrome dev tools, it works but i can’t get it working via yaml. I also tried using the mod-card but this didn’t make any difference as wel.
Can somebody give me a hint on which styles I need t apply to the components in order to set their height to 100%?
This was one of the guesses for the vertical stack (first yellow highlight) that made most sense to me but didn’t work:
...
- type: vertical-stack
gridcol: 1 / 2
gridrow: 1 / 2
style:
$: |
"#root" {
height: 100%;
}
cards:
- type: horizontal-stack
...
Thanks!
Greetings,
Frederic
From the documentation:
There are some cards where card-mod just won’t work. Those cards often are not really cards at all, but change how other cards work. Examples include:
conditional,entity-filter,horizontal-stackandvertical-stackas well as some custom cards, likelayout-card,auto-entitiesandstate-switchamong others.For those cases, a special
mod-cardis provided as a workaround: