Nope tbh havenāt bothered since, I think I just didnāt find the right selector yet and thats the issue.
found a way (the way?) to fix the 2025.3 changes for the new hui-view-header, and it seems as simple as adding that 
The generic badge setting works fine now, so mo need to set that icon on each and every badge individually.
only issue I still face is the fact that the scrollable badges go beyond the actual device screen, and dont stay within the view.
Ive added a hard coded max-width: 390px; because that is my devices width (iPhone 13 pro), but it isnt ideal.
Especially not since the scroller kicks in before that on my desktop, which is set wider.
needs some more work, but its a promising beginning.
@parautenbach tagging you since you started this scroller
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-header:
$:
hui-view-badges:
$:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 24px;
}
:first-child $:
hui-view-header:
$:
hui-view-badges $: |
/* mobile-specific styles */
@media (max-width: 768px) {
.badges {
overflow-x: scroll !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
justify-content: space-evenly !important;
max-width: 390px;
}
.badges > * {
min-width: fit-content;
}
}
2 Likes
Thanks for highlighting, Marius. Specifying the max width isnāt ideal.
I havenāt tried the beta, but will update to 2025.3 once itās available to see what can be done.
Iāve voted on the GH request. It would be fantastic to have this as an option.
(My previous appeals yielded no results. To date, thereās been no updates on the new badges since release, even though it was said that feedback will be considered. I donāt want to start a rant; Iām just stating a fact. 
)
great, please report back.
For now Iāve solved my personal device settings like this:
@media (max-width: 800px) {
.badges {
overflow-x: scroll !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
justify-content: space-evenly !important;
max-width: 500px;
}
@media (max-width: 390px) {
.badges {
overflow-x: scroll !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
justify-content: space-evenly !important;
max-width: 380px;
}
it works.
Probably need to add more @media settings of using different devicesā¦
update/edit
using the relative viewport max-width: 96vw makes device independent
:first-child $:
hui-view-header:
$:
hui-view-badges $: |
/* mobile-specific styles */
@media (max-width: 575px) {
.badges {
overflow-x: scroll !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
justify-content: space-evenly !important;
max-width: 96vw;
}
.badges > * {
min-width: fit-content;
}
and resize to any mobile device/narrow desktop size.
Only grip I have is the max_columns: 1 is not respected, which look s especially silly in Safar on the Mac as that has even wider vertical gaps in the view sides than Chrome
1 Like
ok, with the 2025.03 update, Iām switching to use tiles and I need some more help coming up wit the card_mod for the new tile.
Completely right. Sorry. Moved.
In another topic I found out how to style the icons of lights to a simple on/off color, instead of dynamic colors. I use this code in my theme:
card-mod-row-yaml: |
"hui-generic-entity-row $ state-badge $": |
ha-state-icon[data-state="on"] {
color: var(--paper-item-icon-active-color) !important;
filter: none !important;
}
This way the icon on the left side in an Entities-row is rendered correctly. I would also like to do this on all the icons in my multiple-entity-rows using the theme. However, I canāt find to figure out the correct path.
When I inspect a random icon in a multiple-entity-row, I get this JS path:
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > hui-card:nth-child(11) > state-switch").shadowRoot.querySelector("#root > div.visible > hui-entities-card").shadowRoot.querySelector("#states > div:nth-child(7) > multiple-entity-row").shadowRoot.querySelector("hui-generic-entity-row > div > div:nth-child(4) > div > state-badge").shadowRoot.querySelector("ha-state-icon").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")
Can someone please help me out do edit the theme yaml so I can apply the same logic to all icons found in all multiple-entity-rows?
Edit:
Figured it out. Apparently I ran into the same thing in 2022 and puzzled my way through a solution:
theme.yaml:
card-mod-row-yaml: |
"hui-generic-entity-row $ state-badge $": |
ha-state-icon[data-state="on"] {
color: var(--state-binary_sensor-active-color,currentcolor) !important;
filter: none !important;
}
"hui-generic-entity-row .entities-row state-badge $": |
ha-state-icon[data-state="on"] {
color: var(--state-binary_sensor-active-color,currentcolor) !important;
filter: none !important;
}
ha-state-icon[data-state="idle"] {
color: var(--state-binary_sensor-active-color,currentcolor) !important;
filter: none !important;
}
IĀ“m stuck with this. Anyone that can help me? Thanks!
Did you ever figured out if the .mdc-drawer was somehow reachable?
yes because they added a new element in the path, I do this now as already described here
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-header:
$:
hui-view-badges:
$:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 24px;
}
:first-child $:
hui-view-header:
$:
hui-view-badges $: |
/* mobile-specific styles */
@media (max-width: 575px) {
.badges {
overflow-x: scroll !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
justify-content: space-evenly !important;
max-width: 96vw;
}
.badges > * {
min-width: fit-content;
}
but 2 caveats:
I use card-mod 3.5.0 which is not the official release and which was retracted.
I changed the max-width, because the new hui-view-header has different proportions and behavior than the badges alone had before
2 Likes
Fixed, thanks! Not on 3.5.0 but sill works.
1 Like
How do I animate only fan icons on my dashboard using card-mod theme?
TL;DR: I want to spin only fan icons when theyāre on. Animating all icons works, but adding logic to limit it to fans fails for ha-icon but not ha-state-icon. Any tips or working examples? 
Hey everyone! 
Iām trying to animate only my fan icons when theyāre on, using a card-mod theme. Iāve gone through the documentation and tested multiple setups, but Iām only halfway there. Hoping someone here can help me crack the last piece of the puzzle.
What didnāt work:
This code (inspired by docs) had no effect:
card-mod-card: |
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
ha-icon[data-domain="fan"][data-state="on"] {
animation: spin 4s infinite linear;
}
card-mod-row-yaml: |
"*:first-child$": |
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 4s infinite linear;
{% endif %}
}
What does work:
This code animates most icons:
card-mod-card: |
ha-state-icon {
animation: spin 4s infinite linear;
}
This adds the rest ā now every icon on the dashboard animates (yay!):
ha-icon {
animation: spin 4s infinite linear;
}
Where Iām stuck:
Trying to add logic to animate only fan icons when theyāre on, like this:
ha-state-icon {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 1s infinite linear;
{% endif %}
}
ha-icon {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 1s infinite linear;
{% endif %}
}
But this doesnāt work ā the templating seems to be ignored for ha-icon. However, the ha-state-icon templating works good. It almost seems as if the ha-icon is ignored.
Thanks in advance for any help!
Home Assistant 2025.4 adds a new breadcrumb above the entity name in the more-info, showing the area and the device the entity belongs to.
SInce I feel that should not be there always (it clutters the view of that card, ands not meant for everyone imho), Ive added a theme mod so we can conditionally set it, like eg for administrators, or in dev modeā¦
I had to add it to the -yaml section because of the other mods I have there,
card-mod-more-info-yaml: |
ha-dialog-header: |
.breadcrumb {
{% if is_state('input_boolean.hide_more_info_breadcrumb','on') %}
display: none
{% endif %};
}
$: |
.mdc-dialog {
backdrop-filter: blur(17px) !important;
-webkit-backdrop-filter: blur(17px) !important;
}
result:
UPDATE
hold your horsesā¦ in a next beta, they changed the path to the breadcrumb to be in the button, which breaks my mod aboveā¦
but, it turns out to be a matter of adding !importantā¦
card-mod-more-info-yaml: |
ha-dialog-header: |
.breadcrumb {
{% if is_state('input_boolean.hide_more_info_breadcrumb','on') %}
display: none !important
{% endif %};
}
Not worked in 2025.3.4, please tell me how to fix it? Thanks in advance.
Check with Code Inspector, one more layer seems to be added recently.
1 Like
changed all of my views in the new Adreas dashboard too show icons (I have way too many for the Named views to be useable)
and suddenly I noticed this:
so yes, we can also mod the icon in the new Areas Dashboard, just like the regular view/tab items
card-mod-root-yaml: |
paper-tab[aria-label='Vijver'] ha-icon$: |
ha-svg-icon {
animation: {{'spin 3s infinite linear' if is_state('switch.vijverpompen','on')
else 'none'}};
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.: |
paper-tab[aria-label='Vijver'] {
color: {{'lightseagreen' if pomp}};
}
Hi, Iām asking for advice on styling cards via card_mod. I designed a room card, or rather modified and adjusted it from the designs here in the community, but the card displays a lot of data. It contains many entities that are still conditioned in various ways, but I got into a situation where I have a lot of evaluations in the card across entities and another problem is that in one display in the dashboard I have, for example, 10 of these cards, the problem then arises in the actual rendering of the cards, it is terribly demanding on performance and rendering due to the concurrency and unoptimized code, precisely the repeating styles for both the card itself and for individual chips. I moved the conditions to the templates so that they are not evaluated directly in the shortener when the page is rendered, so that the logic runs on the server and not the frontend as such, but the problem is most likely in the repeating style code, e.g. the code for one card has 293 lines, see the code.
Is there any way to unify those repeating styles in such code into a theme and load/preload them globally and not have repeating style text multiple times in one tab? I tried to come up with something using chatGPT, claude, but nothing that would work 100%, it always turned out even worse.
Thanks in advance for answering my complicated question
I am attaching a screenshot of several tabs in one view and the yaml code of one tab itself
type: custom:stack-in-card
mode: horizontal
cards:
- type: vertical-stack
cards:
- type: heading
icon: ""
heading: ObĆ½vĆ”k
heading_style: title
card_mod:
style: |
ha-card {
margin-left: 10px;
margin-top: 3px;
width: 120px;
--primary-text-color: #9E9E9E;
}
- type: custom:mushroom-entity-card
entity: sensor.teplomer_obyvak_temperature
name: null
primary_info: none
secondary_info: state
icon: mdi:thermometer
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 29px;
--icon-color: orange;
background: none !important;
box-shadow: none !important;
--icon-background: none;
}
.: |
ha-card {
margin-left: -7px;
margin-top: -15px;
width: 120px;
}
.secondary {
color: var(--icon-color) !important;
}
- type: custom:mushroom-entity-card
entity: sensor.teplomer_obyvak_humidity
name: null
primary_info: none
secondary_info: state
icon: mdi:water-percent
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 29px;
--icon-color: #2196F3;
background: none !important;
box-shadow: none !important;
--icon-background: none;
}
.: |
ha-card {
margin-left: -7px;
margin-top: -36px;
margin-bottom: -50px;
width: 120px;
}
- type: custom:mushroom-template-card
icon: mdi:sofa
heading_style: title
icon_color: purple
tap_action:
action: navigate
navigation_path: obyvak
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 130px;
}
.: |
ha-card {
border: 0px;
margin-left: -10px;
margin-top: -10px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.okno_obyvak_terasa_okno
icon: |
{{ states('sensor.okno_obyvak_terasa_okno_ikona') }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
flex: 0 0 48% !important;
--chip-background: {{ states('sensor.okno_obyvak_terasa_okno_barva_pozadi') }};
--color: {{ states('sensor.okno_obyvak_terasa_okno_barva') }};
justify-content: center;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
- type: template
entity: cover.obyvak
icon: "{{ states('sensor.zaluzie_obyvak_ikona') }}"
icon_color: "{{ states('sensor.zaluzie_obyvak_barva') }}"
tap_action:
action: more-info
content: ""
card_mod:
style: |
ha-card {
padding: 5 !important;
--chip-icon-size: 22px;
--chip-background: {{ states('sensor.zaluzie_obyvak_barva_pozadi') }};
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
font-size: 35px !important;
font-weight: normal !important;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
position: relative;
}
ha-card::after {
{%- set pos = state_attr('cover.obyvak', 'current_position') | int -%}
{%- if pos > 0 and pos < 100 -%}
content: "{{ pos }}%";
position: absolute;
top: -13px;
right: -13px;
width: 20px;
height: 1px;
text-align: center;
background: #5e5656;
color: #DADADA;
border-radius: 50%;
font-size: 10px;
padding: 11px 2px;
line-height: 0;
{%- else -%}
display: none;
{%- endif -%}
}
ha-card > * {
padding-left: 7px !important;
}
- type: template
entity: binary_sensor.okno_bok_obyvak_okno
icon: |
{{ states('sensor.okno_bok_obyvak_okno_ikona') }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
flex: 0 0 48% !important;
--chip-background: {{ states('sensor.okno_bok_obyvak_okno_barva_pozadi') }};
--color: {{ states('sensor.okno_bok_obyvak_okno_barva') }};
justify-content: center;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
- type: template
entity: cover.obyvak_bok
icon: "{{ states('sensor.zaluzie_obyvak_bok_ikona') }}"
icon_color: "{{ states('sensor.zaluzie_obyvak_bok_barva') }}"
tap_action:
action: more-info
content: ""
card_mod:
style: |
ha-card {
padding: 5 !important;
--chip-icon-size: 22px;
--chip-background: {{ states('sensor.zaluzie_obyvak_bok_barva_pozadi') }};
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
font-size: 35px !important;
font-weight: normal !important;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
position: relative;
}
ha-card::after {
{%- set pos = state_attr('cover.obyvak_bok', 'current_position') | int -%}
{%- if pos > 0 and pos < 100 -%}
content: "{{ pos }}%";
position: absolute;
top: -13px;
right: -13px;
width: 20px;
height: 1px;
text-align: center;
background: #5e5656;
color: #DADADA;
border-radius: 50%;
font-size: 10px;
padding: 11px 2px;
line-height: 0;
{%- else -%}
display: none;
{%- endif -%}
}
ha-card > * {
padding-left: 7px !important;
}
- type: template
entity: switch.obyvak
icon: hue:friends-of-hue-iq-flush
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ states('sensor.switch_obyvak_barva_pozadi') }};
--color: {{ states('sensor.switch_obyvak_barva') }};
justify-content: center;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
- type: template
entity: light.obyvak_tv_stolek
icon: hue:lightstrip
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ states('sensor.light_obyvak_tv_stolek_barva_pozadi') }};
--color: {{ states('sensor.light_obyvak_tv_stolek_barva') }};
justify-content: center;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
- type: template
entity: media_player.yamaha_receiver
icon: mdi:speaker
card_mod:
style: |
ha-card {
--chip-background: {{ states('sensor.media_player_yamaha_receiver_barva_pozadi') }};
--color: {{ states('sensor.media_player_yamaha_receiver_barva') }};
justify-content: center;
height: 36px !important;
width: 36px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
card_mod:
style: |
.chip-container {
display: flex !important;
flex-flow: row wrap !important;
gap: 8px;
margin: 8px;
margin-left: 10px;
margin-top: 15px;
}
.: |
.container {
align: end;
}
card_mod:
style: |
ha-card {
max-width: 220px;
min-width: 220px;
max-height: 195px;
min-height: 195px;
}
@kratas ,
From what I found out, themesā usage would not increase the performance.
Card-mod still ācopiesā corresponding theme section (e.g. card-mod-root or card-mod-root-yaml) into the each HA control it can be applied to. And also keeps traversing DOM for shadow-roots handling (in case of -yaml sections).
So, main benefit of the themes is better maintainability since it removes stylesā duplication.
That said, looking at your YAML I donāt see anything super performance-demanding. Are you sure your problem is styles-related?
Probably yes, because the fewer cards I display, the faster the cards load. If I leave only one there, it immediately crashes. If there are several of them, the initial loading sometimes takes 1-2 seconds, first the card, then the settings for the thermometer icons with the room icon, and then the chips. The process is like a jigsaw puzzle, as if I were adding style settings gradually. For example, on my Xiaomi 13 phone, it works perfectly, on a PC itās worse, and on the Honor Pad X8a tablet, which I bought for the dashboard, itās sometimes tragic. If the cards load and I switch between several views, they load almost immediately, but if other views are displayed for a longer time or I do something on them and then switch back to these card rooms, the whole thing comes together jerkily again.