Iām using the sample code and have card-mod installed and not for the life of me I can get this to animate. It just shows static. Thoughts?
type: custom:mushroom-template-card
icon: mdi:battery-high
icon_color: green
primary: "Battery #2"
entity: switch.living_tablet_switch
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
Frosty
July 12, 2025, 7:12pm
1723
type: custom:mushroom-template-card
icon: mdi:battery-high
icon_color: green
primary: "Battery #2"
entity: switch.living_tablet_switch
card_mod:
style: |
ha-state-icon {
animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
That worked! Thanks much. Out of curiosity, where was those changes (ha-icon to ha-state-icon, etc.) documented? Also, does this work with mushroom-template-badges?
Frosty
July 12, 2025, 8:17pm
1725
I took that from my working testing dashboard.@dimitri.landerloos updated all the animations, donāt remember when it changed but I will edit this post when I find his updated animations
OK here are the updated animations
I am not sure if I am honest.
Hi All, Iāve been trying all day to try and achieve this (including use of AI), and I belive it may not be possibleā¦but checking here before I move onā¦is it possible to increase the icon size of the mushroom-template-badge card?
Itās possible. Give me a little bit and Iāll provide an example once Iām in front of a PC.
type: custom:mod-card
card:
type: custom:mushroom-template-badge
content: ""
icon: mdi:mushroom
color: red
card_mod:
style:
mushroom-template-badge$: |
ha-state-icon {
--mdc-icon-size: 30px !important;
}
2 Likes
thanks for this LiQuid_cOOled! Much appreciated!
darko1515
July 27, 2025, 10:28am
1730
I have below card configuration, inspired from other cards and I am struggling with the code editor.
square: false
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.senzor_living_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
card_mod:
style: |
ha-card {
position: !important;
width: 190%;
top: 10px;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
- type: custom:mushroom-template-card
primary: Bucatarie
secondary: ""
icon: mdi:food-turkey
entity: switch.aqara_kitchen_switch
tap_action:
action: navigate
navigation_path: /mushroom-one/bucatarie
icon_color: |-
{% if is_state('switch.aqara_kitchen_switch', 'on') %}
orange
{% endif %}
card_mod:
style: |
ha-card {
position: important;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.masina_vase_power
icon: mdi:dishwasher
content_info: state
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: switch.aqara_kitchen_switch
double_tap_action:
action: none
content_info: none
icon: mdi:ceiling-light
icon_color: orange
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-spacing: -7px;
}
columns: 1
Frosty
July 27, 2025, 1:38pm
1731
try and keep it simple, if you want a simple look to the card. you donāt need to use card-mod to position the cards when you want them in a standard position (default). for example mushroom-template-card defaults to the left.
I edited your code and changed horizontal-stack to vertical-stack that way they are positioned on top of each other and removed the card mod entries relating to position.
square: false
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Bucatarie
secondary: ""
icon: mdi:food-turkey
entity: switch.aqara_kitchen_switch
tap_action:
action: navigate
navigation_path: /mushroom-one/bucatarie
icon_color: |-
{% if is_state('switch.aqara_kitchen_switch', 'on') %}
orange
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
}
.: |
ha-card {
margin-bottom: -20px;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.lounge_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sun_next_dawn
icon: mdi:dishwasher
content_info: state
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
- type: entity
entity: sun.sun
double_tap_action:
action: none
content_info: none
icon: mdi:ceiling-light
Hi guys. I need your help. I donāt know how to animate the chips in my room card.
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: hue:room-hallway
icon_color: |-
{% if is_state('switch.svet_koridor', 'on') %}
#99FF99
{% endif %}
{% if is_state('switch.svet_koridor', 'off') %}
grey
{% endif %}
primary: ŠŠ¾ŃŠøŠ“Š¾Ń
secondary: |-
{{ states ('sensor.klimat_koridor_temperature') }}Ā°Š” |
{{states('sensor.klimat_koridor_humidity') | int }}%
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -42px;
left: -125px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -42px;
left: -125px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -45px;
top: 100px;
}
.: |
ha-state-icon {
--icon-symbol-size: 60px;
padding-right: 10px;
padding-left: 0px;
padding-bottom: 20px;
height: 70px;
width: 30px;
}
ha-card {
--primary-text-color: rgb(183,181,174, 0.5);
--secondary-text-color: rgba(183,181,174, 0.3) !important;;
background: none;
}
:host {
--mush-icon-size: 126px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.svet_koridor
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
amber
{% else %}
light-grey
{% endif %}
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--icon-size: 32px;
width: 60px;
margin-left: 45%;
top: -140px;
background: none;
}
- type: template
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
red
{%else%}
light-grey
{% endif %}
icon: >-
{% if
is_state('binary_sensor.datchik_otkrytiia_dveri_koridor_contact',
'on') %}
mdi:door-open
{% else %}
mdi:door-closed-lock
{% endif %}
secondary: none
entity: binary_sensor.datchik_otkrytiia_dveri_koridor_contact
card_mod:
style: |
ha-card {
--icon-size: 32px;
width: 60px;
margin-left: 45%;
top: -140px;
background: none;
}
- type: template
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
blue
{%else%}
light-grey
{% endif %}
icon: >-
{% if
is_state('binary_sensor.datchik_dvizheniia_koridor_occupancy',
'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
secondary: none
entity: binary_sensor.datchik_dvizheniia_koridor_occupancy
card_mod:
style: |
ha-card {
--icon-size: 32px;
width: 60px;
margin-left: 45%;
top: -140px;
background: none;
}
card_mod:
style: |
ha-card {
height: 50px !important;
width: 66px;
margin-left: 60%;
background: none !important;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
background: rgba(61,61,61, 0.3);
border: none
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: |-
{% if is_state('switch.svet_i_ventiliatsiia_tualet_right', 'on') %}
#FFFF99
{% endif %}
{% if is_state('switch.svet_i_ventiliatsiia_tualet_right', 'off') %}
grey
{% endif %}
primary: ŠŠ°Š½Š½Š°Ń
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -49px;
left: -125px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -42px;
left: -125px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -45px;
top: 100px;
}
.: |
ha-state-icon {
--icon-symbol-size: 70px;
padding-right: 10px;
padding-left: 0px;
padding-bottom: 20px;
height: 85px;
width: 35px;
}
ha-card {
--primary-text-color: rgb(183,181,174, 0.5);
--secondary-text-color: rgba(183,181,174, 0.3) !important;;
background: none;
}
:host {
--mush-icon-size: 126px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.svet_i_ventiliatsiia_tualet_right
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
amber
{% else %}
light-grey
{% endif %}
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--icon-size: 32px;
width: 60px;
margin-left: 45%;
top: -140px;
background: none;
}
- type: template
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
green
{%else%}
light-grey
{% endif %}
icon: mdi:fan
secondary: none
entity: switch.svet_i_ventiliatsiia_tualet_left
card_mod:
style: |
ha-card {
--icon-size: 32px;
width: 60px;
margin-left: 45%;
top: -140px;
background: none;
}
card_mod:
style: |
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-icon {
{{ 'animation: spin 2s ease-in, spin 1.25s linear 2s infinite;' if states('switch.svet_i_ventiliatsiia_tualet_left') != '0' }}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
.: |
mushroom-conditional-chip {
height: calc(var(--chip-height));
}
:host {
--ha-card-background: var(--card-background-color);
}
ha-card {
height: 50px !important;
width: 66px;
margin-left: 60%;
background: none !important;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
background: rgba(61,61,61, 0.3);
border: none
}
Frosty
July 28, 2025, 9:04pm
1733
start with this basic animation and go from there.
type: custom:mushroom-chips-card
chips:
- type: template
content: Fan
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 3s ease 1s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
wrybit
August 11, 2025, 4:54pm
1734
Hello.
Iām new to Mushrooms
Is there a way to get an entity-list with the āclassic look and feelā but still in mushroom with all the nice style advantages? I mean an āentity cardā that isnāt filled with multiple chips, but only with lines of text, with the name on the left and the status on the right?
Greez Jens
Frosty
August 12, 2025, 5:58am
1735
well yes, I use a completely over the top way that doesnāt use mushroom card on a multiple-entity-row (will work the same way for standard entity card)
type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: var(--grey-color) solid 1px !important ;
}
cards:
- type: vertical-stack
cards:
- type: entities
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--card-secondary-color: var(--purple-color);
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0px;
}
entities:
- entity: sensor.pond_pumps_daily_energy_cost_2
card_mod:
style:
hui-generic-entity-row $: |
.info.pointer .secondary ha-relative-time {
color: var(--blue-color);
}
state-badge:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0.2;
{% if is_state(config.entity, 'home') %}
background: var(--red-color) !important;
{% else %}
background: var(--blue-color) !important;
{% endif %}
}
state-badge {
{% if is_state(config.entity, 'home') %}
color: var(--red-color) !important;
{% else %}
color: var(--blue-color) !important;
{% endif %}
}
.: |
:host {
--paper-item-icon-color: var(--blue-color) !important;
}
ha-card {
box-shadow: none;
border: none;
margin-top: -10px;
}
type: custom:multiple-entity-row
name: Pond Pump Cost
icon: mdi:fish
state_header: Cost
format: precision2
entities:
- entity: sensor.pond_pumps_daily_energy
name: KWh Day
format: precision2
- entity: sensor.pond_pumps_power
name: W
format: precision1
your have to play with colours and logic
2 Likes
Hi lads,
what i was hoping was a simple issue turns out to be harder than i hoped,
is there anyway to prevent the word āVloerverwarmingā being cut?
I mean the āspaceā is there
1 Like
Please provide your current code. The issue you have is fixable!
type: custom:mushroom-climate-card
entity: climate.vvw
grid_options:
columns: 12
rows: 1
fill_container: true
layout: horizontal
hvac_modes:
- heat
- "off"
show_temperature_control: false
name: Vloerverwarming
icon: mdi:heating-coil
card_mod:
style: |
ha-card {
border-radius: 12px;
background: var(--secondary-background-color);
}
/* Stronger overrides */
.name, .label, .title {
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: none !important;
width: auto !important;
}
/* Also override the container that may limit the text width */
.info, .text-content {
max-width: none !important;
width: auto !important;
}
this is the code with fixes iāve already tried, the ideal sollution would be never to cut the text if its to wide id should be just āoverā stuff
With a column width of 12 itās odd itās getting cut off.
Try this and let me knowā¦
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: baseline;
}
.: |
ha-card {
border-radius: 12px;
background: var(--secondary-background-color);
}
this canāt be coincidenceā¦ only yesterday did I find the space on my area cards secondary line used by the sensor classes too narrow, and several were showing the ellipsis, even though the action buttons were nowhere nearā¦
I was thinking of scrolling that line (didnt make it yet) but we did find a way to take away space from those buttons with this:
style:
.: |
.picture {
filter: {{'grayscale(70%)' if is_state(config.entity,'off') else 'none'}};
}
hui-card-features {
width: calc(30% - var(--column-gap,0px)/ 2 - 12px) !important;
}
Iāve tried your align-items: baseline; on those features, but that has unexpected results
now area card isnt mushroom card, I am aware.
Thatās too funny, I thought about the method I provided after we discussed this yesterdayā¦
hui-card-features {
width: calc(30% - var(--column-gap,0px)/ 2 - 12px) !important;
}
With multiple dash types and a myriad of device screen resolutions, I have been working towards more flexible CSS mod options.
exactly that. use relative methods And units where available seems most robust.
Should be in card-mod thread...
fwiw, Iāve noticed that setting that to
width: calc(20% - var(--column-gap,0px)/ 2 - 12px) !important;
makes the space a bit wider even, and if action buttons require, they auto-shrink
even
width: calc(20% - var(--column-gap,0px)/ 2 ) !important;
works, not sure where the finale - 12px was used
(note: it still is not 100% perfect, as it wont allow endless sensor_classes, or looks great on 3 buttons, but I would say for 95% of my area cards this suffices for now)
argh, sorry for the off-topic here, Ill move tha list bit to card-mod
1 Like
