one last thing and it’ll be perfect! 
How to enlarge the icons please? I tried --chip-icon-size: XXpx; but no result. Thank you very much and I am very grateful!
–chip-icon-size should work as long as you are putting it in the right section. put it like the example:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: blue
- type: template
icon: mdi:dishwasher
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
--chip-icon-size: 30px;
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
--chip-icon-size: 30px;
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
mushroom-template-chip:nth-child(1) {
{% if states('input_boolean.vd_mycka') == 'off' %}
margin-right: 0px !important;
display: none !important;
{% else %}
{% endif %}
}
mushroom-template-chip:nth-child(2) {
{% if states('input_boolean.vd_mycka') == 'off' %}
margin-right: 0px !important;
display: none !important;
{% else %}
{% endif %}
}
1 Like
entity: vacuum.dreamebot_l10s_ultra
type: custom:mushroom-vacuum-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
}
this does not work for me
Yes, we have found that for some it only applies the color using the --shape-color variable when the state is on for the entity in the card. can you test if this is the case?
if you want to change the color regardless of state just do this instead:
entity: vacuum.dreamebot_l10s_ultra
type: custom:mushroom-vacuum-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: blue !important;
}
Yes, that’s how it works
1 Like
Hi,
I need some help.
I don’t know what I did wrong? I added the “badge-icon section” at the bottom of the card_mod, now my main “Red” icon doesn’t rotate anymore when it’s in Heating or Cooling mode.
Can you please give me a pointer? It used to rotate very nicely.
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% set status = state_attr('climate.kitchen','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-bottom: 14px !important;
}
:host {
height: 120px;
--mush-icon-size: 46px;
--mush-icon-symbol-size: 1.30em;
--mush-spacing:9.9px;
--mush-card-primary-font-size: 16px;
--mush-card-secondary-font-size: 19px;
--mush-card-secondary-font-weight: bold;
--mush-card-primary-line-height: 1.5;
--secondary-text-color: rgb(151,151,151);
--primary-text-color: rgb(225,225,225);
}
mushroom-badge-icon {
top: -10px;
left: -8px;
--badge-icon-size: 26px;
--badge-size: 26px;
}
This should work.
card_mod:
style: |
ha-state-icon {
{% set status = state_attr('climate.kitchen','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {transform: rotate(360deg);}
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-bottom: 14px !important;
}
:host {
height: 120px;
--mush-icon-size: 46px;
--mush-icon-symbol-size: 1.30em;
--mush-spacing:9.9px;
--mush-card-primary-font-size: 16px;
--mush-card-secondary-font-size: 19px;
--mush-card-secondary-font-weight: bold;
--mush-card-primary-line-height: 1.5;
--secondary-text-color: rgb(151,151,151);
--primary-text-color: rgb(225,225,225);
}
mushroom-badge-icon {
top: -10px;
left: -8px;
--badge-icon-size: 26px;
--badge-size: 26px;
}
Take a look at the updated animations in the first post towards the bottom.
So if it was working before you were/are using an old version of mushroom cards.
Hi,
Would anyone be able to help?
Im unsure what i’ve done wrong I just cannot get the font size to change on my mushroom title card.
type: custom:mushroom-title-card
title: My Home
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
}
Ahh…now you reminded me that I actually upgraded the mushroom card version yesterday morning. Why would the new mushroom version break my old animation code? What has changed in the latest versions? I hadn’t updated mushroom card for almost 9 months until yesterday.
BTW, thanks for the suggestion. Would your new suggestion work with the latest mushroom version?
The structure of css was changed to more closely align with regular HA cards and animation was simplified so all animations (except shape animations) just start with animation rather than for example --icon-animation but yes, what i gave you is for the newest version.
I linked you to the updated animations you can take a look there and compare to the old ones to see how its changed
Do you have card mod installed?
Yes I have card mod installed it works on other cards just not the mushroom title card
Sorry to say but works just fine on mine.
May be a dumb question but have you tried setting to a number larger than 20px?
type: custom:mushroom-title-card
title: My Home
alignment: center
subtitle: test
card_mod:
style: |
ha-card {
--title-font-size: 60px !important;
}
Very strange maybe I will try reinstall it. This is what I get
Yes i’ve exactly copied your code there with the sizing.
You are the best!!! Thanks so much for your help and detailed explanation. I have been doing HA for past 12 months, and thus far, you are the best contributor who is continuously and generously helping others with your vast knowledge and experience. Kudos to you!!! Thank you thank you thank you!!!
BTW, your correction really works!!! Thank you!
1 Like
Hi, I finally got the animation working, it’s working great! Thank you! Now, I got stuck with another problem. I want to replace the default “temperature control button bar” with the “Blue & Red” button bar with bigger font size (pls see attached picture). I tried many edits, and the Blue and Red buttons still wouldn’t show. Can you please take a look and see what error I made? Thanks.
card_mod:
style: |
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
.value {
font-size: 20px;
}
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
:host {
height: 120px;
--mush-card-primary-font-size: 16px;
--mush-card-secondary-font-size: 19px;
--mush-card-secondary-font-weight: bold;
--mush-card-primary-line-height: 1.5;
--secondary-text-color: rgb(151,151,151);
--primary-text-color: rgb(225,225,225);
}
ha-state-icon {
--icon-symbol-size: 33px;
}
mushroom-badge-icon {
top: -10px;
left: -8px;
--badge-icon-size: 23px;
--badge-size: 23px;
}
ha-state-icon {
{% set status = state_attr('climate.bedroom','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
animation: shake 6s ease-in-out infinite;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
mushroom-shape-icon {
--shape-color: none !important;
}
You cant have multiple | in a single line. take a look in the first post a section called “what the $ and .:| symbols do”
but essentially you need to do this:
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
.value {
font-size: 20px;
}
.: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
:host {
height: 120px;
--mush-card-primary-font-size: 16px;
--mush-card-secondary-font-size: 19px;
--mush-card-secondary-font-weight: bold;
--mush-card-primary-line-height: 1.5;
--secondary-text-color: rgb(151,151,151);
--primary-text-color: rgb(225,225,225);
}
ha-state-icon {
--icon-symbol-size: 33px;
}
mushroom-badge-icon {
top: -10px;
left: -8px;
--badge-icon-size: 23px;
--badge-size: 23px;
}
ha-state-icon {
{% set status = state_attr('climate.bedroom','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
animation: shake 6s ease-in-out infinite;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
mushroom-shape-icon {
--shape-color: none !important;
}
so your error is here:
style: |
mushroom-climate-temperature-control$:
mushroom-input-number$: |
you have a | in style, followed by another |. that is not allowed. only one is allowed per “flow” shall i call it.
and then because you want to use style: | for the other entries (because they dont need to enter the shadow root via the $ symbol), then you can use .: | to pretend you are back at style: |
1 Like
Ahh…got it! I read more of the first post. Now, I understand. Thanks for the help and correction. It’s working the way I want now.
Thanks again 
Thank you so much! With your help i was able to set up cards like a pro 
I was googling and trying quite a lot and it was a pain until i found your guide.
1 Like