It was new for me:
Never ever use ā0ā values for css theme variables!
Correct:
--some-variable: 0px
Wrong:
--some-variable: 0
1 Like
Hello, Iām having this problem with Card_mod which gives me the following error when I insert the code, although it works without problems I canāt find what is causing the error. Thanks
- At path: chips.0.card_mod ā Expected a value of type
never, but received:[object Object]
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:battery-alert-variant-outline
icon_color: blue
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:battery-state-card
title: Devices with Low Battery
sort_by_level: asc
filter:
include:
- name: attributes.device_class
value: battery
exclude:
- name: state
value: 10
operator: ">"
- name: state
value: Unknown
- name: state
value: Unavailable
- name: display.platform
value: mobile_app
card_mod:
style: |
ha-card:after {
content: "{{states.sensor
| selectattr('attributes.device_class', 'defined')
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', integration_entities('mobile_app'))
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 10)
| select('ge', 0)
| list | count
}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-red));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
Is there a way to have the icon of an entity card in the same line as the content, so instead of this:
I could have something like this:
My entity-card currently looks simply like this:
type: entity
entity: sensor.biowaste
grid_options:
columns: 12
rows: 2
card_mod:
style: |
.name{
display: none;
}
How might I change the row-gap of a vertical-stack card? In my image the purple dashed space is the row-gap but it looks as though it is under the #root and I canāt seem to properly address it. Appreciate any insights.
Any changes for vertical-stack card should be done with mod-card.
Go to 1st post ā link at the bottom titled āfantasticā ā vertical-stack
Meanwhile @akomelj and @Ildar_Gabdullin found the main source for the trouble 2025.1 caused for card_mod and its customizations on hui-generic-entity-row, whihc apparently is caused by Lint fixes in Fix ALL the eslint warnings (#23165) Ā· home-assistant/frontend@7a12fd2 Ā· GitHub
this is great news, and hopefully an official update to card_mod can be seen soon. for the time being, follow @Ildar_Gabdullin s suggestion and do this
it brought back all mods I could find on entities, and then someā¦
just copy the original to another www folder, and change the path in the config:
frontend:
extra_module_url:
# https://github.com/thomasloven/lovelace-card-mod?tab=readme-ov-file#performance-improvements
- /local/resources/card-mod/card-mod.js
# - /hacsfiles/lovelace-card-mod/card-mod.js
thanks for the temporary fix!!
crossposting from the 2025.1 release thread
3 Likes
All credits to @akomelj in fact! He has found a particular issue.
Could be not the only one, I am still checking other changes.
Update: went through that commit, seems that renderEntity -> _renderEntity was the only reason. This change affected Entities card, Picture Glance, Glance. All of them tested with patched card-mod, seem to be OK.
I really feel myself awkward since it was Andrej who found the issueā¦
Meanwhile I am asking all css-gurus to find a way to address a ha-entity-marker by itās associated āentity_idā if it is available as a property.
Described here.
Of course this method discussed earlier between @elchininet & @Mariusthvdb still can be used:
card_mod:
style:
ha-map $: |
{% for entity in config.entities %}
{% if not is_state(entity, 'home') %}
div:has(> ha-entity-marker):nth-of-type({{loop.index}}) {
filter: grayscale();
}
{% endif %}
{% endfor %}
Thanks, do you know of a way to deal with the gap being present in a conditionally hidden card? I have two hidden on the bottom of a dashboard and it is creating a situation where a scroll bar is bein needlessly added because 2 row-gaps worth of invisible space is being added to the bottom.
Appreciate it.
Sorry, cannot help now, try using Code Inspector & provided examples for the vertical/horizontal stack cards (as usual: try ā fail ā repeat ā succeed)
Thanks for the reply!
Indeed, Iāve managed to make your example with a rotating icon on a mini graph work well here, and I think Iāve understood what was wrong in my initial approach - basically:
- I was starting with āmini-graph-card$ā instead of within the āha-cardā;
- I need to target the ha-svg-icon level for an animation to apply
- I cannot observe some effects on intermediary levels (itās either the whole header or the icon that is several levels below in the DOM)
Thank you again for these very useful examples.
Nonetheless, getting back to my real problem with a slightly more difficult structure, even after several more hours spent on this, Iām still bumping into an issue that might be due to my lack of correct reading of the DOM.
To contextualize a bit, I have a mini room card and I want to show the state of some sensors on it, through some mushroom-chips. Iād want to be able to apply some of the neat animations shown in this thread on the icons that are within these chips.
My YAML structure is as follows - there are some conditionals Iāve removed to simplify the code (so ignore the fact the icon is static here) and I donāt show how the positioning of s1 is handled:
name: Office
icon: mdi:desk
entity: sensor.temphumsensoroffice_temperature
custom_fields:
s1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: "binary_sensor.occupancysensoroffice_occupancy"
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
card_mod:
style: |
ha-card .chip-container mushroom-template-chip:
$: |
mushroom-chip ha-state-icon:
$: |
ha-icon:
$: |
ha-svg-icon {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
For me, this should correspond to the DOM Iām seeing below (and you can see the whole path at the bottom of the screenshot):
However, I do manage to make the whole chip rotate though, if I use:
card_mod:
style: |
ha-card .chip-container mushroom-template-chip {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
You may say that for this particular example, the outcome is visually the same. But the problem is that eventually, Iāll want to use other animations than rotation, and for instance when clipping with a path, it does matter whether itās the whole chip or just the icon inside that is targeted. So Iām working on rotation merely as an example I want to extend to other animations and it is therefore important to me to target the icon itself.
Iād truly welcome an expert eye on this to point me out the probably obvious mistake I might be doing.
Sorry, can say nothing about mushrooms, not using them.
you can customize the styles for individual chipsā¦
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
entity: binary_sensor.movement_backyard
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
- type: template
entity: binary_sensor.movement_backyard
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
Style each individual state-display of the new āHeadersā type without targeting individual children:
card_mod:
style:
.badges hui-entity-heading-badge $: |
state-display {
color: red;
font-size: medium;
}
Mushroom Chips are a different animal. Use this as an exampleā¦
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.bedroom_fan
icon: mdi:fan
icon_color: green
tap_action:
action: more-info
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotation 2s linear infinite;
}
@keyframes rotation {
100% { transform: rotate(-360deg); }
}
Refer to this thread Mushroom Cards - Build a beautiful dashboard easily š (Part 2)
Yes, if same style is needed for each child.
Good example.
Hi, what am i doing wrong, pleaes?
Cant get the icons to show or change colour based on the state of the lock
camera_view: auto
type: picture-glance
title: Front Door
entities:
- entity: light.floodlight
icon: mdi:light-flood-down
- entity: light.front_spot
- entity: light.driveway
- entity: lock.front_door
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: lock.front_door
style:
--icon-color: |
[[[
if (states['lock.front_door'].state === 'locked') {
return 'green';
} else {
return 'red';
}
]]]
--icon: |
[[[
if (states['lock.front_door'].state === 'locked') {
return 'mdi:lock';
} else {
return 'mdi:lock-off';
}
]]]
- entity: camera.front_door_package_camera
icon: mdi:package
camera_image: camera.front_door_high_resolution_channel
As a starting point:
1st post ā link at the bottom titled āfantasticā ā picture-glance
Ok i have pealed this back and still cant get it to work ā¦ any pointers please?
camera_view: auto
type: picture-glance
title: Front Door
camera_image: camera.front_door_high_resolution_channel
entities:
- entity: lock.front_door
card_mod:
style: |
ha-card {
background: var(--background-card-color);
}
#states div:nth-of-type(1) {
--paper-item-icon-color: [[ if(lock.front_door == "unlocked", "red", "green")]];
}