Yes like this or similar
type: custom:mushroom-person-card
entity: person.jay673
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 0px;
--badge-size: 15px;
outline: 3px solid white;
border-radius:50%;
}
1 Like
I’ll get back to you later today if no one answers you 
1 Like
Great, thank you!
Guys, can make the chip card animate?
I tried something like this but to no avail:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.toilet_presence
content_info: none
icon: mdi:human
icon_color: |-
{% if is_state('binary_sensor.toilet_presence', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
upd: oh sorry, I see I had used badge…
I see where the problem is, the animated washing machine have two cards stacked, the orange and the blue are two cards…
I got it working on the small card, with this code, but I only want it to animate when sensor.aeg_roupa_appliancestate is not idle, now its animated all the time, because it don’t have the conditional.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto Brinquedos
secondary: >
{{states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} °C
icon: mdi:washing-machine
entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
tap_action:
action: navigate
navigation_path: quarto_brinquedos
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: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 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); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
EDIT: I managed to put in the big icon also, but the blue part I don’t know how to resize it. In all off them I need the condition
Code for the last buttons:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lavandaria
icon: mdi:washing-machine
entity: null
tap_action:
action: navigate
navigation_path: lavandaria
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 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); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
--mush-icon-size: 76px;
top: -62px;
border-width: 0px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.lavandaria_janela_lavandaria_17
icon: >
{%- set jalousie =
state_attr('cover.lavandaria_janela_lavandaria_17',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: >
{%- set jalousie =
state_attr('cover.lavandaria_janela_lavandaria_17',
'current_position') | int %} {% if jalousie >= 2 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.lavandaria_janela_lavandaria_17','current_tilt_position') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.NENHUMA', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sala de estar
secondary: >-
{{
states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} °C
icon: mdi:sofa
entity: light.escritorio_tras_interruptor_1
tap_action:
action: navigate
navigation_path: sala-de-estar
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.sala_portas_sala_varanda_15
icon: |
{%- set jalousie = state_attr('cover.sala_portas_sala_varanda_15',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{%- set jalousie = state_attr('cover.sala_portas_sala_varanda_15',
'current_position') | int %} {% if jalousie >= 2 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.sala_portas_sala_varanda_15','current_tilt_position') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.escritorio_tras_interruptor_1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
card_mod:
style: |
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
Hope you can give me a hand here, my knowledge is not so great, I try and do what I can. 
1 Like
Can anyone give me a hint if there is a way to make my crafts appear the same on both the desktop (expected option) and the mobile app (not expected option)?
Desktop:
App:
- type: custom:mushroom-template-card
primary: Airwick
icon: mdi:spray
icon_color: |-
{% if is_state('switch.toilet_airwick_valve', 'on') %}
red
{% else %}
teal
{% endif %}
layout: vertical
entity: switch.toilet_airwick_valve
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: 0px 0px;
}
ha-card:after {
content: "{{ states('counter.toilet_airwick_total') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +10px;
right: +45px;
width: 21px;
height: 21px;
font-size: 11px;
}
:host {
--icon-size: 64px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
I believe this will get you what you want. @media is used is to apply different styles for different media types/devices.
Adjust the @media screen and (max-width: 400px) { to your liking
type: custom:mushroom-template-card
primary: Airwick
icon: mdi:spray
icon_color: |-
{% if is_state('switch.toilet_airwick_valve', 'on') %}
red
{% else %}
teal
{% endif %}
layout: vertical
entity: switch.toilet_airwick_valve
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: 0px 0px;
}
ha-card:after {
content: "{{ states('counter.toilet_airwick_total') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +10px;
right: +45px;
width: 21px;
height: 21px;
font-size: 11px;
}
:host {
--icon-size: 64px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
}
@media screen and (max-width: 400px) {
ha-card:after {
content: "{{ states('counter.toilet_airwick_total') }}";
position: absolute;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: 10px;
right: 55px;
width: 21px;
height: 21px;
font-size: 11px;
}
}
No problem, happy to help!
1 Like
Hello everyone,
I am building a custom mushroom-template-card for my washing machine.
It looks like this:
I have the primary info showing “Running” and the secondary info showing time and spin speed.
Is there a way to display the secondary info over 2 lines as opposed to having them on the same line? My current code looks like this:
secondary: >
Time - {{states('sensor.electrolux_sawa_washing_machine_timetoend')}} Min
Spin
{{states('select.electrolux_sawa_washing_machine_userselections_analogspinspeed')}
4 Likes
I’m sure there is a more elegant way to do it with the custom mushroom cards but using card mod on e.g. a tile card I would do the following using white-space and \A to do a line break:
ha-tile-info$: |
.secondary:after {
visibility: visible;
content: "Time - {{ states('sensor.electrolux_sawa_washing_machine_timetoend') }} Min \A Spin {{ states('select.electrolux_sawa_washing_machine_userselections_analogspinspeed') }} %";
white-space: pre-wrap;
}
Obviously you would need to adapt to the correct styling but just an example
2 Likes
Hello I have a problem on mobile with the template cards.
For seome reason it only shows me the text in grey instead of black. but only on mobile.
i have set the color of text in the card mod with:
--primary-text-color: Black;
--secondary-text-color: Black;
what can it be?
Try changing to and avoid capitalizations
--card-primary-color: black;
--card-secondary-color: black;
hi, now its
-
Grey on web
-
icon grey on mobile but on mobile text is black
Clear your web browser’s cache and can you post your full card code?
You also have the ability to set mobile only settings with @media screen and (max-width: 400px) {
sure
- type: custom:mushroom-template-card
primary: '{{states(''sensor.inverter_1_yield_today'')}} kW'
secondary: Heute
icon: mdi:lightning-bolt
icon_color: none
fill_container: true
entity: sensor.inverter_1_yield_today
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background:
{% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
rgb(255, 255, 190)
{% elif states('sensor.inverter_1_bt2240102870_realtime_power') >'0.001'%}
rgb(255, 255, 80)
{%endif%};
border: none;
border-radius: 25px;
--icon-symbol-size: 35px;
--card-primary-color: black;
--card-secondary-color: black;
--card-secondary-font-weight: Regular;
transition: 0s;
}
You also have the ability to set mobile only settings with @media screen and (max-width: 400px) {
→ dont want to overcomplicate it
As you are using a mushroom template card, this is what I use:
multiline_secondary: true
secondary: |
{{ ((states('sensor.pv_inverter_pv_dc_power_input') | float(0) ) / 0.1027) | round(0,default=0) }}%
{{ states('sensor.pv_inverter_pv_dc_power_input')| float(0) | round(3) }}kW
{{ ((states('sensor.pv_inverter_pv_dc_power_input') | float(0) * 1000) / 47.306016 ) | round(0,default=0) }}W/m²
{{ ((states('sensor.pv_inverter_dc_current_east') | float(0) + states('sensor.pv_inverter_dc_current_west') | float(0)) / 2) | round(1,default=0) }}A
does this work on both?
type: custom:mushroom-template-card
primary: |
{{states('sensor.inverter_1_yield_today')}} kW
secondary: Heute
icon: mdi:lightning-bolt
icon_color: none
fill_container: true
entity: sensor.inverter_1_yield_today
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background:
{% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
rgb(255, 255, 190)
{% elif states('sensor.inverter_1_bt2240102870_realtime_power') >'0.001'%}
rgb(255, 255, 80)
{%endif%}
border: none;
border-radius: 25px;
--icon-symbol-size: 35px;
--card-primary-color: black !important;
--card-secondary-color: black !important;
--card-secondary-font-weight: 400;
transition: 0s;
}
unfortunatelly not.
Same result
- grey on WEB
- grey icon and black text on Mobile
funny thing. it worked before perfectly until update to HA 2024.02
your icon color says none. We have to move your if statement up there. Give me a minute.