Wanting to apply the performance fix, but in doubt of the exact path to add.
My card_mod lives in:
/www//community/lovelace-card-mod/card-mod.js
I assume the path to add would be /community/lovelace-card-mod/card-mod.js?
Just copy the path from settings-lovelace-ressources.
1 Like
Hi, running card mod version:
But i’m having background issues? Seems style isnt applied?
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
the code above fixes the card background issues for Chrome and webbrowsers, but the background is still visible on the companion app? is this a bug in card mod or companion app?
Did you get this answered? I removed mine from the resources as the directions say instead. Just trying to verify that I read them correctly.
Not (yet?). I removed it as well. But I’m not sure if there are disadvantages or gaps. I read the instead as well, but saw the warnings and the re-adding after updating. Because of that my (currently unanswered) double check question to Thomas.
I loaded it in both places as well. Error message if not loaded in resources.
1 Like
I’m having a couple of issues with my badges:
The first two aren’t supposed to show until they get activated but for some reason they’ve started showing when I load the page. If I edit the config and save they disappear again until I refresh again.
- entity: binary_sensor.bath_water_leak
icon: mdi:alert
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
--label-badge-background-color: red;
animation: blinker 1s linear infinite;
display:
{% if is_state('binary_sensor.bath_water_leak', 'off') %}
none;
{% endif %}
}
- entity: binary_sensor.alarm_landing_smoke_detector_smoke
icon: mdi:alert
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
--label-badge-background-color: red;
animation: blinker 1s linear infinite;
display:
{% if is_state('binary_sensor.alarm_landing_smoke_detector_smoke', 'off') %}
none;
{% endif %}
}
The second issue is one I’m just trying to figure out. In the third badge, for some reason when I add an icon to an input_boolean badge it tries to show the state as well. This probably isn’t card-mod related but I was wondering if there was some magic to get rid of the text? This one has been bugging me for a while!
Add card_mod keyword.
I’m trying a slightly different spin on this, to show if the fan is running in our relevant zones or not. the state of the icon changes, but I’m not getting a rotating icon. Not sure where I’m going wrong, I’ve read through the doco…
My cards looks like this…
title: Sewing Room
mode: vertical
cards:
- type: custom:simple-thermostat
entity: climate.sewing_room_air_conditioner
step_layout: row
show_header: false
name: study
control: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: glance
entities:
- entity: switch.sewing_room_zone
icon: mdi:fan
tap_action:
action: toggle
show_name: false
show_state: false
card_mod:
style:
div#wrapper: |
state-badge {
animation: rotation 0.5s linear infinite
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: custom:mini-graph-card
entities:
- entity: sensor.sewing_room
name: Temperature
smoothing: true
show_fill: true
- entity: sensor.sewing_target_temp
name: Target
smoothing: true
- entity: switch.sewing_room_zone
y_axis: secondary
color: orange
show_line: false
show_points: false
show_legend: false
aggregate:func: max
smoothing: false
hours_to_show: 24
points_per_hour: 4
line_width: 2
font_size: 90
animate: true
show:
name: false
icon: false
state: false
Where did you take this example?
Probably from template-entity-row.
You cannot apply styles from one card (history-graph card, for instance) to absolutely different card (glance).
Examples for glance are provided in the corr. post (see the 1st post).
If no animations are provided in the post - do it by yourself like styling an icon.
I got the example from the one you were helping Marius with… I’ll go back and have a look again - thanks
Thanks but this doesn’t seem to make a difference. I think I’m doing it right?
badges:
- entity: binary_sensor.bath_water_leak
icon: mdi:alert
card_mod:
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
--label-badge-background-color: red;
animation: blinker 1s linear infinite;
display:
{% if is_state('binary_sensor.bath_water_leak', 'off') %}
none;
{% endif %}
}
I also tried as per the example and I had to reverse the condition but it still did the same showing after a refesh despite the condition being negative.
- entity: binary_sensor.bath_water_leak
icon: mdi:alert
card_mod:
style: |
:host {
{% if is_state('binary_sensor.bath_water_leak', 'on') %}
display: inline-block;
{% else %}
display: none;
{% endif %}
}
I do not see this “refresh” issue when using as a badge on the view’s top:
title: test-2
path: test-test-2
panel: false
badges:
- entity: input_boolean.test_boolean
card_mod:
style: |
:host {
--label-badge-background-color: red;
animation: blinker 1s linear infinite;
{% if is_state('input_boolean.test_boolean', 'off') %}
display: none;
{% endif %}
}
@keyframes blinker { 50% { opacity: 0; } }
cards: []I registered this issue:
Would be very grateful if someone simulates the same condition and gives a feedback.
The problem started with 3.1.x.
Do not observe it with 3.0.13.
this is the bit where I’m struggling with the syntax… it’s a bit beyond me, I can happily change the colour of an icon for a switch, but I can’t manage to get them changing colour or animated via styling… CSS has never been my strong point, and it’s shining through now 
I can use button-card to achieve a similar outcome, but it loses haptic feedback on Android for the switch toggle, which is a shame
new challenge, trying to make the fold cards fill 100 with the image and background.
the stack I cards show perfectly when used standalone (as I had them up to now) but I want to declutter my frontend and fold these cards in an entities like below. Seems obvious enough, set the margin for the stack to 0px -16px -16px -16px. that does move the entities though, and not the color or the background image…:
- type: entities
title: Met de trein
card_mod: *header_no_margin
entities:
- type: custom:fold-entity-row
head:
type: section
label: Ns
padding: 0
entities:
- type: custom:stack-in-card
keep:
background: true
cards:
- type: picture
image: /local/images/ns.jpg
hold_action:
action: url
url_path: https://www.ns.nl
- type: entities
card_mod:
style: |
ha-card {
--ha-card-background: rgb(255,203,0);
color: rgb(15,34,132);
}
title: Ns reizen
show_header_toggle: false
entities:
- sensor.rotterdam_roosendaal
- sensor.roosendaal_rotterdam
- sensor.tilburg_roosendaal
- sensor.roosendaal_tilburg
- type: custom:fold-entity-row
an identical card for another railway ;-)
btw, I also tested stack-in-card for the top card, but that is really ugly:
What did you try before? I think, something basic like this should work
type: map
card_mod:
style: |
ha-card { border-radius: 200px; }
for reference: this is the magic setting:
entities:
- type: custom:fold-entity-row
head:
type: section
label: Ns
padding: 0
card_mod: &fold
style: |
div#items {
margin: 16px -16px -16px -16px;
}
entities:
and also applies to map in a fold:
pretty cool, and freely adapted from earlier discussion with @Ildar_Gabdullin 
thanks mate
1 Like
Nice looking))