yes me too. i thought to have a problem cause the delay… Im configuring your switch bar. I dont understand because if i dont hide the cards, switch bar disappear, while with " regular cards on dashboard" i can see all my buttons on switch card fixed bottom.
Can you give me a right code? thanks
when light is off, the secondary text moves to a second line; any way to have “off” simply replace the brightness value / same position on the first line ?
I also changed the font sizes with :
ha-card {
--card-primary-font-size: 2rem;
--card-secondary-font-size: 1.25rem;
#text-align: center;
}
different font sizes seem to align to the bottom, any way to align-items center?
I’ve tried some options from the styling guide and other sources, unsuccessfully.
Thanks again!
Yes. just remove the check that i have. i wanted it to move back to default when off, but if you dont like that behaviour just remove the if statements from this section:
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
so then like this:
.container {
display: flex;
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
}
align-items: baseline aligns the text to the bottom, so the bottom of the font is on the same line. so just try align-items: center instead 
Hoping one of yall brilliant minds can help me out. I’m trying to increase the height of a slider. I use top/left to position my cards, and it although it places my card correctly, the height element has zero effect. I’ve also tried various configurations with card-mod but could not get the desired results.
- type: custom:mushroom-light-card
entity: light.zachs_lamp
show_brightness_control: false
show_color_control: true
primary_info: none
secondary_info: none
icon_type: none
style: |
:host {
top: 70%;
left: 50%;
width: 95%;
height: 60px;}
Have a look here:
https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472/10
Hey guys, can’t find a soultion, maybe you could help 
Is it possible to make mini-graph-card as background of stack-in-card?
Now it is stacked at bottom, but would like to make background as minigraph.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: >-
{{ states('sensor.atc_vonia_3d70_temperature') | round(0) }} °C🌡️ {{
states('sensor.atc_vonia_3d70_humidity') | round(0) }} %💧 {% if
states("sensor.atc_vonia_3d70_battery") | round(0) > 50 -%} {{
states('sensor.atc_vonia_3d70_battery') | round(0) }} %🔋{%- else -%}{{
states('sensor.atc_vonia_3d70_battery') | round(0) }} %🪫 {%- endif %}
icon: mdi:stove
entity: light.kitchen_all
tap_action:
action: toggle
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: 64px;
height: 66px;
margin-left: -20px !important;
margin-top: -2px !important;
--mush-card-secondary-font-size: 15px
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.virtuves_led
icon_color: '{% if states("light.virtuves_led") == "on" %} orange {% endif %}'
- type: light
entity: light.virtuves_sala
icon: mdi:vanity-light
tap_action:
action: toggle
- type: conditional
conditions:
- entity: binary_sensor.dishwasher_running
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:dishwasher
card_mod:
style: |
.content {
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: rotate(5deg); }
60% { transform: rotate(-4deg); }
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 1;
--chip-height: 50px
}
- type: custom:mini-graph-card
name: Temperature
entities:
- sensor.atc_salion_23a9_temperature
label: null
show:
labels: false
icon: true
color_thresholds:
- value: 20
card_mod:
style: |
ha-card {
height: px;
{% if is_state('group.light.mini5', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
This isnt pretty but you can use it to figure out what to do.
Set the position to absolute on the graph card and then set the height on the stack card and graph card to the same.
If you need any card to be on top of the graph. Then set the card to have a transparent background and set it to z-index: 1;
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: >-
{{ states('sensor.atc_vonia_3d70_temperature') | round(0) }} °C🌡️ {{
states('sensor.atc_vonia_3d70_humidity') | round(0) }} %💧 {% if
states("sensor.atc_vonia_3d70_battery") | round(0) > 50 -%} {{
states('sensor.atc_vonia_3d70_battery') | round(0) }} %🔋{%- else -%}{{
states('sensor.atc_vonia_3d70_battery') | round(0) }} %🪫 {%- endif %}
icon: mdi:stove
entity: light.kitchen_lights
tap_action:
action: toggle
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: 64px;
height: 66px;
margin-left: -20px !important;
margin-top: -2px !important;
--mush-card-secondary-font-size: 15px
}
ha-card {
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.bedroom_chest_lamp
icon_color: '{% if states("light.virtuves_led") == "on" %} orange {% endif %}'
- type: light
entity: light.bedroom_main_light
icon: mdi:vanity-light
tap_action:
action: toggle
- type: conditional
conditions:
- entity: input_boolean.dishwasher
state: 'off'
chip:
type: template
icon_color: blue
icon: mdi:dishwasher
card_mod:
style: |
.content {
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: rotate(5deg); }
60% { transform: rotate(-4deg); }
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 1;
--chip-height: 50px
}
- type: custom:mini-graph-card
name: Temperature
entities:
- sensor.lounge_downstairs_temperature
label: null
show:
labels: false
icon: true
color_thresholds:
- value: 20
card_mod:
style: |
ha-card {
position: absolute !important;
height: 200px;
top: 0px;
left: 0px;
}
card_mod:
style: |
ha-card {
height: 200px;
{% if is_state('group.light.mini5', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Hi,
I was wondering if you could give me an example of the following… Id like to have an input_boolean instead of person here. But it should look the same as person card…
Becouse id like to make a “guest” mode toggle & a toggle for my dog… But i dont want to use them to fill up my zone.home
entity: input_boolean.jax_home_not_home
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
name: Jax
entity: person.jax
content_info: none
use_entity_picture: true
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.jax_home_not_home
data: {}
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;
Hi, sorry if I’m going off topic, I wanted to ask you how did you create these family avatars?
See code
type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.tom
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 4s infinite;
{% else %}
animation: pingred 5s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 50px;
}
- type: custom:mushroom-person-card
entity: person.sandra
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 4s infinite;
{% else %}
animation: pingred 5s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 50px;
}
- type: custom:mushroom-person-card
entity: person.ben
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 4s infinite;
{% else %}
animation: pingred 5s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 50px;
}
- type: custom:mushroom-person-card
entity: person.tim
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 4s infinite;
{% else %}
animation: pingred 5s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 50px;
}
- type: custom:mushroom-person-card
entity: person.lena
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 4s infinite;
{% else %}
animation: pingred 5s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 50px;
}
Can someone tell me why this isn’t working? Is card_mod not applicable to the title card?
type: custom:mushroom-title-card
title: Hello, {{ user }} !
card_mod:
style: |
.title {
font-size: 15px;
color: red;
}
you just need a !important behind each of your items:
type: custom:mushroom-title-card
title: Hello, {{ user }} !
card_mod:
style: |
.title {
font-size: 15px !important;
color: red !important;
}
Sometimes things need an !important (often when it is something dictated by your theme… like a font color perhaps) importance is… important… in CSS, but i would always test to see if it works without the !important first and only add it when neccesary 
I think he was inquiring about the avatars themselves (images) and how you created them (which program/app) ? also interested to know 
is it Messenger avatars?
Well you cant have this section work the same way that it currently does because a person entity does not have the same states as an input boolean.
{% 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 %};
but lets say that “on” = “home” and “off” = “not_home” and if we can assume that we could build it like this:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
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: 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;
}
Hello,
It is possible to make a template card to look like the photo below?
Probably can be done.
A template card in vertical layout, and then for the top header use a css pseudo element to just write today.
Or put it in a stack in card with a title card using center alignment and write today in that too.
Can you show me how to use css pseudo element as you say?
Yes, that was the answer. Cheers!
