Can anyone advise if itās possible to set padding on the mushroom title card using card mod ? - It doesnāt seem to have a ha-card element so isnāt working like the other cards, and I canāt figure out the right selector for it.
i put them on vertical stack but chips card are below person card. could u show how to put them together?
thanks a lot.
hej,
here the whole card, there is also a popup window included for detailed location
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.fabian
use_entity_picture: true
hide_name: true
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Fabian
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-entity-card
entity: sensor.places_fabian_locatie
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.life360_fabian_verschoor
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s21_fabian_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s21_fabian_battery_level
icon: |2
{% set bl = states('sensor.sm_s21_fabian_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s21_fabian_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
alignment: center
8 Likes
How do you make your fan icons spin?
Thanks, had my battery and charge status on my person card but this is more detailed with color change and icon change so stealing it for sure!
1 Like
āStoleā the code somewhere in this thread or the card-mod thread.
Hereās my full card that only shows if the fan is running. and icon color depending on wind mode. As itās part of a nested room card a my HA homescreen you maybe have to adjust the itendation.
- type: conditional
conditions:
- entity: fan.MYFAN
state: 'on'
chip:
type: template
double_tap_action:
action: none
icon: mdi:fan
icon_color: >-
{% if is_state_attr('fan.MYFAN', 'preset_mode', 'Normal')%}
blue
{% elif is_state_attr('fan.MYFAN', 'preset_mode',
'Nature')%}
green
{% else %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
entity: fan.MYFAN
content: null
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('fan.MYFAN') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
3 Likes
oh my god, since weeks I;m trying to get google calendar events other than the current on! this helps!
one question, can you point me how to adjust that subtitle and state_attr to get:
Tomorrowās events
and Tomorrowās event from More Than One calendar ?
Best regards!
While we wait for the official climate card, I decided to have a stab at knocking together something that has the same look and feel. Came up with this:
Itās a standard merge of the Mushroom template card, Simple Thermostat card, and optionally the Mushroom Chips card to show extra info (the card on the right).
Icon changes colour to indicate whether HVAC is active or not. Iāve also played around with changing the background colour of the whole card to more immediately indicate that the system is on.
I like how it maintains the Mushroom UX while also being quite compact. Someone with CSS skills could also fiddle the Simple Thermostat card to get the up/down controls properly aligned.
7 Likes
Mind sharing the yaml? Great looking card!
1 Like
Sureā¦
type: horizontal-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Downstairs
secondary: >
Currently: {{ state_attr('climate.downstairs', 'current_temperature')
}}Ā°F
icon: |-
{% set mode = states('climate.downstairs') %}
{% if mode == 'cool' %}
mdi:snowflake
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% set status = state_attr('climate.downstairs','hvac_action') %}
{% if status == 'cooling' %}
blue
{% elif status == 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1px;
}
entity: climate.downstairs
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control: false
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Upstairs
secondary: >
Currently: {{ state_attr('climate.upstairs', 'current_temperature')
}}Ā°F
icon: |-
{% set mode = states('climate.upstairs') %}
{% if mode == 'cool' %}
mdi:snowflake
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% set status = state_attr('climate.upstairs','hvac_action') %}
{% if status == 'cooling' %}
blue
{% elif status == 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1px;
}
entity: climate.upstairs
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control: false
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
entity: climate.upstairs
content: |
{{ state_attr(entity, 'current_humidity') }}%
icon: mdi:water-percent
icon_color: cyan
- type: entity
entity: sensor.ac_runtime_today_upstairs_cool
icon: mdi:timer-outline
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
4 Likes
Iām trying to animate the rotation of only the icon in a Mushroom Template Card, but I cannot seem to find the right element to targetā¦ha-card gets the entire template strip, ha-icon doesnāt work at all. What element should I be using to bind the animation to?
great cardā¦ could customize it for my own heating systemā¦
me too 
8 Likes
can you show your dashboard please :)? do you have something special for Media and Playlists ?
I;m also adding button for Spotify Playlists, but looking forward how others sees it
Can you share your code?
No problem
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Klimatyzacja Salon
secondary: >-
š”{{
state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_temperature')|float}}Ā°C
š§{{
state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_humidity')|float}}%
icon: |-
{% set mode = states('climate.salon') %}
{% if mode == 'heat' %}
mdi:fire
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat_cool' %}
mdi:sun-snowflaked-
{% elif mode == 'dry' %}
mdi:water-percent
{% elif mode == 'fan_only' %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
icon_color: |-
{% set status = states('climate.salon') %}
{% if status == 'cool' %}
#2b9af9
{% elif status == 'heat' %}
#f92b2b
{% elif status == 'dry' %}
#efbd07
{% elif status == 'heat_cool' %}
orange
{% elif status == 'fan_only' %}
#00d11c
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:simple-thermostat
entity: climate.salon
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control:
hvac:
'off':
name: WyÅÄ
cz
heat:
name: Grzanie
cool:
name: ChÅodzenie
heat_cool: false
dry:
name: Osuszanie
fan_only:
name: Wentylator
card_mod:
style: |
ha-card .mode-item {
background: #d1d1d1;
color: white;
--mdc-icon-size: 22px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
border-radius: 5px;
margin: 0px;
}
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-s: 10px;
padding-bottom: 0px !important;
}
ha-card .mode-item.active.heat {
background: #f92b2b;
color: white;
}
ha-card .mode-item.active.off {
background: pink;
color: ;
}
ha-card .mode-item.active.heat_cool {
--heat_cool-color: blue;
}
ha-card .mode-item.active.dry {
--dry-color: #efbd07;
}
ha-card .mode-item.active.fan_only {
--fan_only-color: #00d11c;
}
ha-card.heating .current--value,
ha-card.heating ha-icon.header__icon {
color: red;
}
- type: horizontal-stack
cards:
- type: button
tap_action:
action: toggle
entity: switch.salon_streamer
show_name: false
show_icon: true
show_state: false
icon_height: 25px
name: Streamer
- type: button
tap_action:
action: toggle
entity: input_boolean.wykres_temp1
show_name: false
show_icon: true
show_state: false
icon_height: 25px
- type: button
tap_action:
action: toggle
entity: input_boolean.wykres_wilg1
show_name: false
show_icon: true
show_state: false
icon_height: 25px
- type: button
tap_action:
action: toggle
entity: input_boolean.zuzy_energ1
show_name: false
show_icon: true
show_state: false
icon_height: 25px
- type: custom:stack-in-card
mode: vertical
cards:
- type: conditional
conditions:
- entity: input_boolean.wykres_temp1
state: 'on'
card:
type: statistics-graph
entities:
- sensor.hmip_wth_2_000a9be9a3e3ae_actual_temperature
title: Temperatura Salon
stat_types:
- mean
chart_type: line
days_to_show: 3
- type: conditional
conditions:
- entity: input_boolean.wykres_wilg1
state: 'on'
card:
type: statistics-graph
entities:
- sensor.hmip_wth_2_000a9be9a3e3ae_humidity
title: WilgotnoÅÄ Sypialni
stat_types:
- mean
chart_type: bar
days_to_show: 3
- type: conditional
conditions:
- entity: input_boolean.zuzy_energ1
state: 'on'
card:
type: entities
entities:
- entity: sensor.sypialnia_daily_cool_energy_consumption
name: Dzienne
- entity: sensor.sypialnia_daily_heat_energy_consumption
name: Dzienne
- entity: sensor.sypialnia_weekly_cool_energy_consumption
name: Tygodniowe
- entity: sensor.sypialnia_weekly_heat_energy_consumption
name: Tygodniowe
- entity: sensor.sypialnia_yearly_cool_energy_consumption
name: Roczne
- entity: sensor.sypialnia_yearly_heat_energy_consumption
name: Roczne
title: Zużycie energii
show_header_toggle: false
state_color: false
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ogrzewanie Salon
secondary: >-
š”{{
state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_temperature')|float}}Ā°C
š§{{
state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_humidity')|float}}%
icon: |-
{% set mode = states('climate.hmip_wth_2_000a9be9a3e3ae') %}
{% if mode == 'heat' %}
mdi:fire
{% elif mode == 'auto' %}
mdi:fire-circle
{% else %}
mdi:radiator
{% endif %}
icon_color: |-
{% set status = states('climate.hmip_wth_2_000a9be9a3e3ae') %}
{% if status == 'heat' %}
#f92b2b
{% elif status == 'auto' %}
#00d11c
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:simple-thermostat
entity: climate.hmip_wth_2_000a9be9a3e3ae
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control:
hvac:
'off':
name: WyÅÄ
cz
heat:
name: Grzanie
auto:
name: Harmonogram
icon: mdi:clock-plus-outline
preset:
boost:
name: Szybkie Nagrzanie
icon: mdi:fire-circle
card_mod:
style: |
ha-card .mode-item {
background: #d1d1d1;
color: white;
--mdc-icon-size: 22px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
border-radius: 5px;
margin: 0px;
}
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-s: 10px;
padding-bottom: 0px !important;
}
ha-card .mode-item.active.heat {
background: #f92b2b;
color: white;
}
ha-card .mode-item.active.off {
background: pink;
color: ;
}
ha-card .mode-item.active.auto {
--auto--color: 00d11c;
}
ha-card.heating .current--value,
ha-card.heating ha-icon.header__icon {
color: red;
}
11 Likes
Sure! I havenāt integrated music yet, and Iām still just building for mobile since thatās my primary use (though I do have a tablet I need to build something for eventually). My example for the media player was just a quick thrown-together idea on how you could possibly build something. Music/entertainment is on my development list eventually though.
A few details about mine.
- temp on top right is a link to thermostat pop-up since there isnāt a Mushroom thermostat card just yet
- weather top center is nav to weather page
- drive to work/home in person card displays based on location (if at work shows drive time home, else shows drive to work)
- rooms link to individual room pages, and show occupancy on the main page
- conditional card displays weather alerts via NWS integration on the main page, with a link to weather page.
The blue cards are just for color, still playing with those. Not sure why they show a card line when I emulate them in Chrome, but that isnāt there in the mobile view on my phone.
9 Likes
Great idea using the stack-in-card for the welcome scenes, thanks. I was using it on other parts but for some reason did not think of using here. Now I just need to make better room cards and my transition from minimalist lovelace to mushroom is complete.
Itās really a quality of life improvement not having to deal with all the yaml all the time. simple changes are simple once again! I can even make simple tweaks on my mobile.
1 Like
Hi Fabian, I like your radio card at the bottom, could you share your code please?
no mushroom card but a simple one:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.huiskamer
style: |
ha-card { box-shadow: none;
ha-markdown { padding-bottom: !important; }
volume_stateless: true
info: scroll
source: icon
group: false
toggle_power: true
hide:
power: true
shortcuts:
columns: 3
column_height: 10
hide_when_off: true
label: Select Input
align_text: center
buttons:
- type: source
id: Radio 538
icon: mdi:radio
name: 538
- type: source
id: Radio Veronica
icon: mdi:radio
name: Veronica
1 Like