You can use custom:stack-in-card to merge a mushroom template card with a media player card (where you hide everything but the volume bar).
1 Like
Is it possible to place custom:mushroom-number-card vertically, the whole slider/buttons?
Hi guys, when using custom stack in card to add some chips with additional detail into a primary card, is it possible to have the chips overlay the first card, rather than stack? id like to place chips into a card without disrupting the size, spacing etc of the primary card when its in a grid
Nice card 
Could you explain how it works with that dropdown card?
Do I need to create a input boolean to achieve this?
Hi,
I’ve arrived a little late to this party. However I’m getting a real kick out of building a lovely mobile card.
I have two questions:
- How to build a chip card that counts the number of lights that are on?
- Is it possible to display the date?
Thanks so much for your effort in presenting this to me. I’m not a programmer!
TIA
Regards,
John
Hi John,
Best way for both of your requests is to use the built in “template” version of the card/chip.
you can then use the homeassistant built in jinja templating within your card.
something like this:
Card Code
How it is added in visual editor:
and in raw Yaml code:
type: custom:mushroom-chips-card
chips:
- type: template
content: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Bedroom'))
|map(attribute='entity_id')
|list | count > 0
%}
{{ expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Bedroom'))
|map(attribute='entity_id')
|list | count }}
{% else %}
{% endif %}
icon: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Bedroom'))
|map(attribute='entity_id')
|list | count > 1
%}
mdi:lightbulb-multiple
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Bedroom'))
|map(attribute='entity_id')
|list | count > 0
%}
amber
{% else %}
white
{% endif %}
And then to display dates there is a great thread on how to convert dates into multiple different formats just how you would like it here.
But if you are only just starting let me give you a pointer. if you have a sensor that gives you a future date/time like this for example:
It will be a string when parsed initially, which we cant use to convert with. so you first need to convert it to a datetime. this is easy with this:
We can then subract the time that it is now, from the future time that the sensor gives like this:
We will want that in seconds so that we can convert that to days, hours, minutes, etc. whatever you desire. just easier when you have seconds already
You can then convert that using the link i gave in various ways. the one i like to use is this:
{{((states('sensor.washing_machine_washer_completion_time') | as_datetime) - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) }}
This gives me hours and minutes which is just fine for my washing machine completion time
if you then wanted to use that in a mushroom card, you would again use the template card or the template chip so that you can add the info like this:
Card Code
How its added in visual editor:
and just raw yaml code:
type: custom:mushroom-template-card
primary: Washing Machine
secondary: |-
{% if states('sensor.washing_machine_washer_job_state') == 'none' %}
Finished
{% else %}
Est. Completion {{((states('sensor.washing_machine_washer_completion_time') | as_datetime) - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) }}
{% endif %}
icon: |-
{% if states('sensor.washing_machine_washer_job_state') == 'drying' %}
mdi:tumble-dryer
{% else %}
mdi:washing-machine
{% endif %}
icon_color: |-
{% if states('sensor.washing_machine_washer_job_state') == 'none' %}
#5bc779
{% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
#697fff
{% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
#fc7b03
{% endif %}
entity: sensor.washing_machine_washer_job_state
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
8 Likes
Thanks Dimitri. That’ll keep me interested (quiet!) for a while 
Hello,
Trying to create a side bar, and i want to fix date / time font weight, remove those HA grey borders and move the icon in the opposite side.
this is my code.
Code
cards:
- type: custom:mushroom-template-card
primary: >-
{{ as_timestamp(states('sensor.date'))|timestamp_custom('%A %d %B', true)
}}
secondary: ''
icon: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 18px;
text-align: center;
font-family: 'Open Sans', sans-serif;
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.time'') }}'
secondary: ''
icon: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 100px;
text-align: center;
- type: custom:mushroom-template-card
primary: Test 1
secondary: ''
icon: mdi:home
card_mod:
style: |
ha-card {
--card-primary-font-size: 18px;
background-color: #002f7a !important;
border-radius: 50px !important;
margin-left: 100px;
margin-right: -50px;
- type: custom:mushroom-template-card
primary: Test 1
secondary: ''
icon: ''
- type: custom:mushroom-template-card
primary: Test 1
secondary: ''
icon: ''
- type: custom:mushroom-template-card
primary: Test 1
secondary: ''
icon: ''
- type: custom:mushroom-template-card
primary: Test 1
secondary: ''
icon: ''```
mushroom-state-item:
$: |
.container {
flex-direction: row-reverse !important;
margin-bottom: -40px;
}@PskNorz @andiukas. I would say that this likely works better for most people.
card_mod:
style:
mushroom-state-item$: |
.container {
flex-direction: row-reverse !important;
}
mushroom-state-info$: |
.container {
align-items: end !important;
padding-right: 10px;
}
So in your case like this:
- type: custom:mushroom-template-card
primary: Test 1
secondary: ''
icon: mdi:home
card_mod:
style:
mushroom-state-item$: |
.container {
flex-direction: row-reverse !important;
}
mushroom-state-info$: |
.container {
align-items: end !important;
padding-right: 10px;
}
.: |
ha-card {
--card-primary-font-size: 18px;
background-color: #002f7a !important;
border-radius: 50px !important;
margin-left: 100px;
margin-right: -50px;
}
4 Likes
Anyone have a idea? Or ist it not possible?
I would use a horizontal stack with 2 chips cards. The left one is aligned left and the other is aligned right. Or else you should try a spacer chip somewhere.
Thanks it worked!
Q1: How can i change the fonts weight / style, i will show how i did it and tell me if it is correct way.
"Photo | Code
- type: custom:mushroom-template-card
primary: >-
{{ as_timestamp(states('sensor.date'))|timestamp_custom('%A %d %B', true)
}}
secondary: ''
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 100 !important;
}
.: |
ha-card {
--card-primary-font-size: 15px;
text-align: center;
font-variant: small-caps;
}
Q2: How can i make disappear all the borders?
1 Like
Hi There, I have created this little card that I have created, it’s static only at this moment. And please note im not a CSS wizard in any stretch of the imagination
How can I better sort the icons so they dont do this?
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Next Rubbish Collection
secondary: This Friday
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
margin-left:10px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:trash-can
icon_color: red
badge_icon: mdi:check-bold
badge_color: green
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
left:15px;
margin: 0 -10px 0 0;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:trash-can
icon_color: green
badge_icon: mdi:check-bold
badge_color: green
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
left:5px;
margin: 0 -10px 0 0;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:trash-can
icon_color: grey
badge_icon: mdi:close
badge_color: grey
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
left:0px;
margin: 0 -10px 0 -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:bottle-wine
icon_color: grey
badge_icon: mdi:close
badge_color: grey
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
margin: 0 10px 0 -10px;
}
3 Likes
You could do it with chips instead? then you know the scaling will work across screen sizes.
This solution does require you to have material icons font installed which can be found here:
and @rhysb has explained how to install here:
Code
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Next Rubbish Collection
secondary: This Friday
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
margin-left:10px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: ''
icon: mdi:trash-can
icon_color: red
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-red), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "done";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:trash-can
icon_color: green
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-green), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "done";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:trash-can
icon_color: grey
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-grey), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "close";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-grey));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:bottle-wine
icon_color: grey
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-grey), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "close";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-grey));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
alignment: end
card_mod:
style: |
ha-card {
top: 16px;
}
3 Likes
font weight numerical values go from 100 - 900 from light to extra bold.
for the border, put this below every one of you cards in the stack. or if you already have an ha-card just add the border: none !important; to it. (untested)
card_mod:
style: |
ha-card {
border: none !important;
}
1 Like
This is a very good looking card!
To make even better for my purposes. Is it possible to also include a toggle for lights in the upper right corner of the lower card?
Something like this
1 Like
Hello everyone,
I have a room overview that uses color codes to signal whether something is turned on (orange) or if there’s a critical alarm, such as a water leak or similar issues > red
So far, I’ve been handling this with conditional variables, which works, but depending on the situation, it doesn’t look very appealing. I would like to have the rooms listed in a grid of two columns in the order I specify.
Currently, only two rooms are displayed in a single column. Is there a way to list all the rooms one after another and then display them in two columns?
I understand that if only one room is critical, only one room will be displayed. However, when there are two or more critical rooms, I’d like the display to look “nicer.”
like so:
and not so:
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: 'Rooms: '
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Room 1
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_01
icon: mdi:table-furniture
icon_color: >-
{% if is_state('group.room_01critical', 'on') %}
red
{% elif is_state('group.room_01notify', 'on') %}
orange
{% elif is_state('group.room_01critical', 'off') and
is_state('group.room_01notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
double_tap_action:
action: none
hold_action:
action: none
badge_color: ''
- type: custom:mushroom-template-card
primary: Room 2
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_02
icon: mdi:door
icon_color: >-
{% if is_state('group.room_02critical', 'on') %}
red
{% elif is_state('group.room_02notify', 'on') %}
orange
{% elif is_state('group.room_02critical', 'off') and
is_state('group.room_02notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Room 3
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_03
icon: mdi:bed
icon_color: >-
{% if is_state('group.room_03critical', 'on') %}
red
{% elif is_state('group.room_03notify', 'on') %}
orange
{% elif is_state('group.room_03critical', 'off') and
is_state('group.room_03notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
primary: Room 4
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_04
icon: mdi:toilet
icon_color: >-
{% if is_state('group.room_04critical', 'on') %}
red
{% elif is_state('group.room_04notify', 'on') %}
orange
{% elif is_state('group.room_04critical', 'off') and
is_state('group.room_04notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Room 5
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_05
icon: mdi:sofa
icon_color: >-
{% if is_state('group.room_05critical', 'on') %}
red
{% elif is_state('group.room_05notify', 'on') %}
orange
{% elif is_state('group.room_05critical', 'off') and
is_state('group.room_05notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
primary: Room 6
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_06
icon: mdi:balcony
icon_color: >-
{% if is_state('group.room_06critical', 'on') %}
red
{% elif is_state('group.room_06notify', 'on') %}
orange
{% elif is_state('group.room_06critical', 'off') and
is_state('group.room_06notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
Can you post some code on how you are making this work right now? hard to understand what you are wanting when i dont understand what you currently have.
sorry i forgot to attach it, i edited the post right away.
the examples below I didn’t exist I would have made it as I said simply with the “condition” card, but since it doesn’t look very nice I haven’t changed this yet so