i tried it and it looked good:
but when i viewed it from mobile things got messy (even when i used % instead of px):
wouldnt it be better to style the icon-shape as a button instead of the ha-card?
actually probably better to just use Chips instead. then you can set the chip container to justify content and they will work on different screen sizes 
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:arrow-up
card_mod:
style: |
ha-card {
width: 118px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:square
card_mod:
style: |
ha-card {
width: 118px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:arrow-down
card_mod:
style: |
ha-card {
width: 118px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
alignment: justify
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(3)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
.: |
ha-card {
padding: 0px 10px 10px 10px
}
thanks, but somehow it looks different at my side and spacing is very strange.
will this even work on different screen sizes if the ha-card with and height is defined as pixels? 
You are right. i was just saying that using the chip card as a base will ensure it works on all screen sizes. but you still need to figure out how to size the width chips themselves dynamically. the height being set shouldnt matter at all.
i found that this code works courtesy of @eMeF
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:arrow-up
card_mod:
style: |
ha-card {
justify-content: center;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:square
card_mod:
style: |
ha-card {
justify-content: center;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:arrow-down
card_mod:
style: |
ha-card {
justify-content: center;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
alignment: justify
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-spacing: 12px !important;
}
Hello!
I have just updated to the latest version. But now my navigation bar is up top instead of at the bottom.
Can someone help me with what I should write in the theme file to move it back down again?
first thing i would do is see if there is a card-mod update for you to install as well. install it, then clear your browser/apps cache and see if that helps
1 Like
The first card you got there looks really nice with that black information bar. Can you share your code?
1 Like
Is there a way to adjust the spaxing between primary and secondary information of a template card uaing card_mod? Thanks in advance and best regards
in my guide:
doesnt tell you exactly what you want, but you could always just do:
card_mod:
style:
mushroom-state-info$: |
.container {
gap: 20px;
}
I just wanted to pass on a big thanks to Dimitri and Rhys for their numerous examples and code. I decided to redesign my entire dashboard and have made good progress so far on the homepage. Still a long way to go but I’m happy. Room cards change picture based on light status so if lights are off it will show picture of room with lights off.
1 Like
I will when I have some spare time. Writing a manual takes hours. But with the manual you can easily configure the dashboard to your needs.
Nice can you share how did you do your welcome card with chips please?
Hi,
First, Lovely mushroom card! Bravo!
Second, Is there a way to change the dimming method on the light cards?
Instead of adjusting immediately while sliding, sending the adjust only after you release the slider. Like the others.
I notice that some dimmers prefer that.
Thanks!
Nice card, mind sharing the code?
Hey guys!
It might be a stupid question, however, I think I am facing some slow respond to taps on the mushroom cards. I do feel there is one second or smth like that of a delay when I click on a switch/light/any-actionable thing. Is it only me?
I tried searching the thread but didnt find anything similar? Anyone aware of how I can reduce this ‘delay’?
Hello,
I’m trying to create a card with my temperature and humidity sensors. I try to put a title on the card, by using the area_name of the area where my sensor is :
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: {{ area_name('Temp_Hum_1') }}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Température
icon: mdi:home-thermometer-outline
secondary: '{{ states.sensor.temp_hum_1_temperature.state_with_unit }}'
- type: custom:mushroom-template-card
primary: Humidité
icon: mdi:home-thermometer-outline
secondary: '{{ states.sensor.temp_hum_1_humidity.state_with_unit }}'
Unfortunately, it’s not working : I’ve got no title :
An idea how to sort it out ?
I was previously using a birthday card on my dashboard. This card showed only one person’s birthday. For a long time, I wanted to design a card where I could visually see the upcoming birthdays of several people at the same time. I was able to do this with the list calendar events feature that comes in Home Assistant 2023.9 version.
This card currently lists 4 people who have birthdays in the coming days. The cards also work in a dynamic structure and shows the time left until the birthday. When the birthday is over, it renews itself and moves on to the next person’s birthday card. I will also put a button on the cards so that it will activate an automation that will give me an extra reminder. By the way, the card shows only 4 people, but this number can be increased if desired. As far as I know, there is no card or integration that visually displays birthdays on the Home assistant. I will also use these cards in the tablet interface that can be controlled with Alexa, which I will build in the coming weeks.
Similarly, I created a card to follow football matches.
3 Likes
Its just a combination of different stack in cards.
Here’s the code.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: alarm_control_panel.yale_smart_alarm
content_info: none
icon: >-
{{ 'mdi:shield-off' if
is_state('alarm_control_panel.yale_smart_alarm', 'disarmed') else
'mdi:shield-check' }}
icon_color: >-
{{ 'red' if is_state('alarm_control_panel.yale_smart_alarm',
'disarmed') else 'green' }}
name: Alarm
- type: template
entity: lock.front_door
icon: >-
{{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
'mdi:lock-open-variant' }}
icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
content: null
hold_action:
action: call-service
service: lock.unlock
data:
code: 'XXXX'
target:
entity_id: lock.front_door
tap_action:
action: more-info
- type: spacer
- type: weather
entity: weather.winshields_way
show_conditions: true
show_temperature: true
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}!
{% elif (time >= 12) %}
Good Afternoon, {{user}}!
{% elif (time >= 5) %}
Good Morning, {{user}}!
{% else %}
Hello, {{user}}
{% endif %}
subtitle: ''
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border-radius: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: -25px;
margin-top: -25px;
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: >-
{{ states('person.greg').replace('not_home',
'Away').title() }}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/hallway
fill_container: true
layout: vertical
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 0px 2px black;
--card-primary-font-weight: 400;
--primary-text-color: white;
--card-primary-font-size: 12px;
#align-items: end;
margin-top: 70px;
inline-size: 75px;
margin-left: auto;
text-transform: capitalize;
text-align: left;
text-indent: 7px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--secondary-text-color: white;
--card-secondary-font-weight: 350;
margin-top: -5px;
margin-left: -35px;
text-transform: capitalize;
}
.: |
:host {
{% if is_state('person.greg', 'home') %}
background: url('/local/images/persons/greg.JPG') center;
background-size: contain;
background-position-y: -30px;
#filter: grayscale(70%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{%- else -%}
background: url('/local/images/persons/greg.JPG') center;
background-size: contain;
background-position-y: -30px;
#background-blend-mode: overlay;
filter: grayscale(100%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 200px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
height: 75px;
width: 75px;
border-radius: 7.5px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: >-
{{ states('person.sarah').replace('not_home',
'Away').title() }}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/hallway
fill_container: true
layout: vertical
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 0px 2px black;
--card-primary-font-weight: 400;
--primary-text-color: white;
--card-primary-font-size: 12px;
#align-items: end;
margin-top: 70px;
inline-size: 75px;
margin-left: auto;
text-transform: capitalize;
text-align: left;
text-indent: 7px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--secondary-text-color: white;
--card-secondary-font-weight: 350;
margin-top: -5px;
margin-left: -35px;
text-transform: capitalize;
}
.: |
:host {
{% if is_state('person.sarah', 'home') %}
background: url('/local/images/persons/sarah.JPG') center;
background-size: contain;
background-position-y: -30px;
#filter: grayscale(70%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{%- else -%}
background: url('/local/images/persons/sarah.JPG') center;
background-size: contain;
background-position-y: -30px;
#background-blend-mode: overlay;
filter: grayscale(100%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 200px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
height: 75px;
width: 75px;
border-radius: 7.5px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: >-
{{ states('person.cameron').replace('not_home',
'Away').title() }}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/hallway
fill_container: true
layout: vertical
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 0px 2px black;
--card-primary-font-weight: 400;
--primary-text-color: white;
--card-primary-font-size: 12px;
#align-items: end;
margin-top: 70px;
inline-size: 75px;
margin-left: auto;
text-transform: capitalize;
text-align: left;
text-indent: 7px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--secondary-text-color: white;
--card-secondary-font-weight: 350;
margin-top: -5px;
margin-left: -35px;
text-transform: capitalize;
}
.: |
:host {
{% if is_state('person.cameron', 'home') %}
background: url('/local/images/persons/cameron.JPG') center;
background-size: contain;
background-position-y: -20px;
#filter: grayscale(70%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{%- else -%}
background: url('/local/images/persons/cameron.JPG') center;
background-size: contain;
background-position-y: -20px;
#background-blend-mode: overlay;
filter: grayscale(100%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 200px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
height: 75px;
width: 75px;
border-radius: 7.5px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: >-
{{ states('person.rhys').replace('not_home',
'Away').title() }}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/hallway
fill_container: true
layout: vertical
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 0px 2px black;
--card-primary-font-weight: 400;
--primary-text-color: white;
--card-primary-font-size: 12px;
#align-items: end;
margin-top: 70px;
inline-size: 75px;
margin-left: auto;
text-transform: capitalize;
text-align: left;
text-indent: 7px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--secondary-text-color: white;
--card-secondary-font-weight: 350;
margin-top: -5px;
margin-left: -35px;
text-transform: capitalize;
}
.: |
:host {
{% if is_state('person.rhys', 'home') %}
background: url('/local/images/persons/rhys.JPG') center;
background-size: contain;
background-position-y: -20px;
#filter: grayscale(70%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{%- else -%}
background: url('/local/images/persons/rhys.JPG') center;
background-size: contain;
background-position-y: -20px;
#background-blend-mode: overlay;
filter: grayscale(100%);
#background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 200px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
height: 75px;
width: 75px;
border-radius: 7.5px;
margin-left: auto;
margin-right: auto;
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: horizontal
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: back
- type: alarm-control-panel
entity: alarm_control_panel.yale_smart_alarm
content_info: none
name: Alarm
- type: template
entity: lock.front_door
icon: >-
{{ 'mdi:lock' if is_state('lock.front_door', 'locked')
else 'mdi:lock-open' }}
icon_color: >-
{{ 'green' if is_state('lock.front_door', 'locked') else
'red' }}
content: null
tap_action:
action: more-info
- type: conditional
conditions:
- entity: light.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.light.all_lights) | selectattr(
'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: light.all_lights
icon_color: grey
- type: conditional
conditions:
- entity: media_player.livingroomtv
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:cast
content: |-
{{ expand(states.media_player.all_media_players)
| rejectattr( 'state', 'in', ['idle'])
| rejectattr( 'state', 'in', ['standby'])
| rejectattr( 'state', 'in', ['off'])
| rejectattr( 'state', 'in', ['paused'])
| list | count }}
tap_action:
action: more-info
entity: media_player.all_media_players
- type: conditional
conditions:
- entity: binary_sensor.garage
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:garage-open
tap_action:
action: more-info
entity: binary_sensor.garage
card_mod:
style: |
ha-card {
#padding: 0px;
box-shadow: none;
border-radius: none;
background-color: white;
margin-left: auto;
margins-right: auto;
border: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: 1px;
border-radius: 15px;
background-color: white;
}
2 Likes
Thanks, sure here is the code for a room tile.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Hallway
secondary: >-
{{ states('sensor.sonoff_a44001d0c1_temperature') | round (1) }}°C - {{
states('sensor.sonoff_a44001d0c1_humidity') | round (0) }}%
icon: none
entity: light.hallway_lamp
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/hallway
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 400;
--primary-text-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 170px;
inline-size: 180px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--secondary-text-color: white;
--card-secondary-font-weight: 350;
margin-top: -4px;
}
.: |
:host {
{% if is_state('light.hallway_lamp', 'on') %}
background: url('/local/images/areas/hallway.PNG') center;
background-size: cover;
background-blend-mode: overlay;
#filter: grayscale(70%);
background-color: rgba(var(--rgb-card-background-color), 0.0);
{% else %}
background: url('/local/images/areas/hallwayoff.jpeg') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 220px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.front_door
state: 'on'
chip:
type: template
entity: binary_sensor.front_door
icon_color: red
icon: mdi:door-open
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: template
entity: lock.front_door
icon_color: red
icon: mdi:lock-open-variant
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.hallway_lamp
icon: >-
{{ 'mdi:lightbulb' if is_state('light.hallway_lamp', 'on') else
'mdi:lightbulb-outline' }}
icon_color: '{{ ''orange'' if is_state(''light.hallway_lamp'', ''on'') else ''grey'' }}'
content: >-
{{ expand(states.light.hallway_lamp) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: hallway
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -15px;
margin-top: -4px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
{% if is_state('light.hallway_lamp', 'on') %}
#box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
#border-radius: 10px;
#background: rgba(245, 173, 66, 0.3); {% endif %}
}
2 Likes
Hello,
I am experiencing an issue with styling the mushroom-chips-card using card-mod. I’m trying to achieve two things:
- Set a background style for the entire card.
- Apply an animation to a specific state icon.
Here’s the working animation code I have:
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-state-icon {
{{ 'animation: eureka 1.8s infinite;' if is_state('switch.0x540f57fffed36109_l2', 'on') }}
}
When I try to incorporate the background styling:
card_mod:
style: |
.chip-container {
background-color: #1c1c1c;
border-radius: 10px;
padding-top: 10px;
padding-left: 10px;
}
mushroom-template-chip:nth-child(3) ha-state-icon {
{{ 'animation: eureka 1.8s infinite;' if is_state('switch.0x540f57fffed36109_l2', 'on') else '' }}
}
The issue arises where the card background styling works, but the animation does not.
If I bypass card-mod and directly use:
- type: custom:mushroom-chips-card
style: |
.chip-container {
background-color: #1c1c1c;
border-radius: 10px;
padding-top: 10px;
padding-left: 10px;
}
The background styling works perfectly, but I need the animations provided by card-mod.
Any guidance or solutions would be greatly appreciated!