Thanks @dimitri.landerloos! Any idea why the text color isn’t working?
yes. --primary-text-color and --secondary-text-color have changed in version 3.4.1 to
--card-primary-color and --card-secondary-color. this is to keep mushroom in line with the standard tile cards.
i havent updated this guide to 3.4.1 just yet as i have seen a few more open bugs still that i am waiting a bit to see if they will get squashed. but it will be updated to reflect this change soon 
1 Like
You’re awesome dude!
@dimitri.landerloos Hi! Could you help me out? If you look at my picture the 2nd weather card is “good” but this is one using an other entity which doesnt work with tap_action. So i wanted to add a other weather card but the scaling is bad ( the one above ) it should be like the 2nd…
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.laurens
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.adna
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: template
entity: input_boolean.jax_home_not_home
picture: local/images/jax.jpg
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
{% if is_state(config.entity, 'on') %}
--chip-background: rgb(var(--rgb-state-person-home));
{% else %}
--chip-background: red; /* Set to red when the status is 'off' */
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: template
entity: input_boolean.gasten_modus
icon: mdi:account-plus
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
{% if is_state(config.entity, 'on') %}
--chip-background: rgb(var(--rgb-state-person-home));
{% else %}
--chip-background: red; /* Set to red when the status is 'off' */
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: weather-forecast
show_current: true
show_forecast: false
entity: weather.buienradar
forecast_type: daily
theme: Mushroom Shadow
name: ' '
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weersverwachting
content:
type: entities
entities:
- type: custom:weather-card
entity: weather.forecast_home
forecast: true
details: false
card_mod:
style:
.: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 5px !important;
}
.current{
font-size: 6px;
}
This is not related to this topic…
Please look here 
1 Like
Hello gentlemen,
could you please help me out, I’m trying to rotate 90 degrees a custom:mushroom-title-card. Thanks for your time.
type: custom:mushroom-title-card
title: Rollo Küche
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg;
}
It rotated for me. Is it part of a larger card?
I added a few more mods you can play with
type: custom:mushroom-title-card
title: Rollo Küche
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
Hi,
I am totally confused and maybe a stupid question. I know that the color naming has changed but I can’t get my title card working. even a damn short one doesn’t work as expected. What am I doing wrong here ? It’s not blue it’s not green.
Thx for any help.
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
style: |
ha-card {
--card-primary-color: blue !important;
--card-secondary-color: green !important;
}
Different fields for Mushroom’s Title card
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
style: |
ha-card {
--title-color: red !important;
--subtitle-color: blue !important;
}
You just saved my life. Many Thx. Where do I find these kind of infos. Was looking around but I guess I found only wrong places.
Yes I know that. My question goes more into the direction where to find infos when something is changing as for example under the title card the old staff is still present. Don’t get me wrong I am not telling @dimitri.landerloos to update this asap. No No I am actually very very glad about this post. But there must be somewhere a release note or something else. Was on the GitLab side but unfortuately I didn’t find anything.
OK Thx. That is actually a quite good approach. I will use that in the future. Thx for pointing that out. 
The post will be updated soon, i tend to keep quite up to date. it is just that there are some open bug reports in 3.4.X at the moment that i am waiting to see if they will get resolved before updating
2 Likes
LiQuid_cOOled, thank you, but somehting is not working on my side.
Is not a larger card, it’s just a horizontal stack. But even alone is still not displayed rotated.
Card mod is installed, mushroom as well… do you have any other sugestions, what to check?
If its a horizontal stack post the full code please. Its likely due to the fact that horizontal and vertical stack dont have a ha-card element.
Is there a better way for me to utilize the current color of an RGB bulb to declare the color in the ping animation?
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: black !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba({{state_attr(config.entity,'rgb_color') | join(', ')}}, 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
In theory, this should work. It seems to cause a lot of weird performance issues, though (i.e. the icon background won’t stay black, the animation continues after the light turns off, etc). The color of the animation does change properly, though. That has me curious if my syntax is outta whack.
Can anyone help with this query? I am setting up a new dashboard and using an input number set linked to a mushroom title card. I can style the title card with a single background color, but when it comes to templating the code doesn’t appear to work. by itself the border will work, but when I add the if/else code, nothing works.
I am new to CSS, so any help would be appreciated.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: All Lights
card_mod:
style: |
ha-card {
border: white 1px dashed !important;
{% if is_state('input_number.tabs_lights') == '1.0' %}
background: #00ff00;
{% else %}
background: #ff00ff;
{% endif %}
}
title_tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tabs_lights
data:
value: 1
Hello, how can I make the entity card not in the “off” state
the color is displayed white, but another rgb(x,x,x) color?
So that when they are off, they are only visible in the background.
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.: |
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
bottom: 4px;
display: block;
/* /* z-index: 999; */ */
}
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 1px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
section article > * {
--ha-card-border-radius: 12px 12px 0px 0px;
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': rgb(255,152,0)
'--mdc-theme-secondary': grey
'--mdc-tab-text-label-color-default': white
'--mdc-typography-button-font-size': 16px
'--mdc-tab-stacked-height': 30px
'--mdc-tab-height': 48px
'--mdc-tab-horizontal-padding': 0px
'--mdc-tab-color-default': grey
'--mdc-icon-size': 14px
tabs:
- attributes:
icon: mdi:sofa
isFadingIndicator: true
minWidth: false
isMinWidthIndicator: false
stacked: false
card:
type: grid
square: false
columns: 1
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
--chip-border-radius: 10%;
--chip-border-color: transparent;
}
alignment: center
chips:
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}% '
entity: sensor.wand_wz_temperature
icon: mdi:thermometer-lines
icon_color: orange
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 140px;
}
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}% '
entity: sensor.wand_wz_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}°C '
entity: input_number.heizung_wz_eco
icon: mdi:sprout
icon_color: green
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}°C '
entity: input_number.heizung_wz_comfort
icon: mdi:home-account
icon_color: yellow
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}°C '
entity: input_number.heizung_wz_nacht
icon: mdi:weather-night
icon_color: blue
tap_action:
action: more-info
hold_action:
action: more-info
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
--chip-border-radius: 10%;
--chip-border-color: transparent;
}
alignment: center
chips:
- type: entity
entity: person.tom
icon_color: light-green
icon: mdi:home-automation
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('person.tom', 'home') %}
display: none !important;
{% endif %}
}
- type: entity
entity: person.sandra
icon_color: light-green
icon: mdi:home-automation
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('person.sandra', 'home') %}
display: none !important;
{% endif %}
}
- type: entity
entity: switch.heizung_wz1_switch
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: switch.heizung_wz1_switch_2
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: switch.heizung_wz2_switch
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: switch.heizung_wz2_switch_2
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: input_boolean.heizung_wz_eco
content_info: none
icon_color: green
tap_action:
action: more-info
hold_action:
action: more-info
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('input_boolean.heizung_wz_eco', 'on') %}
display: none !important;
{% endif %}
}
- type: entity
entity: input_boolean.heizung_wz_comfort
content_info: none
icon_color: yellow
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('input_boolean.heizung_wz_comfort', 'on') %}
display: none !important;
{% endif %}
}
- type: template
entity: sensor.heizung_wz_night
icon: mdi:weather-night
icon_color: |-
{% if is_state('sensor.heizung_wz_night', 'True') %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{% if not is_state('sensor.heizung_wz_night', 'on') %}
display: none !important;
{% endif %}
}
- type: entity
entity: binary_sensor.fenster_wz
content_info: none
icon_color: red
use_entity_picture: false
card_mod:
style: |
ha-card {
{% if not is_state('binary_sensor.fenster_wz', 'on') %}
display: none !important;
{% endif %}
}