Perfect 
Thank you!!
1 Like
I also like this Card and combinaded it with my normal Room Card which is added with a conditional card to open and close the Room. Still just Playing around with it.
As my Card getting really long with many Entities, is there an easy way to add “variables” so i can just Change the Entity and not the whole code for many rooms ?
For your use case i would recommend looking into the decluttering card. Its a bit complex, but helps with exactly what you want. Yaml anchors dont actually save well.
1 Like
Almost…:)))))))
1 Like
If you need some help, post the latest code please so we can continue on that. I went through all 8500 posts yesterday and got a bit confused on what was the latest lol.
@dimitri.landerloos, @rhysb and @ArenaCloser made my todo list insanely large with all the good posts in here lol. And now you as well @Mattia2399 
At least i am fully up to date now in the beautiful stuff that I could do and try to finish my WIP dashboard.
2 Likes
I created a topic for my configuration: Adaptive Mushroom (excuse the cross-posting). For questions, comments or suggestions, feel free to reach out. If you use my adaptive layout, I’d love to see your resulting dashboard there!
3 Likes
Love the new screens @ArenaCloser , especially the rick roller. Working with the layout since last week, but still running into some errors. E.g. the mobile footer isn’t sticky on my side. Didn’t look at this yet though, but will post it to your github when found.
1 Like
Just wanted to throw in my 2¢.
Animated the Purifier Icon from @rhysb and updated by @dimitri.landerloos based on the entity’s fan speed.
Not sure if this has been posted before (forgive me for not reading all 8500+ posts) but figured it might help someone. The idea came from the mushroom-fan-card animation.
I simply changed the animation: air 1s infinite; line to animation: air {{ 25 / (state_attr(config.entity , 'percentage')) }}s infinite;.
Here’s the card in full, with an updated power state badge:
type: custom:mushroom-template-card
primary: Purifier
layout: vertical
entity: fan.air_purifier
icon: mdi:air-purifier
icon_color: '{{ ''cyan'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: more-info
hold_action:
action: toggle
badge_icon: mdi:power
badge_color: '{{ ''#3CB371'' if is_state(entity, ''on'') else ''#DAA520'' }} '
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: air {{ 25 / (state_attr(config.entity , 'percentage')) }}s infinite;
{% else %}
{% endif %}
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
}
1 Like
Hey there,
i’m just getting started with dashboards and mushroom cards, but i already fail on simple things.I want to have a dashboard for my phone in the end with rows in it and quite narrow buttons. But i can’t find the right syntax to change font size and icon size to make it fit better. Especially the two cover cards. I’ve tried tinkering with “card_mod” but nothing changes. seems like i just don’t get the syntax right. Is there any example or documentation where i can check this? Greatly appreciate any help!
Thanks!
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 15% 15% 70%
grid-template-rows: 25% 25% 25% 25%
grid-template-areas: |
"a a1 a2"
"a a3 a4"
"b b1 b2"
"b b3 b4"
cards:
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
view_layout:
grid-area: a
- type: custom:mushroom-cover-card
entity: cover.rollo_buro_did
show_position_control: false
show_buttons_control: true
primary_info: state
fill_container: true
view_layout:
grid-area: a2
- type: custom:mushroom-cover-card
entity: cover.rollo_buro_did
show_position_control: true
show_buttons_control: false
icon_type: none
primary_info: none
secondary_info: none
fill_container: true
view_layout:
grid-area: a4
- type: button
show_icon: true
show_name: false
tap_action:
action: toggle
entity: switch.burod_pm_sperren
show_state: true
view_layout:
grid-area: a3
- type: custom:mushroom-light-card
entity: light.licht_kg_burod
fill_container: true
view_layout:
grid-area: a1
Try This one: edit card → open code editor → paste this code in:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.duo
show_brightness_control: true
icon: mdi:lightbulb-fluorescent-tube
name: Duo
Note: change entity to your entity name.
Hi All, Im trying to get a binary sensor(motion sensor) to change colour based on state (motion/no motion) any ideas where im going wrong?
type: custom:mushroom-template-card
primary: Kitchen Motion
secondary: ‘’
icon: mdi:motion-sensor
layout: vertical
icon_color: >-
{% if is_state(‘binary_sensor.kitchen_motion_310fcd24_ias_zone’, ‘True’) %} green {% else %} black {% endif %}
multiline_secondary: false
fill_container: false
Try:
type: custom:mushroom-template-card
primary: Kitchen Motion
secondary: ''
icon: mdi:motion-sensor
layout: vertical
icon_color: >
{{ 'green' if is_state('binary_sensor.kitchen_motion_310fcd24_ias_zone', 'on') else 'black' }}
multiline_secondary: false
fill_container: false
Can you share me energy cards code please?
Thank you
Hey guys,
Noob here needs some help. So after updating HA to core 2023 11.3, Supervisor 2023 11.2 and Operating System 11.1, the progress bar stopped showing at all in the media player card from @rhysb. Please tell me which way to dig
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.yandex_station_mg0000000000000284160000431a7637
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--rgb-indigo);
--primary-text-color: black;
--secondary-text-color: grey;
}
.actions {
--rgb-primary-text-color: var(--rgb-white);
--primary-text-color: rgb(var(--rgb-black));
}
- type: conditional
conditions:
- entity: media_player.yandex_station_mg0000000000000284160000431a7637
state_not: 'off'
- entity: media_player.yandex_station_mg0000000000000284160000431a7637
state_not: idle
card:
entity: media_player.yandex_station_mg0000000000000284160000431a7637
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--mush-rgb-indigo, 63, 81, 181), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--mush-rgb-indigo, 63, 81, 181));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card::before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.yandex_station_mg0000000000000284160000431a7637', 'idle') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.yandex_station_mg0000000000000284160000431a7637', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.yandex_station_mg0000000000000284160000431a7637', 'idle') %}
background: url( '{{ state_attr("media_player.yandex_station_mg0000000000000284160000431a7637", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.yandex_station_mg0000000000000284160000431a7637', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
And another question, but on a different topic. How do I combine the light switches to control them? How do I make a count of the switches turned on?
Hello,
I’m trying to change the icon color on custom:mushroom-lock-card. Red icon when unlocked and green icon when locked.
I understand it might be a simple thing, but I can’t seem to get it right 
Could someone help with hiding the state icon on the Mushroom Cover Card, please? I have card_mod installed. !!! Better yet, I would like to add the cover controls (garage) to the Mushroom Template Card. !!! I can’t find the solution to either of these with a Google search.
You cant on the lock card itself without card mod.
you can only use templates in the mushroom template card.
but with card mod it can be done like this pretty easily:
type: custom:mushroom-lock-card
entity: lock.backdoor_locked_in
card_mod:
style: |
mushroom-shape-icon {
{% if states('lock.backdoor_locked_in') == 'locked' %}
--icon-color: rgba(var(--rgb-green), 1) !important;
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--icon-color: rgba(var(--rgb-red), 1) !important;
--shape-color: rgba(var(--rgb-red), 0.2) !important;
{% endif %}
}
1 Like