I do not recall a PR for this. And no idea if this class is used in card-mod internally… Need to check.
Hello
How can I display the text on the “heading” card in red and change the text size?
type: heading
icon: mdi:snowflake-thermometer
heading: F R O S T
heading_style: subtitle
tap_action:
action: none
card_mod:
style: |
ha-card {
background-color: lightblue !important;
align-items: center;
}
1st post → link at the bottom titled “fantastic” → heading card
1 Like
Is there something in this node? You didint show and I would say the other obove from Marius is more relevant?
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
