Just copy the path from settings-lovelace-ressources.
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.
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
Nice looking))
yes, happy with it, next challenge is luring: widen the markdown (see the mod-card that works, but card-mod says I am doing it wrongā¦
# - type: custom:mod-card
# card_mod:
# style: |
# ha-card {
# margin: -8px -16px -16px -16px;
# }
# card:
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-content {
margin: -8px -16px -16px -16px;
}
content: >
this should be the easiest:
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px -16px -16px;
}
but often makes the card go beyond its bordersā¦