And to transform this from legacy to normal card ?
card_mod:
style:
ha-tile-info$: |
.secondary {
color: {% if is_state('script.sifao_1_hora','off') %}
green !important
{% else %}
red !important
{% endif %};
}
mushroom-shape-icon:
$: |
{% if is_state('script.sifao_1_hora','on') %}
ha-state-icon {
animation: spin 1s linear infinite;
}
{% else %}
{% endif %}
The ha-tile-info$ , work OK, but the icon donât spin
Thanks
Have you taken the time to review recent examples in this thread? I have posted quite a few examples in this thread and here
Thanks for the help. I checked and managed to make most of them.
Now I canât get the effect on this one at all.
Please post your code using the forum standards vs images
When sharing the code, share it as text and not an image. When you do that, remember that spacing is critical in YAML, and if you just throw the code on the page then itâll look ugly and nobody will know if the problem is because of spacing. We need you to use code blocks and appropriate markup.
sorry. youâre right
type: custom:mushroom-legacy-template-card
icon: mdi:home
entity: switch.int_quarto_2_l1
primary: Gradient
icon_color: blue
secondary: secondary
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.shape:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
--shape-animation: spin 1s infinite linear;
border-radius:50%;
animation: spin 2s ease infinite;
}
This should work to help you move away from the legacy template card
type: custom:mushroom-template-card
icon: mdi:home
entity: switch.int_quarto_2_l1
primary: Gradient
secondary: secondary
tap_action:
action: more-info
color: blue
features_position: bottom
card_mod:
style:
ha-tile-icon$: |
.container:before {
display: none;
}
.container:after {
content: "";
position: absolute;
inset: 0;
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
background: radial-gradient(farthest-side, var(--blue-color, #0000FF) 94%, transparent) top/4px 4px no-repeat,
conic-gradient(transparent 30%, var(--blue-color, #0000FF));
animation: spin 2s ease infinite;
will-change: transform;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
dos1973
October 21, 2025, 5:25am
1892
Only a short question to doublecheck. I can use then same card mods for Tile Cards and the new mushroom cards.
Effects are the same?
For the most part yes!
type: tile
entity: light.night_stand
card_mod:
style:
ha-tile-icon$: |
.container:before {
display: none;
}
.container:after {
content: "";
position: absolute;
inset: 0;
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
background: radial-gradient(farthest-side, var(--blue-color, #0000FF) 94%, transparent) top/4px 4px no-repeat,
conic-gradient(transparent 30%, var(--blue-color, #0000FF));
animation: spin 2s ease infinite;
will-change: transform;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
The changes to the Mushroom Template card were intended to align with the Tile card elements.
dos1973
October 21, 2025, 5:32am
1894
âŠfor the most? What would not work, to get an idea
For example, Tile Cards with cover and climate entities have significant CSS structural differences vs Mushroom cards with the same entities.
What are you trying to achieve? Your question is very broad.
1 Like
dos1973
October 21, 2025, 5:44am
1896
Thanks or your feedback, was more in general as i need to rebuild some stuff and donât want to use old style by copy/ paste. Thx
If you run into any roadblocks with either Tile or Mushroom cards, just reach out!
1 Like
[quote=âLiQuid_cOOled, post:1891, topic:693055â]
Thank you very much.
supperka
October 28, 2025, 9:47pm
1899
hello can someone help me out of lagacy card? Much thanks. animations donât work. attach picture before and after update
type: custom:mushroom-legacy-template-card
icon: mdi:delete
primary: SmÄs
secondary: |2-
{% set dny = state_attr('sensor.cerna_popelnice','dny')|float |round()%}
{% if dny == 0 %}
dnes
{% elif dny == 1 %}
zĂtra
{% elif dny > 5 %}
za {{dny}} dnĂ
{% elif dny <= 5 and dny > 1 %}
za {{dny}} dny
{% endif %}
color: grey
features_position: bottom
card_mod:
style:
mushroom-shape-icon$: |
{% if state_attr('sensor.cerna_popelnice','dny') |float == 0 %}
.shape {
--shape-animation: ping 3.0s infinite ;
card_mod:
{% else %}
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-red)) {{ (state_attr('sensor.cerna_popelnice','dny')|int / 14 ) *100 }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
.: |
ha-card {
#border: none !important;
#background: transparent;
}
Cleanup your code (2x card_mod:?), make sure you have the right indentation and itâll work.
supperka
October 29, 2025, 2:40pm
1901
Hello, sorry but all is copy paste from internet. So I donât know what are you talking about. What two cards mod?
Two card mods underlined
Iâd check out the forum guidelines
If you turn up with a post that suggests youâve put in no effort, youâre less likely to get quality help, and your post may even be ignored. Explain a bit of what youâve done so far, such as:
Link to some other threads that youâve found, and tried, and explain why they didnât help you
Describe what youâve tried, and what the problems were
Showing that youâve put effort in will help demonstrate that youâre not simply looking for others to do all the work for you.
1 Like
Has anyones card-mod changes stopped working since the upgrade to 2025.11.0?
dcapslock
November 6, 2025, 9:30am
1904
There is a known issue with entities rows with 2025.11. For that 3.4.6 had been released.
1 Like
Simanias
November 6, 2025, 4:53pm
1905
Are you using animations? Then you have to explicitly declare keyframes:
ha-tile-badge$: |
.badge {
height: 16px !important;
width: 16px !important;
left: -12px !important;
top: 0px !important;
position: absolute;
border-radius: 10% !important;
animation: flash 2s infinite;
animation-play-state: var(--badge-flash-state, paused) !important;
pointer-events: none;
}
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
Here is my dashboard with cardmod:
Show your workings