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
Yes, just do:
card_mod:
style: |
ha-state-icon {
{% if states('fan.example') == 'on' %}
animation: spin 1s linear infinite;
{% endif %}
}
And if your animation has keyframes just keep them outside the ha-state-icon block like this:
card_mod:
style: |
ha-state-icon {
{% if states('fan.example') == 'on' %}
animation: spin 1s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
1 Like
Oops, missed the s from 1s… now amended, should work! 
2 Likes
That fixed it! thank you so much!!!
1 Like
I’m new to using card-mod, wondering if it is possible to use a card-mod block to update all mushroom cards in a vertical stack?
Example being, I have my lights in a single vertical stack, when a light is off, I want the secondary text to be red “Off”
I started with a single light, but going this route will bloat my code like crazy…
Hoping there might be a variable to use instead of calling the exact entity?
type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Light Controls
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.kitchen_lights
use_light_color: true
show_brightness_control: true
tap_action:
action: more-info
name: Kitchen Lights
collapsible_controls: true
icon: mdi:light-recessed
double_tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.island_light_switch
use_light_color: true
show_brightness_control: true
tap_action:
action: more-info
name: Island Light
collapsible_controls: true
double_tap_action:
action: toggle
card_mod: null
style:
mushroom-state-info$: |
.container {
{% if states('light.island_light_switch') == 'off' %}
--secondary-text-color: #FF483F;
{% endif %}
}
No. but you can do a couple things:
- try and edit it using your theme instead and target only mushroom light cards (this will however apply to ALL mushroom light cards in your dashboard.)
- Use Decluttering Card from HACS. cant go into much detail as i dont use it, but many use it to clean their config.
- Yaml anchors. seems like the solution you want but once you save your anchors are converted to the raw code instead defeating the entire purpose (unless you do your dashboard in Yaml only mode.)
You can refer to the light that you are reffering to in the card in card mod with config.entity instead.
so lets say you want to do:
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'on' %}
background: blue;
{% endif %}
}
1 Like
gave that a try, even simplified the code to just a couple lights with all defaults…
Assuming this is what you mean? But I am not seeing any changes
even tried this…
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'off' %}
--secondary-text-color: #FF483F;
{% endif %}
}
No. so that is what i mean - no way other than the ways i listed to try and reduce the amount of code written. but instead of writing:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Light Controls
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.kitchen_lights
card_mod:
style: |
ha-card {
{% if states('light.kitchen_lights') == 'on' %}
background: blue;
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.island_light_switch
card_mod:
style: |
ha-card {
{% if states('light.island_light_switch') == 'on' %}
background: blue;
{% endif %}
}
you can instead write:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Light Controls
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.kitchen_lights
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'on' %}
background: blue;
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.island_light_switch
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'on' %}
background: blue;
{% endif %}
}
its not a big help, but at least now you can copy the code between light cards without having to change the entity in card mod every time.
that is maybe the happy medium for now… Thanks!
also changed it a bit to check on the unavailable condition
This works now…
ha-card {
{% if (states(config.entity) == 'unavailable') or (states(config.entity) == 'off') %}
--secondary-text-color: #FF483F;
{% endif %}
}
was trying for a
{% if 'unavailable' or 'off' in states(config.entry) %}
But that didn’t work correctly
You can do:
{% if states(config.entity) in ['off','unavailable'] %}
It will then check if either is true in the list. Using [] ensures what you have with commas is seen as a list. Using in will also work using () as this also tends to become a list with jinja. Using () with comma seperated values is meant to make a tuple rather than a list, but jinja is smart enough to know intent most of the time. But i think its better to be explicit with this and use [].
1 Like