I found this post in part1 and I would like to transform it a litte bit.
I want to make it working for my shutters. left Icon for toggle and then th other buttons for fixed positions like sunprotection or something. How looks the code?! Cant get it working 
This should address this issue.
type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan1
secondary: >
{% if states(config.entity) == 'on' %}
{{state_attr(config.entity, 'percentage')}}%
{% else %}
Off
{% endif %}
tap_action:
action: toggle
icon: mdi:fan
layout: vertical
icon_color: |
{{ '#00bcd4' if is_state(config.entity, 'on') else 'grey' }}
primary: Fan
fill_container: false
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
}
.: |
ha-state-icon {
{% set pwr = states(config.entity) %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if (perc <= 17 and pwr == 'on') %} animation: rotation 2.5s linear infinite
{% elif (perc <= 34 and pwr == 'on') %} animation: rotation 2s linear infinite
{% elif (perc <= 51 and pwr == 'on') %} animation: rotation 1.5s linear infinite
{% elif (perc <= 67 and pwr == 'on') %} animation: rotation 1s linear infinite
{% elif (perc <= 84 and pwr == 'on') %} animation: rotation .75s linear infinite
{% elif (perc <= 100 and pwr == 'on') %} animation: rotation .5s linear infinite
{%- else %} animation: rotation 0s linear infinite
{% endif %};
}
ha-card {
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);
}
You can use a negative margin with margin: -20px 0px 0px 0px in the layout card.
type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 45% 35% 20%
margin: -20px 0px 0px 0px
grid-template-rows: auto
cards:
Perfect!!! Thank you very much!!!
I might need to start again, but a while ago I found a really slick and compact room card which I copied the code from and forgot about until now.
None of the entities / icons are displaying at the bottom, is there something obvious I’m missing here? (I’m a coding newb)
type: custom:vertical-stack-in-card
style: |
ha-card {
margin-left: 6px;
margin-right: -2px;
border-radius: 14px 5px 5px 5px !important;
margin-bottom: -4px !important;
border-color: rgb(0,0,0,0.05);
border-width: 2px;
}
cards:
- type: custom:mushroom-template-card
entity: group.lights_all_livingroom
icon: phu:rooms-living
badge_icon: >
{% if is_state(config.entity,'on') %} mdi:numeric-{{
states('group.lights_all_livingroom') }} {% endif %}
badge_color: transparent
icon_color: '{{ ''orange'' if is_state(config.entity,''on'') }}'
primary: Living Room
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: none
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action:
action: call-service
service: mqtt.publish
service_data:
topic: zigbee2mqtt/Living Room/set
payload_template: |
{% if is_state('light.living','on') %}
{{ "off" }}
{% else %}
{{ "on" }}
{% endif %}
double_tap_action:
action: toggle
card_mod:
style: |
ha-card:active mushroom-shape-icon {
display: flex;
animation: clip 2.5s;
background-color: var(--amber-color);
transition: all 2s;
}
mushroom-shape-icon {
border-radius: 50px;
}
mushroom-badge-icon {
--main-color: rgba(var(--rgb-amber),0.5) !important;
--icon-color: rgba(var(--rgb-red),0.5) !important;
border-radius: 50px !important;
margin-right: -5px;
box-shadow: 0.5px 0.5px 0.5px 0.5px var(--grey-color);
}
@keyframes clip {
0% { box-shadow: 0 0 1px 1px var(--yellow-color) inset; }
50% { box-shadow: 0 0 5px 15px transparent inset; }
51% { box-shadow: 0 0 1px 1px var(--amber-color); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
:host { border-width: 0px !important;
}
mushroom-card {
box-shadow: 1px 1px 1px rgb(0,0,0,0.0);
}
mushroom-state-info {
align-self: end !important;
text-shadow: 1px 1px 1px rgb(125,125,125,0.1);
margin-top: -12px;
}
ha-card {
--card-primary-font-size: 1.4em;
--card-primary-font-weight: 400;
{{ 'background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,0,0.1) 100%);' if is_state(config.entity, 'on') }}
--icon-size: 1.7em !important;
--icon-symbol-size: 1.3em !important;
--badge-icon-size: 1.4em;
padding-bottom: 0 !important;
align-text: end;
}
- type: entities
entities:
- type: custom:paper-buttons-row
extra_styles: |
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
@keyframes flash {
20% { opacity: 0.5 ;}
100% { opacity: 1 ;}
}
buttons:
- entity: sensor.living_room_temperature
name: >
{% if is_state('sensor.living_room_temperature','unavailable') %}
{{ "00°c" }}{% else %}{{ states('sensor.living_room_temperature')
| round }}°c{% endif %}
icon: false
styles:
button:
font-size: 13px
font-weight: 600
margin: 0em -0.5px 0em -0.4em
align-text: left
padding-left: 0px
name:
color: rgb(125,125,125,0.8)
state_styles:
unavailable:
name:
color: rgb(0,0,0,0)
tap_action: none
hold_action: none
double_tap_action: none
- entity: media_player.samsung_q70
name: false
icon: mdi:television-classic-off
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
state_icons:
'on': mdi:television-classic
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: media
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: media_player.pioneer
name: false
icon: mdi:audio-video-off
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
state_icons:
'on': mdi:audio-video
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: media
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: binary_sensor.motion_sensor_home_security_motion_detection_4
name: false
icon: mdi:circle
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
animation: >-
{% if is_state('binary_sensor.delay_motion_living','on') and
is_state('binary_sensor.living_motion_group','on') %} clip 2s
linear infinite {% endif %}
state_styles:
'on':
icon:
color: orange
'off':
icon:
color: rgb(125,125,125,0.8)
state_icons:
'off': mdi:motion-sensor-off
'on': mdi:motion-sensor
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: secure
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: binary_sensor.delay_door_living
name: false
icon: |
{% if is_state('binary_sensor.living_door_door_open','on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
animation: >-
{% if is_state('binary_sensor.delay_door_living','on') and
is_state('binary_sensor.living_door_door_open','on') %} flash
2s linear infinite {% endif %}
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: secure
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: light.living_lights_smart
name: false
icon: mdi:lightbulb-question-outline
styles:
button:
padding-right: 0em
margin-right: 0em
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
padding: 0em
margin: 0px -0.4em 0px -0.5px
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
state_icons:
'on': mdi:lightbulb
'off': mdi:lightbulb-outline
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: lights
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
styles:
justify-content: space-between
margin-top: '-1.2em'
margin-bottom: '-1.1em'
padding-left: 0em
padding-right: 0em
margin-left: 0em
margin-right: 0em
style: 'ha-card {background: none; !important;}'
I have wrote a post on Sticky Floating Navigation Menu - All Devices - Mushroom Chips Card if anyone is interested.
I thought this would be a good place to post a link to my complete code.
To start let’ add card_mod: here
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
If one of the device is no longer available in you system or has been renamed none of the devices will appear.
I was able to get them to appear, but all main entities were required.
Hello,
Can someone please tell me, if this collapsable card can be made strictly in mushroom?
Expander card is super flakey, and no CARD-MOD seems to work with it. I have tried literally everything. The onlhy thing I need to do is change the little arrow from blue to white. For some reason it shows up white b default on browser, but it is blue on my iphone. The only card that’s ever done that
So I would love to make it all in mushroom
type: custom:expander-card
title: ''
cards:
- square: false
type: grid
cards:
- type: custom:button-card
icon: mdi:power
color: gray
tap_action:
action: navigate
navigation_path: media
double_tap_action:
action: call-service
service: script.tv
hold_action:
action: call-service
service: script.switch
theme: mushroom
name: power
styles:
card:
- color: gray
- background-color: RGB(45,45,45)
name:
- font-size: 0.8em
- white-space: normal
icon:
- width: 30px
- height: 40px
label:
- font-size: 0.7em
- white-space: normal
- type: custom:button-card
icon: mdi:fan-speed-1
color: gray
tap_action:
action: navigate
navigation_path: media
double_tap_action:
action: call-service
service: script.tv
hold_action:
action: call-service
service: script.switch
theme: mushroom
name: low
styles:
card:
- color: gray
- background-color: RGB(45,45,45)
name:
- font-size: 0.8em
- white-space: normal
icon:
- width: 30px
- height: 40px
label:
- font-size: 0.7em
- white-space: normal
- type: custom:button-card
icon: mdi:fan-speed-2
color: gray
tap_action:
action: navigate
navigation_path: media
double_tap_action:
action: call-service
service: script.tv
hold_action:
action: call-service
service: script.switch
theme: mushroom
name: medium
styles:
card:
- color: gray
- background-color: RGB(45,45,45)
name:
- font-size: 0.8em
- white-space: normal
icon:
- width: 30px
- height: 40px
label:
- font-size: 0.7em
- white-space: normal
- type: custom:button-card
icon: mdi:fan-speed-3
color: gray
tap_action:
action: navigate
navigation_path: media
double_tap_action:
action: call-service
service: script.tv
hold_action:
action: call-service
service: script.switch
theme: mushroom
name: high
styles:
card:
- color: gray
- background-color: RGB(45,45,45)
name:
- font-size: 0.8em
- white-space: normal
icon:
- width: 30px
- height: 40px
label:
- font-size: 0.7em
- white-space: normal
columns: 4
title-card:
type: custom:mushroom-light-card
entity: light.alaynabelle_lights
name: Alayna’s Lighting
icon: mdi:lamp
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: 0px !important;
--ha-card-box-shadow: none;
}
gap: 0em
padding: em
child-padding: 1em
title-card-padding: ''
title-card-button-overlay: true
overlay-margin: 1.1em
card_mod:
style: |
ha-card {
border: 0px !important;
--ha-card-box-shadow: none;
}
My take on a Fan Card.
There is a dark mode too 
So for the last 20 days I have been working for a tablet version of Home Assistant. It’s still a wip but have almost finished %80 of it My main goal is to use tablets as an informative device rather then controlling the house. But of course dashboard will also contain extensive controls. My main goal was to create an interface useful to inform people with animations. Here are some examples from my project.
I learnd much with both tutorials, but now I am on my limit
I’m sure, that I red, that it is possible to set the tap_action, but I can’t find it.
I try to seperate the card like:
tap_action:
Icon: toggle
card: more_info
It is a litte more Homekit like
Can you post your current card code?
sorry… here is the code:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
teal
{% else %}
grey
{% endif %}
primary: LED-Stripe
layout: horizontal
hold_action:
action: more_info
double_tap_action:
action: none
tap_action:
action: toggle
entity: light.kueche_lightstripe
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
toggle and more_info is working, but only on the complete card
more-info is correct not more_info That is your issue
not really. I would like to seperate the tap_action between card & Icon.
If i tap the icon turn the light on/off (toogle), but if I tap on the card show me more information like brightness and color-controll.
Oh, That’s a lot clearer. Let me see what I can do. We can just merge two cards into one with template cards. I’ll put together an example.
Try this out…
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 3fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
teal
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: -30px;
top: 10px;
}
So fast a working solution?! Very nice. Thanks.
A little problem is now, that i can’t have two cards next to each other:
First row is standard, second is your code.
Layout-card is a good option. I will try with this a litte
We can make it fit. I’ll adjust and post the code. I alsakso need to adjust for your colors
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
this works, but can I make it easier?
I use a horizontal-stack to make it a little more lookalike to my view. Now I have only to adjust the hight of this “stack” and maybe make the right tap part a little bigger.
looks nice
The adjustment of brackground color is only to make it “transparent” All other comes from ios-Theme i’m using
edit:
another simple thing I need for an other entity: How can I remove the Background / circle of the Icon?