I tried almost all options to get mushroom installed.
My setup: Synology NAS with docker. Manual install of mushroom
I tried the GUI method, the Yaml and googled for solutionsā¦
The custom cards do not show up.
I created config/www
hope that someone can help me to get this working. Thanks!!!
Very impressive. Could you please share your room cards?
Great idea
type: custom:mushroom-template-card
primary: Top Left
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: teal
secondary: Mushroom
card_mod:
style: |
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
Very nice work! I really like the flexible room card, would share with us how you did it?
Great, thanks for the example code. I added the ability to blink only when, for example, the motion sensor was triggered.
type: custom:mushroom-template-card
primary: Top Left
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: teal
secondary: Mushroom
card_mod:
style: |
{% if is_state('binary_sensor.ad_movement', 'on') %}
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
Maybe i something missed, but how i can change the font size(v 2.2.0)?
Hereās a general version of my room card, in the swipe card I included a media card as well as a stack card which can include lights, locks or other entities. As each room is different I tried to include one of each of the different cards or chips I use.
type: custom:vertical-stack-in-card
cards:
- type: custom:swipe-card
parameters:
spaceBetween: 8
cards:
- type: custom:mushroom-template-card
primary: Family Room
secondary: '{{ states(''sensor.family_room_temperature'') }} Ā°F'
icon: mdi:coffee
layout: horizontal
entity: light.family_room
tap_action:
action: navigate
navigation_path: family_room
hold_action:
action: none
double_tap_action:
action: toggle
picture: >-
{% if is_state('media_player.family_room','playing') %}
{{ states.media_player.family_room.attributes.entity_picture }}
{% else %} {% endif %}
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
{% if is_state('media_player.family_room','playing') %}
animation: rotation 4s linear infinite;
{% else %} {% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
mushroom-shape-icon$: |
.shape {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if is_state(config.entity, 'on') %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
}
.: |
ha-card {
border-radius: 16px 16px 0px 0px;
}
- type: custom:mushroom-media-player-card
entity: media_player.family_room
use_media_artwork: true
use_media_info: true
collapsible_controls: true
show_volume_level: false
fill_container: false
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.family_room
card_mod:
style: |
ha-card {
border-radius: 16px 16px 0px 0px;
{% if is_state(config.entity, 'playing') or is_state(config.entity, 'paused') %}
background: rgba(var(--rgb-card-background-color), 0.9) url( '{{ state_attr(config.entity, "entity_picture" ) }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% else %}
{% endif %}
}
- type: conditional
conditions:
- entity: sensor.ps5_activity
state: playing
card:
type: custom:button-card
styles:
card:
- width: 242px
- height: 66px
card_mod:
style: |
ha-card {
border-radius: 18px 18px 0px 0px;
background-image: url( '{{ state_attr( "sensor.ps5_activity", "title_image" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-blend-mode: overlay;
background-color: rgba(25,25,25,0.3);
}
- type: custom:stack-in-card
mode: horizontal
keep:
background: true
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: |-
{% if is_state(config.entity, "locked") %}
mdi:lock
{% else %}
mdi:lock-open
{% endif%}
entity: lock.kitchen_door
icon_color: |-
{% if is_state(config.entity, "locked") %}
green
{% else %}
red
{% endif%}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'locked') %}
background: rgba(var(--rgb-light-green),0.2);
{% else %}
background: rgba(var(--rgb-light-red),0.2);
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.patio_strip_lights
layout: vertical
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(var(--rgb-light-amber),0.1);
{% else %}
background: transparent;
{% endif %}
}
card_mod:
style: |
ha-card {
border-radius: 16px 16px 0px 0px;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: conditional
conditions:
- entity: light.the_flamingo
state: 'on'
chip:
type: template
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
pink
{%else%}
grey
{%endif%}
entity: light.the_flamingo
icon: mdi:bird
tap_action:
action: toggle
- type: conditional
conditions:
- entity: light.local_lamp
state: 'on'
chip:
type: light
entity: light.local_lamp
content_info: none
use_light_color: true
icon: mdi:lamp
- type: conditional
conditions:
- entity: lock.kitchen_door
state: unlocked
chip:
type: template
icon_color: red
icon: mdi:lock-open
tap_action:
action: call-service
service: lock.lock
data: {}
target:
entity_id: lock.kitchen_door
- type: conditional
conditions:
- entity: binary_sensor.kitchen_door_alarm_sensor
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:door-open
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.family_room', 'on') %}
background: rgba({{ state_attr('light.family_room','rgb_color') [0] }},
{{ state_attr('light.family_room','rgb_color') [1] }},
{{ state_attr('light.family_room','rgb_color') [2] }},0.1);
{% endif %}
}
I also wanted to include some of the other cards I use on my dashboards
Full Color Light Card
type: custom:mushroom-light-card
name: Lamp
entity: light.local_lamp
icon: mdi:lamp
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if is_state(config.entity, 'on') %}
background: rgba({{r}}, {{g}}, {{b}},0.1);
--primary-text-color: rgb({{r}}, {{g}}, {{b}});
--secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
{% endif %}
}
Dynamic Color Temp Card
type: custom:mushroom-template-card
primary: Kitchen
secondary: '{{ states(entity) }}Ā°F'
entity: sensor.kitchen_temperature
icon: mdi:thermometer
layout: horizontal
tap_action:
action: more-info
icon_color: |
{% set battery_level = states(entity) %}
{% if battery_level < '63' %}
blue
{% elif battery_level < '65' %}
teal
{% elif battery_level < '67' %}
green
{% elif battery_level < '69' %}
light-green
{% elif battery_level < '71' %}
lime
{% elif battery_level < '72' %}
yellow
{% elif battery_level < '74' %}
amber
{% elif battery_level < '78' %}
orange
{% elif battery_level < '82' %}
deep-orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% set battery_level = states(config.entity) %}
{% if battery_level < '63' %}
--primary-text-color: rgb(var(--rgb-blue));
--secondary-text-color: rgba(var(--rgb-blue),0.5);
background: rgba(var(--rgb-blue),0.1);
{% elif battery_level < '65' %}
--primary-text-color: rgb(var(--rgb-teal));
--secondary-text-color: rgba(var(--rgb-teal),0.5);
background: rgba(var(--rgb-teal),0.1);
{% elif battery_level < '67' %}
--primary-text-color: rgb(var(--rgb-green));
--secondary-text-color: rgba(var(--rgb-green),0.5);
background: rgba(var(--rgb-green),0.1);
{% elif battery_level < '71' %}
--primary-text-color: rgb(var(--rgb-lime));
--secondary-text-color: rgba(var(--rgb-lime),0.5);
background: rgba(var(--rgb-lime),0.1);
{% elif battery_level < '72' %}
--primary-text-color: rgb(var(--rgb-yellow));
--secondary-text-color: rgba(var(--rgb-yellow),0.5);
background: rgba(var(--rgb-yellow),0.1);
{% elif battery_level < '74' %}
--primary-text-color: rgb(var(--rgb-amber));
--secondary-text-color: rgba(var(--rgb-amber),0.5);
background: rgba(var(--rgb-amber),0.1);
{% elif battery_level < '78' %}
--primary-text-color: rgb(var(--rgb-orange));
--secondary-text-color: rgba(var(--rgb-orange),0.5);
background: rgba(var(--rgb-orange),0.1);
{% elif battery_level < '82' %}
--primary-text-color: rgb(var(--rgb-deep-orange));
--secondary-text-color: rgba(var(--rgb-deep-orange),0.5);
background: rgba(var(--rgb-deep-orange),0.1);
{% else %}
--primary-text-color: rgb(var(--rgb-red));
--secondary-text-color: rgba(var(--rgb-red),0.5);
background: rgba(var(--rgb-red),0.1);
{% endif %}
}
temp_card:
card:
type: custom:mushroom-template-card
primary: '[[name]]'
entity: '[[entity]]'
secondary: '{{ states(entity) }}Ā°F'
icon: mdi:thermometer
layout: horizontal
tap_action:
action: more-info
icon_color: |
{% set battery_level = states(entity) %}
{% if battery_level < '63' %}
blue
{% elif battery_level < '65' %}
teal
{% elif battery_level < '67' %}
green
{% elif battery_level < '69' %}
light-green
{% elif battery_level < '71' %}
lime
{% elif battery_level < '72' %}
yellow
{% elif battery_level < '74' %}
amber
{% elif battery_level < '78' %}
orange
{% elif battery_level < '84' %}
deep-orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% set battery_level = states(config.entity) %}
{% if battery_level < '63' %}
--primary-text-color: rgb(var(--rgb-blue));
--secondary-text-color: rgba(var(--rgb-blue),0.5);
background: rgba(var(--rgb-blue),0.1);
{% elif battery_level < '65' %}
--primary-text-color: rgb(var(--rgb-teal));
--secondary-text-color: rgba(var(--rgb-teal),0.5);
background: rgba(var(--rgb-teal),0.1);
{% elif battery_level < '67' %}
--primary-text-color: rgb(var(--rgb-green));
--secondary-text-color: rgba(var(--rgb-green),0.5);
background: rgba(var(--rgb-green),0.1);
{% elif battery_level < '69' %}
--primary-text-color: rgb(var(--rgb-light-green));
--secondary-text-color: rgba(var(--rgb-light-green),0.5);
background: rgba(var(--rgb-light-green),0.1);
{% elif battery_level < '71' %}
--primary-text-color: rgb(var(--rgb-lime));
--secondary-text-color: rgba(var(--rgb-lime),0.5);
background: rgba(var(--rgb-lime),0.1);
{% elif battery_level < '72' %}
--primary-text-color: rgb(var(--rgb-yellow));
--secondary-text-color: rgba(var(--rgb-yellow),0.5);
background: rgba(var(--rgb-yellow),0.1);
{% elif battery_level < '74' %}
--primary-text-color: rgb(var(--rgb-amber));
--secondary-text-color: rgba(var(--rgb-amber),0.5);
background: rgba(var(--rgb-amber),0.1);
{% elif battery_level < '78' %}
--primary-text-color: rgb(var(--rgb-orange));
--secondary-text-color: rgba(var(--rgb-orange),0.5);
background: rgba(var(--rgb-orange),0.1);
{% elif battery_level < '84' %}
--primary-text-color: rgb(var(--rgb-deep-orange));
--secondary-text-color: rgba(var(--rgb-deep-orange),0.5);
background: rgba(var(--rgb-deep-orange),0.1);
{% else %}
--primary-text-color: rgb(var(--rgb-red));
--secondary-text-color: rgba(var(--rgb-red),0.5);
background: rgba(var(--rgb-red),0.1);
{% endif %}
}
Minimalist Style Graph Card
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.processor_use_percent
primary_info: state
secondary_info: name
name: CPU Usage
icon_color: disabled
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use_percent
name: CPU Usage
color: '#2196f3'
y_axis: secondary
hours_to_show: 6
points_per_hour: 20
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
margin-top: -15px;
}
Big thanks. 
Solved it after 3 days of searching:
My assumption was: the www folder is in the config folder. I read that everywhere. So i made a āconfigā folder and in that folder a āwwwā folder. Once you are in that idea, it is hard to find that this is wrong.
I started to find my error once I was working with the ui_lovelace.yaml file that should go in the config folder. That didnāt work, but i saw a folder listing where it was in the root folder.
Now it is logical that the āconfigā folder is not a seperate folder, but is just the root of the folder where all settings are in the docker installation on my Synology NAS: docker/homeassistant. Once I put the www folder in the root of that folder, āall the little gizmos inside turned onā.
Hope this helps others that are stuck
hey guys,
could anyone point me why my cards moving? They should not even collide with each other.
The row with environmental values should be as shown below.
Why is that so?
Here is my Yaml code:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Bedroom
secondary: >-
{{ states('sensor.bme680_temperature') | round (0)}}Ā°C | {{
states('sensor.bme680_humidity') | round (0)}}%| {{
states('sensor.bedroom_motion_illuminance_lux') | round (0)}}lx
icon: mdi:bed-king-outline
entity: light.bedroom_ceiling
icon_color: |-
{% if is_state('light.bedroom_ceiling', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/bedroom
hold_action:
action: fire-dom-event
haptic: light
browser_mod:
command: popup
title: Bedroom lights
deviceID: this
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.bedroom_ceiling
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
primary_info: none
icon_type: mdi:brightness-6
secondary_info: none
- type: custom:mushroom-light-card
entity: light.bedroom_ceiling
use_light_color: true
show_brightness_control: false
show_color_temp_control: true
primary_info: none
icon_type: mdi:sun-thermometer-outline
secondary_info: none
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
z-index: 1;
}
ha-card {
--card-primary-font-size: 30px;
--card-primary-font-weight: normal;
--card-secondary-font-size: 12px;
--card-secondary-font-weight: bold;
--icon-symbol-size: 0.7em;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.aqara_window_contact
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.bedroom_motion_occupancy
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:motion-sensor
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -70px;
right: 20px;
z-index: 0;
--chip-height: 53px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 40px;
margin-top: px;
}
chips:
- type: entity
icon_color: yellow
entity: sensor.bedroom_pm_2_5um_weight_concentration
alignment: center
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 40px;
margin-top: px;
}
chips:
- type: entity
icon_color: green
entity: sensor.mh_z19_co2_value
alignment: center
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 40px;
margin-top: px;
}
chips:
- type: entity
icon_color: red
entity: sensor.bme680_iaq
alignment: center
card_mod:
style: |
ha-card {
margin-top: -15px;
}
card_mod:
style: |
ha-card {
height: 120px;
}
Do you have adaptive brightness integration that forces adaptation maybe?
Hello all
I am trying to adjust the icon-size to be like the top one but I need some help.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: blue
primary: TvƤttstuga
secondary: |
{{ states("sensor.tvattmaskin_power") }} watt |
{{ states("sensor.tvattmaskin_daily_energy") }} kwh
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@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); }
}
@keyframes drum {
50% { 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); }
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('switch.relay_switch_1x3kw', 'on') %}
background: rgba(103, 128, 159, 0.2);
{% endif %}
}
Hi there! I am trying to get this entity icon to spin, but only if a condition is met. I have something off with my syntax, but cannot figure out what I am missing, can anyone see what I may have messed up? Thanks!
- type: custom:mushroom-entity-card
entity: switch.living_room_heater
fill_container: false
icon: mdi:fan
primary_info: none
tap_action:
action: toggle
double_tap_action:
action: more-info
secondary_info: none
card_mod:
style: |
{% if is_state('switch.living_room_heater', 'on') %}
mushroom-shape-icon$:
ha-icon {
--icon-animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
try like this
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_stateshould be something like this:
- type: custom:mushroom-entity-card
entity: switch.living_room_heater
fill_container: false
icon: mdi:fan
primary_info: none
tap_action:
action: toggle
double_tap_action:
action: more-info
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state(config.entity, 'on') %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Worked perfectly, thank you so much Fabian_V & schmierlappe
Any chance you could share the yaml for your battery sensors at the bottom of the second image?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Door Sensor Battery
secondary: '{{''{0:,.0f}''.format(states(entity)|int)}} %'
icon: >
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
%}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
entity: sensor.front_door_sensor_battery_level
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 66px;
margin-left: -20px !important;
}
ha-card {
box-shadow: none;
--card-primary-font-size: 12px;
--card-secondary-font-size: 20px;
}
Thanks a ton for these! Given me some great inspiration for some changes to my dashboard. Would love to see your full dashboard when you get a chance!
Does anyone know how to remove the shadow of the stack in card not the auto-entities, but the stack in card? I want to keep the shadow around the auto-entities but not the stack-in-card.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}Ā°F'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
* {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}%'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
* {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []