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
very nice stuff!
I also Think Iām finally done - what I need is still to finish the Media Player card
First welcome message has a Calendar Holiday at the end - Active only when there is a holiday
Second is calendar:
TOdayās event
Next Event in the calendar
then simple buttons smart plugs and consumption, media, ha updates, system monitoring and vacuum
and room cards at the bottom
7 Likes
Can we ajdust font size of the chips ? And also I wonder if we can make chips looks a little big bigger ?
yes, check here
piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 
(github.com)
you have all these styles to play with.
Chip
mush-chip-spacing: 8px
mush-chip-padding: 0 0.25em
mush-chip-height: 36px
mush-chip-border-radius: 18px
mush-chip-font-size: 0.3em
mush-chip-font-weight: bold
mush-chip-icon-size: 0.5em
mush-chip-avatar-padding: 0.1em
mush-chip-avatar-border-radius: 50%
mush-chip-box-shadow: var(--ha-card-box-shadow)
mush-chip-background: var(--ha-card-background)
works well
there are plenty of comments in the above posts about how to use card_mod to do this, or if you are using vertical-stack-in-card, how to do it.
I am no card_mod expert, as I am just learning, from the other smart people here, but something like this would do it.
they come out nice and big. Use the chip-icon-size to make the icon bigger too.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.family_room_heater_air_temperature
icon_color: orange
use_entity_picture: false
content_info: state
card_mod: null
style: |
ha-card
{
--chip-font-size: 0.8em;
--chip-height: 50px
}
- type: light
entity: light.garage_lights
content_info: none
card_mod: null
style: |
ha-card
{
--chip-height: 50px
}
- type: entity
entity: binary_sensor.porsche_garage_door
icon_color: blue
content_info: none
card_mod: null
style: |
ha-card
{
--chip-height: 50px
}
5 Likes
Thanks for all the info, great looking dashboard. Iām working to replicate it on my Samsung Family Hub refrigerator, so far its working well. Iāve had to make some of the fonts smaller and use card mod to resize the cards (family hub display uses like a 200% factor). Any pointers on making the font smaller on the Title Card, so far this is the only one I can modify? Thanks.