Hello,
Really love these cards. Did someone manage to get multiple entities in the same card like the default ha entities card?
Would be great for me to have something like this.
Thanks in advance
Would be great for me to have something like this.
This is how I made a title with chips
With Subtitle
No Subtitle
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 1fr
grid-template-areas: |
"title chips"
"subtitle subtitle"
margin: '-4px 0 -4px 0'
cards:
- type: custom:mushroom-title-card
title: Title
view_layout:
grid-area: title
- type: custom:mushroom-title-card
subtitle: Subtitle
view_layout:
grid-area: subtitle
card_mod:
style:
.: |
h2 {
transition: all 0s;
padding: 0 16px 12px;
}
.header {
transition: all 0s;
--title-padding: 0;
}
- type: custom:mushroom-chips-card
view_layout:
grid-area: chips
alignment: end
card_mod:
style: |
ha-card {
transition: all 0s;
transform: translateY(30%);
}
chips: []
I split the title and subtitle so the subtitle can be longer than the title space. You can adjust translateY to move the chips up and down if needed.
4 Likes
Still having massive trouble with this.
Letâs go on steps:
The mushroom-template-chip:nth-child(1)$: | works, 2 and 3 donât. Just the first one.
If I use template instead of âconditionâ it works, but it creates invisible icons disaligning everything.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.room_kitchen
primary: Cozinha
secondary: >-
{{ states('sensor.temp_kitchen') | round(1) }}°C | {{
states('sensor.humd_kitchen') | round(0) }}%
icon: mdi:fridge-outline
icon_color: blue
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: cozinha
hold_action:
action: call-service
service: light.turn_off
data:
transition: 3
target:
area_id: kitchen
double_tap_action:
action: toggle
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: 80px;
height: 65px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: spin 6s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: spin 6s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 100px;
{% if is_state('light.lightstrip_kitchen_light', 'on') %}
background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
{% elif is_state('light.candeeiro_cozinha', 'on') %}
background: rgba(245, 192, 47, 0.1);
{% endif %}
}
and on top of that, I canât make the icon follow the RBG still (as I asked on the previous post: Mushroom Cards - Build a beautiful dashboard easily đ - #6647 by MARTWIN)
Thanks. My config looks like this:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-title-card
title: Salon
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_salon
icon_color: amber
- type: entity
entity: sensor.humidity_salon
icon_color: light-blue
- type: entity
entity: sensor.co2_salon
icon_color: green
alignment: end
card_mod:
style: |
div.chip-container.align-end {
margin-top: 19px
}
layout:
grid-template-columns: auto 70%
margin: '-4px'
and this is a result:
1 Like
FOR THE ICON:
icon_color: |
{% if is_state(entity, 'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% endif %}
FOR ANIMATION:
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
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); }
}
1 Like
Okay, I think the animations are working. Had to slightly change your code from {{ 'animation: to just animation: and it works.
For the lightstrip, no success yet. Itâs showing this way.
Iâm also posting the states the lightstrip gives. Sometimes it isnât on RBG but on Brightness. But still, both modes still break. The gray part works.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.room_kitchen
primary: Cozinha
secondary: >-
{{ states('sensor.temp_kitchen') | round(1) }}°C | {{
states('sensor.humd_kitchen') | round(0) }}%
icon: mdi:fridge-outline
icon_color: >
{{ iif(is_state('light.lightstrip_kitchen_light','on'), "'#%02x%02x%02x' %
state_attr('light.lightstrip_kitchen_light','rgb_color')", 'grey') }}
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: cozinha
hold_action:
action: call-service
service: light.turn_off
data:
transition: 3
target:
area_id: kitchen
double_tap_action:
action: toggle
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: 80px;
height: 65px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.test_martwin') == 'on' and
states('input_boolean.room_bedroom') == 'on' %}
mdi:robot-vacuum
{% endif %}
icon_color: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.test_martwin') == 'on' and
states('input_boolean.room_bedroom') == 'on' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
alignment: end
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
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: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
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); }
}
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
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); }
}
card_mod:
style: |
ha-card {
height: 100px;
{% if is_state('light.lightstrip_kitchen_light', 'on') %}
background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
{% elif is_state('light.candeeiro_cozinha', 'on') %}
background: rgba(245, 192, 47, 0.1);
{% endif %}
}
@edit
Okay, I figured this works:
{{ '#%02x%02x%02x' % state_attr('light.lightstrip_kitchen_light',
'rgb_color') if states('light.lightstrip_kitchen_light') == 'on' else
'disabled' }}
But if the color isnât really RGB, and is doing a âbrightnessâ only color, it still shows the âbroken blackâ.
Can you help me fixing that?
I donât know which state I should look for tho, would brightness work?
Or even, show a SOLID COLOR, if the lightstrip isnât on rgb_mode, is that possible?
Imgur: The magic of the Internet - for help with states / understanding what I mean
Hi lads,
My shutters provided trough my local domotics provider doesnât support âstop / pauseâ function
(i can use the slider to set it to percentage X or Y but i only use that as a secondary control)
my primary control look like this:
is there a way to completly hide the pause / stop button and keep the other 2?
you have spacing before sunny but not before cloudy or partlycloudy, maybe thatâs it
1 Like
Found it!!! 
and it works!
the conditional chip has to parts. The first part is the condition like shown in your screenshot. Thesecond part ist the part where you define the chip that should be shown if your condition ist met.
Part I
Part II
So even if you like to display the entity of your condition you has to define that in the chips part.
Iâm pulling my hair out so hoping someone can save me from myself.
I have put several hours over a few attempts at this. Thereâs several people talking about it, but I just want to enlarge the size of the chips to be about double the size.
I havenât used card-mod much, but I tried that and no luck. I also straight edited the mushroom.js file to edit the " --chip-height: var(âmush-chip-height, 36px);" line to read " --chip-height: var(âmush-chip-height, 72px);" but every time i reload the page in Chrome, it is somehow showing 36px still. Iâm checking in the developer tools and in it shows " --chip-height: var(âmush-chip-height, 36px);"
I have even restarted the entire HA OS a couple of times in my attempts. The actual js file still shows my edits.
WTH am I missing? It seems like people using the card-mod method are just adjusting that same parameter in the card yaml, but I actually donât mind just making them all double to save effort on doing each one over and over.
I would be eternally grateful if someone can point me in the correct direction as to what Iâm missing. Thanks.
EDIT: For anyone else searching (or me 3 weeks from now when I forget) I figured out the card_mod: method of doing it and will just truck forward with that. I realized that whenever I update the mushroom installation that itâs probably going to overwrite my file adjustments anyway so this is likely the better way to do it. My issue was that I wasnât using the âââ designator.
This changes all the chips to be 60px high, when added to the yaml for the dashboard
card_mod:
style: |
ha-card {
--chip-height: 60px;
}
How do I change the color of Rhyâs person card, to tone them down a little.
If I modify these entries, nothing changes. Iâm missing somethingâŚ
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
You can simply create another file, calling it âmushroom customâ where I customize the theme as you want. If, on the other hand, you modify the already installed theme, it will go back to the way it was before with each update.
So I would like to share my weather mushroom button card. A big thanks to @rhysb for putting up with my nagging questions and also for creating the beautiful animations which I used in this card. The card is not complete because I havenât experienced all the weather conditions yet from my weather entities.
Basically, the animated icons change when the weather condition changes. When the card is clicked it navigates to my weather page.
type: custom:mushroom-template-card
icon: |-
{% set state=states(entity) %}
{% if state=='sunny' %}
mdi:weather-sunny
{% elif state== 'cloudy' %}
mdi:weather-cloudy
{% elif state== 'partlycloudy' %}
mdi:weather-partly-cloudy
{% elif state== 'rainy' %}
mdi:weather-rainy
{% elif state== 'clear-night' %}
mdi:weather-night
{% else %}
mdi:weather-cloudy-alert
{% endif %}
secondary: |
Weather
icon_color: |-
{% set state=states(entity) %}
{% if state=='sunny' %}
amber
{% elif state== 'cloudy' %}
grey
{% elif state== 'partlycloudy' %}
amber
{% elif state== 'rainy' %}
blue
{% elif state== 'clear-night' %}
orange
{% else %}
black
{% endif %}
primary: |2-
{% set d ={
'sunny': 'Sunny',
'partlycloudy': 'Partly Cloudy',
'cloudy': 'Cloudy',
'clear-night': 'Clear Night',
'rainy': 'Rainy',
} %}
{{ d.get(states(entity)) }}
tap_action:
action: navigate
navigation_path: /lovelace/weather
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
multiline_secondary: true
entity: weather.tomorrow_io_sawa_home_hourly
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: sunny 5s ease-in-out infinite alternate;' if is_state(config.entity, 'sunny') }}
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
ha-icon {
{{ '--icon-animation: cloudy 10s ease-in-out infinite, sun 2s infinite;' if is_state(config.entity, 'partlycloudy') }}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes sun {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
ha-icon {
{{ '--icon-animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;' if is_state(config.entity, 'rainy') }}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
ha-icon {
{{'--icon-animation: cloudy 10s ease-in-out infinite;' if is_state(config.entity, 'cloudy') }}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
ha-icon {
{{'--icon-animation: moon 10s linear infinite, stars 5s linear infinite;' if is_state(config.entity, 'clear-night') }}
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
However I do have a question and maybe someone can help. I wondering if I can display a value from a second entity as a secondary value? I have an outdoor sensor that gives me the real temperature at my home.
How could I add that if possible to my card to display as Secondary information?
Update:
So I was able to answer my own question and completed the secondary information with this code:
{{states('sensor.current_outdoor_temperature_bt1_30002') }}°C
1 Like
is it possible to use the button cards notification badge with mushroom entity card? for example:
The following custom button card doesnât show state of the entity when state is zero (0), but when I press the button, state can be some number (=>1), then it is shown on the badge. Also when it has a value i want to change the cardâs background color.
but i tried to use these at mushroom entity card, i cant see any badge. (bathroom button has value of 2 in this case)
I could also just use custom button card, but I like the style of the icon. Does anybody know how can i make icon look like mushroom card? icon inside a circle?
I am trying to make a fan icon spin, but I am not having much luck.
Can someone check my code please.
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
--icon-animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
have a look here:
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3240
@rhysb has created some amazing icon animations
I have a question regarding the state of scenes.
I have created two scenes, one is called âEvening Lightsâ and the other is called âNight Lightsâ
Both scenes have some common light entities.
This is the card for the evening scene.
type: custom:mushroom-entity-card
name: Evening Scene
icon: mdi:lamps
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.evening_lights
hold_action:
action: toggle
entity: light.evening_lights
icon_color: orange
fill_container: false
This is the card for the Night Lights Scene
type: custom:mushroom-entity-card
entity: light.night_light
name: Night Scene
icon: ''
icon_color: deep-purple
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.night_lights
hold_action:
action: toggle
fill_container: false
When i turn on the evening scene, the night scene icon and state show on and vice versa
Is there a way to only show the state of the active scene only? If evening lights are on then night scene is off and if night is on then evening scene is off?
Thanks in advance!
1 Like
A quick way to do this is to change your light group options to only activate when All entities are on in the helper.
1 Like
maybe it does rotate, but i guess you dont have to âblinkâ when itâs rotating 360deg in a split second 
your âsolutionâ will be found among the 100+ working examples, by a simple search in the forum