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.
cant you use card_mod on the title card styles? or in the theme?, making your own theme, and apply that to your fridge.
# Title
mush-title-padding: 24px 12px 16px
mush-title-spacing: 12px
mush-title-font-size: 24px
mush-title-font-weight: normal
mush-title-line-height: 1.2
I used these to change the spacing and padding to remove space, and have that nicely on my family hub too.
3 Likes
Itās posible to have the entity-filter card functionality with the mushroom card UI?
Iāve failed at the first hurdle on this. I go to HACS, click on the frontend tab, click on the blue āExplore and add repositoriesā button and search. No results found 
were you code please
Are you sure you havenāt installed it already? I have and donāt get it as a result again.
ā¦and then scroll down to the installed frontend stuff.
Nope. Not there either
1 Like