Hi,
does anyone has an idea, how to setup an input card for times? I need it to change start- and endtime for the automatic illumination. Is there anywhere an example?
Hello,
I would like to color an icon by state.
In three different states
but somehow nothing happens here. Maybe someone has a hint for me.
type: custom:mushroom-entity-card
entity: sensor.pollen_graeser_81
name: grasses
icon_color: |-
{% set state = states('sensor.pollen_graeser_81')%}
{% if state >= 3 %}
red
{% elif state >= 1.5 %}
orange
{% else %}
green
{% endif %}
Hi,
off course, the code :
square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Rooms
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: null
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: custom:swipe-card
slideToClickedSlide: false
parameters:
roundLengths: false
effect: slide
speed: 35
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
autoHeight: true
allowSlidePrev: true
preventClicks: true
spaceBetween: 8
scrollbar: null
hide: false
snapOnRelease: false
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto
picture: /local/bed.png
layout: vertical
icon_color: yellow
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/temp.png
icon_color: yellow
content: '{{ states(''your entity here for temp'')}}°C'
- type: template
picture: /local/humidity.png
icon_color: blue
content: '{{ states('''your entity here for humidity'')}}%'
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 35px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: your entity here for light
picture: /local/groupbulb.png
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state('your entity here for light', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: template
entity: your entity here for switch
picture: /local/socket.png
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state('your entity here for switch', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
margin: 0px 0px 0px 0px;
position: absolute;
right: 4px;
top: calc(25% - 0px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lights
picture: /local/groupbulb.png
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/ceiling-lamp.png
icon_color: yellow
content: 'Luz Teto: {{ states(''your entity here for light'')}}'
tap_action:
action: toggle
- type: template
picture: /local/table-lamp.png
icon_color: yellow
content: 'Candeeiro: {{ states(''your entity here for light'')}}'
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 30px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sockets
picture: /local/socket.png
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/socket.png
icon_color: yellow
content: 'Tomada: {{ states(''your entity here for switch'')}}'
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 20px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Multimedia
picture: /local/tv.png
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/clock.png
icon_color: yellow
content: >-
Coluna Quarto: {{
states('your entity here for media')}}
- type: template
picture: /local/box.png
icon_color: yellow
content: >-
Coluna Quarto: {{
states('your entity here for media')}}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 20px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
In that code you have one principal card with the chips for temp, humidity, group lights, group sockets and can be added the camera, and 3 additional swipe cards for lights, sockets and multimedia.
If you want more just keep adding the same code as many times you want.
Probably the code have some errors and for sure a bunch of lines doing nothing but it´s meant to be because i want to have the possibility to add that feature without to write the whole line just changing the end to enable.
1 Like
I found the answer in HA docs. You have to choose an action first, then call a service…
If anyone interested, here’s the code to call an action when clicking on the title:
type: custom:mushroom-title-card
title: Etage
title_tap_action:
action: call-service
service: light.toggle
data:
entity_id: light.etage
thank you for your help
i have this error
i have this error
Configuration errors detected:
bad indentation of a mapping entry (68:44)
65 | ... - type: template
66 | ... picture: /local/humidity.png
67 | ... icon_color: blue
68 | ... content: '{{ states('''your entity here for humidity'' ...
-----------------------------------------^
69 | ... alignment: center
70 | ... card_mod:
Where it says “your entity here for humidity” you have to replace that for your device entity.
oh i understand thank you
1 Like
I had exact same question earlier. You have to use a template card in order to use template code even for the icon color
And if you try it like this:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: |
{{ states('sensor.kitchen_sink_leak_sensor_temperature')|float|round(0) + 3 }}
{{ state_attr('sensor.kitchen_sink_leak_sensor_temperature', "unit_of_measurement") }}
icon: mdi:silverware-fork-knife
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.decent_espresso
icon: mdi:coffee-maker
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.decent_espresso
icon: mdi:coffee-maker
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
alignment: left
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-background:
{% if states('switch.decent_espresso') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
Can I make certain parts of the text bold?
I don’t want all the text in bold, just the numbers
type: custom:mushroom-template-card
primary: Hej, {{user}}
secondary: >-
Senaste aktiviteten i hemmet var {{ states.sensor.senaste_aktivitet.state }}.
Det är {{ states.sensor.inomhus_temperature.state }}° inomhus, och {{
states.sensor.utomhus_3_temp_degc.state }}° utomhus.
icon: mdi:home
icon_color: '#2196f2'
multiline_secondary: true
fill_container: false
What if you try like this:
type: custom:mushroom-template-card
entity: sensor.pollen_graeser_81
primary: grasses
icon: mdi:grass
icon_color: |
{% set state = states('sensor.pollen_graeser_81') %}
{% if state >= 3 %}
red
{% elif state >= 1.5 %}
orange
{% else %}
green
{% endif %}
Very good to everyone. Somebody can help me? I am not able to change the color of the Icon, neither the emtity nor the state. It’s possible?. Thanks in advance. I leave the code here:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.partition_area_1
states:
- armed_away
name: BWHOUSE
icon: mdi:shield-home
styles:
icon:
- color: |
[[[
if (entity.state == 'Armada ausente') return 'yellow';
return 'red'
]]]
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 70%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.45); }
60% { transform: scale(1); }
}
.: |
ha-card {
box-shadow: none;
background: none;
background-color: rgba(0,0,0,0);
border: 0px;
}
layout: horizontal
show_keypad: false
secondary_info: state
that worked! Thanks. So the key was eliminating the use of a dedicate template card for the room icon:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:silverware-fork-knife
icon_color: blue
and just combining that with the actual template card showing the room name and sensor info. Thank you!
I’ve seen the use of this pattern in the card_mod to color chips based on the state of the entity in the chip using the --chip-background in css:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room_lamp
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
margin: 12px 24px 0px 0px;
--chip-background:
{% if states('light.living_room_lamp') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 32px;
}
However, what if there are multiple chips in the card. How would you style each chip independently?
Update: Answered my own question here
Just answered my own question with some mucking. Posting here in case it helps someone:
When a light is off:
When it’s on: (notice the icon and the background changes)
This is the YAML. Notice the card_mod CSS styling is in each chip:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: >
{{ states('sensor.house_main_temperature')|float|round(0) }} {{ state_attr('sensor.house_main_temperature', 'unit_of_measurement') }}
icon: mdi:sofa
icon_color: red
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room_lamp
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.living_room_lamp') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
- type: template
entity: media_player.living_room_tv
icon: mdi:television
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states(media_player.living_room_tv') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: start
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
This card was based on someone else’s work that I wish I could give credit to… I cannot find the previous post.
6 Likes
Thanks for sharing this.
Just starting off with Mushroom Card so please excuse my dumbness.
Works good, but … when I tap on ‘Living Room’ I get this error.
I’m assuming I need to add a Tap Action somewhere to display more-info of the temperature.
Playing with it but just can’t get it right.
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: >
{{ states('sensor.living_room_temperature')|float|round(0) }} {{
state_attr('sensor.living_room_temperature', 'unit_of_measurement')
}}
icon: mdi:sofa
icon_color: red
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.living_room') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
- type: template
entity: media_player.living_room_tv
icon: mdi:television
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states(media_player.living_room_tv') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: left
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
Thanks again for sharing 
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.living_room_temperature
primary: Living Room
secondary: >
{{ states('sensor.living_room_temperature')|float|round(0) }} {{
state_attr('sensor.living_room_temperature', 'unit_of_measurement')
}}
icon: mdi:sofa
icon_color: red
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.living_room
icon: mdi:ceiling-light
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.living_room') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
- type: template
entity: media_player.living_room_tv
icon: mdi:television
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background:
{% if states(media_player.living_room_tv') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: left
card_mod:
style: |
ha-card {
margin: 10px 24px 10px 10px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
}
It’s now working with the above code 
Thanks again for sharing, did I tell you how much I love YAML 
1 Like
I have a question, and yes I am new to this. What I am trying to do is change the color of the icon as the ping value changes (not even sure Ping integration supports this). Instead of just on or off (green/red) I would like to see if it would be possible to go yellow if a device is responding but with dropped packets or a degraded response.
Currently I only know how to change based upon Up-Down values, here is a code sample. Could someone be so kind to point me in the right direction if it even supported?
type: custom:mushroom-template-card
entity: binary_sensor.test_laptop
icon: mdi:check-network-outline
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''red'' }}'
primary: Test Laptop
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: ping 1.5s infinite,blink 1.5s ease-in-out infinite; ;' if is_state(config.entity, 'off') }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
No expert on this but … I’m assuming if you have this Ping value/state reporting within HA then it would be possible to do something based on that value/state.
The network gurus here may be able to better answer your question.