I wasn’t either and didn’t understand why folks were struggling 
Thank you, I found the display I had before the update like this.
card_mod:
style: |
ha-card {
--card-primary-font-size: 105px;
--card-secondary-font-size: 30px;
--card-primary-line-height: 110px !important ;
--card-secondary-line-height: 35px !important ;
text-align: center;
}
Thank you very much, now everything is just great! For translation, I found this method -
type: markdown
content: >-
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %} {%set days =
['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота',
'Воскресение'] %}
{% set months = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня',
'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'] %} {{
days[now().weekday()] }} {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
{{ months[now().month-1] }}, {{ now().strftime('%Y') }} {% endif %}
I need to get rid of the background and increase the size of the icon. It’s clear what to do with a regular icon
card_mod:
style:
ha-card {
--ha-card-background: none;
box-shadow: none;
--icon-size: 63px;
}
but what about an animated one?
type: custom:mushroom-template-card
primary: ''
entity: input_boolean.home_ststus_away
icon: mdi:exit-run
layout: vertical
icon_color: |-
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
ha-icon {
--icon-animation: clip 1s linear infinite;
}
.shape {
--shape-animation: ping 3s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 15px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
{% else %}
grey
{% endif %}
}
Couple of issues here.
- Incorrect (old) path to icon animations:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
Should be like this now:
card_mod:
style: |
ha-state-icon {
animation: clip 1s linear infinite;
}
-
You dont have the keyframes for this animation. I dont have them to hand. But the animation of the icon wont work without it.
-
I wouldnt place an if statement outside an element. And also the if statement makes no sense really?
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
ha-icon {
--icon-animation: clip 1s linear infinite;
}
.shape {
--shape-animation: ping 3s infinite;
}
{% else %}
grey
{% endif %}
}
If boolean is on then animate icon and animate shape else grey? See how that doesnt really make sense?
I would do it like this if you are doing if statements. And yes this means repeating the if statement potentially but it works better:
card_mod:
style: |
ha-state-icon {
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
animation: clip 1s linear infinite;
{% else %}
{% endif %}
}
- And for your actual question on how to combine there is a section in the first post about what the .: | and $ symbols do. But it should be like this. With all fixes (except missing keyframe for the icon animation):
type: custom:mushroom-template-card
primary: ''
entity: input_boolean.home_ststus_away
icon: mdi:exit-run
layout: vertical
icon_color: |-
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
--shape-animation: ping 3s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 15px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-state-icon {
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
animation: clip 1s linear infinite;
{% else %}
{% endif %}
}
ha-card {
--ha-card-background: none;
box-shadow: none;
--icon-size: 63px;
}
Thank you so much for helping and explaining! Everything works as it should work!!! I still have a couple of questions left and my dashboard will finally be finished! Thank you )
Please help me create a template for animated Mushroom Chips using this fan icon as an example! I need its color to be changed depending on the selected mode and also rotation speed must be changed, depending on mode. For examle:
{% if is_state_attr('fan.zhimi_va4_aca3_air_fresh', 'preset_mode', 'Sleep')%}
Color: light-green/ rotation 3sec
'fan.zhimi_va4_aca3_air_fresh', 'preset_mode', 'Low'
Color: green/ rotation 2sec
{% else %}
grey
{% endif %}
I almost succeeded, but there was a lot of code… (
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Спальня
secondary: >-
{{ states('sensor.0x00158d000709bf12_temperature') | round(1) }}°C {{
states('sensor.0x00158d000709bf12_humidity') | round(1) }}%
icon: mdi:bed
entity: light.bedside_lamp_rgbww_light
tap_action:
action: toggle
double_tap_action:
action: navigate
navigation_path: bedroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: fan.zhimi_va4_aca3_air_fresh
icon: mdi:fan
tap_action:
action: toggle
hold_action:
action: none
icon_color: |-
{% if is_state ('fan.zhimi_va4_aca3_air_fresh', 'on')%}
green
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotation 3s linear infinite;' if is_state('fan.zhimi_va4_aca3_air_fresh', 'on') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
Hello my friends!
I need help with a simple text colour change. No matter what I do, the primary and secondary colour stays the same. The problem shows in every card (mushroom-template for example). I think cardmod works, since the backroundchange is no problem. But as you can see the text stays black (or white in dark mode).
My theme is “Adaptive Mushroom” and I tried different themes with the same result.
What could be wrong?
type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
style:
mushroom-state-info$: |
.container {
–primary-text-color: blue;
–secondary-text-color: orange;
}
change to --card-primary-color: and --card-secondary-color:
That should fix it
type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-card {
--card-primary-color: blue !important;
--card-secondary-color: orange !important;
}
1 Like
Also make sure you are on Mushroom 3.4.1
1 Like
Thank you so so much!
This worked! I was searching the web and chatpgt for hours and didn’t find a solution.
I love this community.
Have a great Sunday!
1 Like
Best way to know is to look at the Mushroom change logs, use Chrome’s DevTool, or look directly at the JavaScript.
Enjoy the rest of your weekend as well!
1 Like
Trying to make the Person card badge icon to show just a small badge colour (dot) without an icon, however having trouble resizing it. Any ideas? thanks
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: ''
.: |
ha-card {
--icon-size: 40px;
--card-mod-icon: none !important;
--badge-size: 10px;
width: fit-content;
margin: 5px 0px 0px 100px;
background: transparent !important;
border: 0px !important;
}
Like this?
type: custom:mushroom-person-card
entity: person.dimitri_landerloos
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 0px;
--badge-size: 10px;
}
Yeh, I tried implementing it with my existing code but nothing is changing, some changes need to be made?
Show how you implemented it with your code please.
Highly likely I messed it all up. I’ve tried simply copying and pasting to my existing code:
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: ''
.: |
ha-card {
--icon-size: 40px;
width: fit-content;
margin: 5px 0px 0px 100px;
background: transparent !important;
border: 0px !important;
}
mushroom-badge-icon {
--badge-icon-size: 0px;
--badge-size: 10px;
}
And also this way:
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-badge-icon$:
.: |
ha-card {
--badge-icon-size: 0px;
--badge-size: 5px;
}
mushroom-shape-avatar$: ''
.: |
ha-card {
--icon-size: 40px;
width: fit-content;
margin: 5px 0px 0px 100px;
background: transparent !important;
border: 0px !important;
}
This should work:
type: custom:mushroom-person-card
entity: person.dimitri_landerloos
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
.: |
ha-card {
--icon-size: 40px;
width: fit-content;
margin: 5px 0px 0px 100px;
background: transparent !important;
border: 0px !important;
}
mushroom-badge-icon {
--badge-icon-size: 0px;
--badge-size: 10px;
}
1 Like
Does anyone see why my text is getting chopped off like this? It doesn’t matter what size the text is, it gets chopped off unless it’s tiny. I also noticed that the text color will not change using --primary-text-color: blue; under mushroom state info.
type: custom:mushroom-template-card
entity: alarm_control_panel.alarmo
primary: |
{% if is_state(entity, 'armed_home') %}
ARMED HOME
{% elif is_state(entity, 'armed_away') %}
ARMED AWAY
{% elif is_state(entity, 'armed_night') %}
ARMED NIGHT
{% elif is_state(entity, 'disarmed') %}
DISARMED
{% else %}
OFFLINE
{% endif %}
fill_container: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
layout: vertical
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: null
.: |
ha-card {
border-radius: 0px;
{% if is_state(config.entity, 'armed_home') %}
background-color: rgba(255, 0, 0, 100);
{% elif is_state(config.entity, 'armed_away') %}
background-color: rgba(255, 0, 0, 100);
{% elif is_state(config.entity, 'armed_night') %}
background-color: rgba(255, 0, 0, 100);
{% elif is_state(config.entity, 'disarmed') %}
background-color: rgba(0, 100, 0, 100);
{% else %}
background-color: rgba(175, 90, 0, .4);
{% endif %}
}
mushroom-state-info$: |
.container{
--card-primary-font-size: 50px;
}