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!