Has anyone found a way to put Mushroom cards in a markdown card?
I want a big âcontainerâ with background color and rounded corners and then Mushroom cards in it.
Edit:
This is what I would like to have but with Mushroom cards / icons instead.
5 Likes
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Giardino
- type: custom:mushroom-template-card
icon: disabled
entity: light.cancello
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/giardino.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.cancello', 'on') %}
0.2
{% elif is_state('light.cancello', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: light.cancello
tap_action:
action: none
hold_action:
action: none
content: >-
{{ 'Irrigazione in corso..' if is_state(entity, 'on') else
'Spento' }}
- type: conditional
conditions:
- entity: light.cancello
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: light.cancello
icon: mdi:fan
icon_color: cyan
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
Hi, can anyone tell me how to integrate everything with stack in card? And above all why doesnât the animation work? 
I know @rhysb can you help me 
vertical-stack doesn´t work with card-mod. you could use stack-in-card or put all of your code in a mod-card
I tried with stack-in-card but then the photo no longer appears. I canât get out of it
what do you mean with photo? the preview in the editor?
anyways, i was wrong. guess i was quite tired when i replied 
you are modding the template-card and the chip, so no need of the stack-in-card.
hey @mase i managed to solve that problem.
But now I have another one:
SPRINKLER ON(EDITOR MODE):
SPRINKLER OFF(EDITOR MODE):
WHEN I EXIT EDITOR MODE:
type: horizontal-stack
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: disabled
entity: light.cancello
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/giardino.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.cancello', 'on') %}
0.2
{% elif is_state('light.cancello', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: light.cancello
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: light.cancello
tap_action:
action: toggle
hold_action:
action: none
content: >-
{{ 'Irrig. in corso..' if is_state(entity, 'on') else
'' }}
- type: template
icon: mdi:sprinkler
icon_color: cyan
entity: light.cancello
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{% if is_state('light.cancello', 'on') %}
animation: clip 1s linear infinite;
{% endif %}
}
@keyframes clip {
0% { clip-path: inset(0 0 0 0); }
52% { clip-path: inset(0% 50% 0 0)}
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: disabled
entity: light.cancello
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/terrazzo1.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.cancello', 'on') %}
0.2
{% elif is_state('light.cancello', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: light.cancello
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: light.cancello
tap_action:
action: toggle
hold_action:
action: none
content: >-
{{ 'Irrig. in corso..' if is_state(entity, 'on') else
'' }}
- type: template
icon: mdi:sprinkler
icon_color: cyan
entity: light.cancello
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{% if is_state('light.cancello', 'on') %}
animation: clip 1s linear infinite;
{% endif %}
}
@keyframes clip {
0% { clip-path: inset(0 0 0 0); }
52% { clip-path: inset(0% 50% 0 0)}
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: disabled
entity: light.cancello
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/balcone.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.cancello', 'on') %}
0.2
{% elif is_state('light.cancello', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: light.cancello
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: light.cancello
tap_action:
action: toggle
hold_action:
action: none
content: >-
{{ 'Irrig. in corso..' if is_state(entity, 'on') else
'' }}
- type: template
icon: mdi:sprinkler
icon_color: cyan
entity: light.cancello
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{% if is_state('light.cancello', 'on') %}
animation: clip 1s linear infinite;
{% endif %}
}
@keyframes clip {
0% { clip-path: inset(0 0 0 0); }
52% { clip-path: inset(0% 50% 0 0)}
100% { clip-path: inset(0 0 0 0); }
}
I would like to show a plug with Mushroom, which shows me the status âonâ or âoffâ including the âactive powerâ in W. I do not know how I can show the âactive powerâ behind the word âonâ.
My code looks like this:
- type: custom:mushroom-template-card
entity: switch.network_switch
tap_action:
confirmation:
text: Das Netwerk darf nicht ausgeschaltet werden. Deshalb passiert hier nichts!
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
secondary: |-
{% if is_state('switch.network_switch', 'on') %}
An
{% else %}
Aus
{% endif %}
icon: |-
{% if is_state('switch.network_switch', 'on') %}
mdi:network
{% else %}
mdi:network
{% endif %}
icon_color: |-
{% if is_state('switch.network_switch', 'on') %}
blue
{% else %}
disabled
{% endif %}
primary: Network
The entity for âactive powerâ is:
sensor.network_active_power
What Iâm missing is shown here in red:
{{states(sensor.network_active_power)}}
1 Like
Hi team,
I need your help with an issue I canât get solved 
I have a combined card for each room showing various values & states. Unfortunately, I canât get the tap action working
That is the code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: >-
{{ states('sensor.wek_temperatur') | replace (".",",")}} °C ⢠{{
states('sensor.wek_lumi_weather_humidity') }} %
icon: mdi:bed-double
entity: light.wek_couch_licht
tap_action:
action: navigate
navigation_path: wek
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
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: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.wek_couch_licht
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.wek_couch_prasenz
state: 'on'
tap_action:
action: more-info
chip:
type: template
icon_color: red
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: climate.bedroom_air_conditioner
state_not: 'off'
chip:
type: template
icon_color: disabled
entity: climate.wek_heizung
icon: |-
{% if is_state(entity, 'heat_cool') %}
mdi:sync
{% elif is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
{% if is_state('climate.bedroom_air_conditioner', 'fan_only') %}
animation: rotation 2s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: switch.steckdose_wohnzimmer_stehlampe
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:door-open
- type: conditional
conditions:
- entity: switch.steckdose_wohnzimmer_stehlampe
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Thanks a lot for your help
Thank you so much
- type: custom:mushroom-template-card
entity: switch.network_switch
tap_action:
confirmation:
text: Das Netwerk darf nicht ausgeschaltet werden. Deshalb passiert hier nichts!
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
primary: Network
secondary: |-
{% if is_state('switch.network_switch', 'on') %}
An ⢠{{states('sensor.network_active_power')}}W
{% else %}
Aus
{% endif %}
icon: mdi:network
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
You are trying to use a Mushroom Card animation with a Mushroom Chip. The correct animation would be:
card_mod:
style: |
.content {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
You have tap_action as navigate to page wek. Do you have a page wek?
1 Like
This is working, the problem is with the âtap_action => more-infoâ
- type: conditional
conditions:
- entity: binary_sensor.wek_couch_prasenz
state: 'on'
tap_action:
action: more-info
You canât have a tap action on a condition. You will need to add the tap_action to the card of the conditional.
1 Like
Thanks for the reply. The problem is not the animation, but the fact that when I leave the editor mode you can no longer see the images in the background.
Still need to find a way to showcase it all better maybe Iâll make a video.
This is with media playing.
These are a tad bit older, without media playing
4 Likes
how do u added the badge to the chip?
I donât think they are chip cards. Just a mushroom template card without background and text info.
I have one more question:
- type: custom:mushroom-cover-card
show_buttons_control: true
show_position_control: true
primary_info: state
secondary_info: last-changed
entity: cover.detlef_rollladen
I would like to insert my own text in the âprimary_infoâ line before the âstateâ. How can I realize this?