Is there a way to change in the Cover Card what the full close button does? Iāve peculiar blinds, when full down (100%) they tilt and they close at about 80%. So at the moment I use full down (down arrow) for tilt and double click or long press (customized to 80%) to close but the opposite would by ideal. I canāt control the tilting stuff with the tilting option, those blind basically collapse when fully down and tilt, but at 80% they touch the bottom without pressure and stay not tilted.
Really loving mushroom cards and this community of people sharing ideaās.
This is my current dashboard and I use horizontal stacks with mushroom template cards to display the rooms, with temperature and light status. If you click on the room, it opens a more detailed room overview with all the lights.
Couple questions:
-
I find it all a bit too white and colorless. When lights are on the icon turns orange. But that is it. Any tips? Also would like to add amount of lights counter per room next to the temp if possible. Maybe also a fan icon for the bathrooms (on/off)
-
The room cards could potentialy made a bit smaller in my overview so I can possibly fit some more room cards on the main overview instead of scrolling down. Any tips on how to achieve this?
-
The mushroom lock card is great, but could potentialy made a bit smaller. Click on the icon is lock / unlock and show color red or green on status? What do you think? How to do this?
-
I would like to "steal " some of the ideas in this thread but often the copy and paste of code doesnāt work in the visual editor. Whatās the best practice here? Open the raw configuration editor on the main page (showing all code) and do editing/pasting from here? Iāve tried for example adding the style elements to the room cards, but getting errors.
-
Under my weather section I would like to create a turn off all lights button chip and show a amount of lights counter. Iāve tried adding another chip to the horizontal stack, but then itās too big and I donāt want to make the person cards larger. Would actually even prefer the person cards to be more minimalistic.
Code for horizontal stack of two room cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: SK Ouders
secondary: '{{ state_attr(''climate.hoofdslaapk'', ''current_temperature'') }}Ā°C'
icon: mdi:bed
entity: light.slaapkamerouderslampen
badge_color: ''
icon_color: |-
{% if is_state('light.slaapkamerouderslampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/slaapkamer-ouders
- type: custom:mushroom-template-card
primary: BK Ouders
secondary: >-
{{ states('sensor.signify_netherlands_b_v_sml003_temperature_3')
}}Ā°C
icon: mdi:shower
entity: light.badkamer1lampen
badge_color: ''
icon_color: |-
{% if is_state('light.badkamer1lampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/badkamer-ouders
The following code used to work, to separate the chip icon from its text, but it does not work anymore in recent versions. Would there be an alternative method? Thanks!
card_mod:
style:
.chip-container>*:
$: |
ha-icon {
margin-right: 20px;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
}
You are where I was a few weeks/months ago when I first came across Mushroom. After a lot of reading and reverse engineering what other people had done I now have most of my dashboards re-written using Mushroom cards and I am VERY happy with it.
The following is all my opinion based on not being a code expert so there are probably more efficient ways to do this.
The best way to sort colour scheme is create your own theme. I found adding a background image and making your card backgrounds translucent really effective.
Cutting and pasting code into dashboards can be tricky. I found the best way is to copy a card setup you want, add a manual card to your dashboard and then the copied code into it.
Here a few a few of my main dashboards.
Chips section
type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.away_mode
name: Home
content_info: name
icon_color: green
- type: weather
entity: weather.home
show_conditions: true
show_temperature: true
- type: template
entity: lock.front_door_lock
icon: >-
{{ 'mdi:lock' if is_state("lock.front_door_lock",'locked') else
'mdi:lock-open' }}
icon_color: '{{ ''green'' if is_state("lock.front_door_lock",''locked'') else ''red'' }}'
content: Front Door
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
- type: action
tap_action:
action: navigate
navigation_path: /lovelace-phone/trains
icon: mdi:train
alignment: center
Kitchen and Living Room section
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: '{{ states("sensor.kitchen_temperature") }}Ā°C'
icon: mdi:knife
entity: light.kitchen_light
tap_action:
action: navigate
navigation_path: /lovelace-rooms/kitchen
hold_action:
action: toggle
icon_color: |-
{% if is_state("light.kitchen_light",'on') %}
yellow
{% endif %}
badge_icon: >-
{{ 'mdi:motion-sensor' if is_state("binary_sensor.kitchen_occupancy",'on')
else 'none' }}
badge_color: >-
{{ 'blue' if is_state("binary_sensor.kitchen_occupancy",'on') else 'none'
}}
- type: custom:mushroom-template-card
primary: Living Room
secondary: '{{ states("sensor.lounge_temperature") }}Ā°C'
icon: mdi:sofa
entity: light.lounge_main
tap_action:
action: navigate
navigation_path: /lovelace-rooms/livingroom
hold_action:
action: toggle
icon_color: |-
{% if is_state("light.lounge_main",'on') %}
yellow
{% endif %}
badge_color: >-
{{ 'blue' if is_state("binary_sensor.living_room_occupancy",'on') else
'none' }}
badge_icon: >-
{{ 'mdi:motion-sensor' if
is_state("binary_sensor.living_room_occupancy",'on') else 'none' }}
9 Likes
Try with ha-state-icon instead
card_mod:
style:
.chip-container>*:
$: |
ha-state-icon {
margin-right: 20px;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
}
Thanks @siwilson. Will have a go with the themes.
Other question: Iāve also added a mushroom-media card but Iām missing buttons to trigger to play a spotify playlist. I was thinking ā horizontal stack and then one media-mushroom card and next to that a chip card with command/service to start media ā spotify playlist? I want to play music on my Sonos speaker per room and have some predefined buttons for playlist/albums. Only question is how to do this? Do I need another plugin for this? The official HA spotify integration doesnāt support sonos speakers.
Hi,
i just updated Home Assistant Core and System. Since the update all Mushroom Elements arent working anymore.
I get an Error āCustom element doesnt exist: mushroom-entity-cardā and so on. Everything that has to do with mushroom. How can i get this fixed?
Thanks in advance!
Sorry, I do have Sonos but done;t control it much form HA.
You could try the Sonos Card in HACS
Thank you!
is it possibile to change the icon color on state on/off ? i try some ways but nothing happend 
Something like this should work.
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
name: Thermostat
show_temperature_control: true
card_mod:
style: |
ha-card {
width: 478px;
}
mushroom-shape-icon {
{% if state_attr('climate.thermostat','hvac_action') == 'heating' %}
--icon-color: red !important;
--shape-color: red !important;
{% else %}
{% endif %}
}
- type: custom:mushroom-entity-card
entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
card_mod:
style: |
ha-card {
width: 150px;
position: absolute;
right: 5px;
transform: scalex(-1);
}
mushroom-state-info {
transform: scalex(-1);
text-align: right;
}
I prefer to use the state attribute of the thermostat since i dont always turn off my heating myself, so sometimes it will be idle rather than off.
Pick your colors yourself. Ive just used red as an example. But you can put hex values, rgb values, rgba values, or names. It doesnt really matter.
1 Like
Can somebody explain where I can change my theme? Iām looking to get different background than white or black.
The documentation says. . I must be overlooking it - but where do I find these profile settings? I copied the standard theme and renamed it to custom - hoping that I can change this etc. But how to enable?
> Just select your theme in your Home Assistant profile settings.
4 themes are available :
- Mushroom (default) : If you use this one, just simply uninstall Mushroom Themes as itās now part of Home Assistant default theme.
- Mushroom Square
- Mushroom Shadow
- Mushroom Square Shadow
I did find this section (changing dashboard home page), but there are no themes visible:
Sidebar > Your Username > Theme 
Your username is the last entry, and in your user menu it should be the seventh entry from the top, a small pull-down menu. 
Thanks - I saw that - but no themese listed there. Any ideaās?
I have this line added and themes folder contains a mushroom folder - with in there the mushroom themes
# Load frontend themes from the themes folder
frontend:
themes: !include_dir_merge_named themes
I have a ā/ā at the endā¦
# Load frontend themes from the themes folder
frontend:
themes: !include_dir_merge_named themes/
Anyway, you have put these two lines in configuration.yaml? And restarted HA (not only YAML-reload)?
Fixed it - I had 2x frontend for another card mod section:
frontend:
extra_module_url:
- /local/card-mod.js
I need help with the title card. How can I adjust the title card so that the chips appear right next to the title? Here is my code:
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Wohnen
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 0px 6px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.xiaomi_temperature_wohnzimmer
- type: entity
entity: sensor.xiaomi_humidity_wohnzimmer
- type: conditional
conditions:
- entity: binary_sensor.fp1_wohnzimmer_presence
state: 'on'
chip:
type: template
content: 'On'
icon: mdi:run
icon_color: red
card_mod:
style: |
ha-card {
--chip-background: rgb(88, 60, 68);
}
And this is how it looks like:
But I want it to look like this:
Edit:
Solved it myself by avoiding the title card altogether. Here is the modified code if anyone is interested:
- type: custom:mushroom-chips-card
chips:
- type: template
content: Wohnen
tap_action: none
card_mod:
style: |
ha-card {
padding: 0px !important;
border: none !important;
font-size: 4.7rem !important;
background: none !important;
}
- type: entity
entity: sensor.xiaomi_temperature_wohnzimmer
- type: entity
entity: sensor.xiaomi_humidity_wohnzimmer
- type: conditional
conditions:
- entity: binary_sensor.fp1_wohnzimmer_presence
state: 'on'
chip:
type: template
content: 'On'
icon: mdi:run
icon_color: red
card_mod:
style: |
ha-card {
--chip-background: rgb(88, 60, 68);
}
Hello together,
atm i try to build up my Server Card.
For this, i want to round the values with 1 decimal. For example CPU Temp with 15 should be show as 15.0
For this i tried the following statement:
{{ states('sensor.processor_use') | round(1, 'floor') }}
But when i use this as primary or secondary in the template mushroom card it does not work
In the Development Tools (template) - the result is as expectedā¦ so what i am doing wrong? ;(
Hi all
I need some help with the following:
- how can I shrink the space between chip cards?
Also when I have any 2 lights on in āLiving Roomā, the āLiving Roomā icon doesnāt light up, the circle just disappears:
1 light on:
2 lights on:
My code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: |-
{{ states('sensor.senzor_living_roomerature_lumi_158d00044ab88b') }}Ā°C |
{{ states('sensor.humidity_lumi_158d00044ab88b') }} %
icon: mdi:sofa
entity: light.candelabru_living
icon_color: |-
{% if is_state('light.candelabru_living', 'on') %} orange {% endif %}
{% if is_state('light.instalatie_wifi', 'on') %} orange {% endif %}
{% if is_state('light.veioza', 'on') %} orange {% endif %}
tap_action:
action: navigate
navigation_path: /mushroom-one/living
hold_action:
action: none
multiline_secondary: false
layout: horizontal
fill_container: false
double_tap_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
:host {
--mush-icon-size: 77px;
height: 66px;
margin-left: -17px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.instalatie_wifi
double_tap_action:
action: none
content_info: none
icon: mdi:string-lights
tap_action:
action: more-info
hold_action:
action: none
use_light_color: true
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: switch.plug_lumi_158d0001716f86_ch0_lumi_158d0001716f86
double_tap_action:
action: none
icon: mdi:television-classic
icon_color: primary
use_entity_picture: false
tap_action:
action: more-info
hold_action:
action: none
content_info: none
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: light
entity: light.veioza
double_tap_action:
action: none
icon: mdi:floor-lamp
use_light_color: true
content_info: none
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: climate.aer_conditionat
double_tap_action:
action: none
icon: mdi:air-conditioner
icon_color: primary
content_info: none
use_entity_picture: false
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
alignment: end
2 Likes
Anybody know how I can modify the room cards to have a toggle fan and all lights button? See screenshot. Maybe align at the bottom together with the temp?
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: '{{ state_attr(''climate.woonkamer'', ''current_temperature'') }}Ā°C'
icon: mdi:sofa-outline
entity: light.woonkamerlampen
badge_color: ''
icon_color: |-
{% if is_state('light.woonkamerlampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/woonkamer
- type: custom:mushroom-template-card
primary: Speelkamer
secondary: '{{ state_attr(''climate.speelkamer'', ''current_temperature'') }}'
icon: mdi:teddy-bear
entity: light.speelkamerlampen
badge_color: ''
icon_color: |-
{% if is_state('light.speelkamerlampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/speelkamer
2nd question: How can I make the mushroom-lock-card smaller? The icons will also need to be made smaller so I can still see the buttons.
type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.bosch_bijkeuken_deur
icon: mdi:door
secondary_info: none
name: Bijkeuken
fill_container: false
- type: custom:mushroom-lock-card
entity: lock.garage
name: Garage
icon: mdi:garage
Thatās a great looking dashboard. Thanks for sharing the code snippets. Do you by any chance publish your configuration on GitHub too?