Works liike a charm, thank you, I;m also learning a lot by your examples!!
1 Like
Amazing news. (; Ok I’ll just go back to stacking the switches and lights on top of each other. Playing around with how to display an “All [ROOM SPECIFIC} Switches” & an “All [ROOM SPECIFIC} Lights” but still maintain individual controls as well. All while not cluttering up screen space on mobile devices.
My best solution was to stack them next to each other in a grid format but the sliders are too small so I guess It’ll just have to be stacked on each other with pop-ups for individual controls. Any other ideas or approaches much appreciated!
1 Like
@rhysb hi
Is it possible with this method? Or there is another option.
type: custom:mushroom-title-card
title: מכשירים
card_mod:
style:
direction: rtl
What are you trying to do?
It Works! Thank You 
1 Like
Hi all,
Thanks for all inspiration and maybe a special thanks to rhysb, Thanks 
How can I add moving weaather icons to this?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Godkväll!
{% elif (time >= 12) %}
Godafton!
{% elif (time >= 5) %}
God Morgon!
{% else %}
Hej!
{% endif %}
subtitle: ‘’- type: custom:simple-weather-card
entity: weather.smhi_tullinge
name: Tullinge
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
best regards
Thekholm
1 Like
morning is it possible to put an arrow symbol in the left corner of this template card?
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |
{% if is_state('binary_sensor.bewegingsensor_schuur_motion', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
entity: binary_sensor.bewegingsensor_schuur_motion
icon_color: |-
{% if is_state('binary_sensor.bewegingsensor_schuur_motion', 'on') %}
red
{% else %}
green
{% endif %}
layout: horizontal
fill_container: true
tap_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: >-
/lovelace/title:%20My%20Awesome%20Home%20views:%20%20%20%20%20#%20View%20tab%20title.%20%20%20-%20title:%20Example%20%20%20%20%20#%20Unique%20path%20for%20direct%20access%20/lovelace/${path}%20%20%20%20%20path:%20example%20%20%20%20%20#%20Each%20view%20can%20have%20a%20different%20theme%20applied.%20Theme%20should%20be%20defined%20in%20the%20frontend.%20%20%20%20%20theme:%20dark-mode%20%20%20%20%20#%20The%20cards%20to%20show%20on%20this%20view.%20%20%20%20%20cards:%20%20%20%20%20%20%20%20%20#%20The%20filter%20card%20will%20filter%20entities%20for%20their%20state%20%20%20%20%20%20%20-%20type:%20entity-filter%20%20%20%20%20%20%20%20%20entities:%20%20%20%20%20%20%20%20%20%20%20-%20device_tracker.paulus%20%20%20%20%20%20%20%20%20%20%20-%20device_tracker.anne_there%20%20%20%20%20%20%20%20%20state_filter:%20%20%20%20%20%20%20%20%20%20%20-%20'home'%20%20%20%20%20%20%20%20%20card:%20%20%20%20%20%20%20%20%20%20%20type:%20glance%20%20%20%20%20%20%20%20%20%20%20title:%20People%20that%20are%20home%20%20%20%20%20%20%20%20%20%20#%20The%20picture%20entity%20card%20will%20represent%20an%20entity%20with%20a%20picture%20%20%20%20%20%20%20-%20type:%20picture-entity%20%20%20%20%20%20%20%20%20image:%20https://www.home-assistant.io/images/default-social.png%20%20%20%20%20%20%20%20%20entity:%20light.bed_light%20%20%20%20%20%20#%20Specify%20a%20tab%20icon%20if%20you%20want%20the%20view%20tab%20to%20be%20an%20icon.%20%20%20-%20icon:%20mdi:home-assistant%20%20%20%20%20#%20Title%20of%20the%20view.%20Will%20be%20used%20as%20the%20tooltip%20for%20tab%20icon%20%20%20%20%20title:%20Second%20view%20%20%20%20%20cards:%20%20%20%20%20%20%20%20%20#%20Entities%20card%20will%20take%20a%20list%20of%20entities%20and%20show%20their%20state.%20%20%20%20%20%20%20-%20type:%20entities%20%20%20%20%20%20%20%20%20#%20Title%20of%20the%20entities%20card%20%20%20%20%20%20%20%20%20title:%20Example%20%20%20%20%20%20%20%20%20#%20The%20entities%20here%20will%20be%20shown%20in%20the%20same%20order%20as%20specified.%20%20%20%20%20%20%20%20%20#%20Each%20entry%20is%20an%20entity%20ID%20or%20a%20map%20with%20extra%20options.%20%20%20%20%20%20%20%20%20entities:%20%20%20%20%20%20%20%20%20%20%20-%20light.kitchen%20%20%20%20%20%20%20%20%20%20%20-%20switch.ac%20%20%20%20%20%20%20%20%20%20%20-%20entity:%20light.living_room%20%20%20%20%20%20%20%20%20%20%20%20%20#%20Override%20the%20name%20to%20use%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20LR%20Lights%20%20%20%20%20%20%20%20%20%20#%20The%20markdown%20card%20will%20render%20markdown%20text.%20%20%20%20%20%20%20-%20type:%20markdown%20%20%20%20%20%20%20%20%20title:%20Dashboard%20%20%20%20%20%20%20%20%20content:%20>%20%20%20%20%20%20%20%20%20%20%20Welcome%20to%20your%20**dashboard**.
card_mod:
style: |
{% if is_state('binary_sensor.bewegingsensor_schuur_motion', 'on') %}
ha-card {
animation: borderPulse 2s ease-out infinite;
}
@keyframes borderPulse {
30% {
box-shadow: 0 0 60px red;
}
}
{% endif %}
Hello, thanks to all with your great ideas!!!
I’m trying to customize a climate card to suit my needs, but I’m unable to change the icon when a window is open, is anybody have a idea what I’m doing wrong. Thanks in advance.
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.bt_petite_chambre
icon: mdi:radiator
name: petite_chambre TEST
hvac_modes:
- heat
- 'off'
collapsible_controls: false
show_temperature_control: true
tap_action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if state_attr(config.entity, 'window_open') == false %}
--card-mod-icon: mdi:window-open-variant;
--shape-color: rgb(var(--rgb-blue)) !important;
--icon-color: rgb(var(--rgb-white)) !important;
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
normal state:
What I’m trying to achieve :
1 Like
You must change this line
{% if state_attr(config.entity, 'window_open') == false %}
Using config entity will assume the climate… you must change for the window binary sensor
I’ve added it to sunny for now 
thanks
1 Like
Thanks for the reply, detection if working fine, and the color of the icon changed an the animation start, but it doesn’t change the icon to mdi:window!
About the icon change etc i’m not a great help… @rhysb could help you for sure.
Maybe the issue is because the code must be different for the climate card… check this example
1 Like
You could do something like this:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: none
entity: sensor.water_level
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states(config.entity) | int %}
{% if water_level > 80 %}
background: url("/local/levelpngs/Water 5.png") no-repeat center;
{% elif water_level > 60 %}
background: url("/local/levelpngs/Water 4.png") no-repeat center;
{% elif water_level > 40 %}
background: url("/local/levelpngs/Water 3.png") no-repeat center;
{% elif water_level > 20 %}
background: url("/local/levelpngs/Water 2.png") no-repeat center;
{% else %}
background: url("/local/levelpngs/Water 1.png") no-repeat center;
{% endif %}
background-size: contain;
--shape-color: none;
}
4 Likes
Unfortunately --card-mod-icon won’t work there. Selector needs to be mushroom-shape-icon or higher.
I’m able to do it…
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.netatmo_living_room
icon: mdi:radiator
hvac_modes:
- heat
- 'off'
collapsible_controls: false
show_temperature_control: true
tap_action: none
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr('binary_sensor.ensuite_window', 'on') == true %}
--card-mod-icon: mdi:window-open-variant;
--shape-color: rgb(var(--rgb-blue)) !important;
--icon-color: rgb(var(--rgb-white)) !important;
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
{% else %}
{% endif %}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
1 Like
You can change the simple-weather-card icons like this:
type: custom:simple-weather-card
entity: weather.weatherflow_day_based_forecast
name: Auckland
card_mod:
style: |
.weather__icon {
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather_icons/anim/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather_icons/anim/rainy.svg") !important;
}
The icons I used are here:
11 Likes
Is modifications to the Title Card possible?
Can you change its properties with Card Mod?
Can you create a click event with it?
I would like to enlarge the title card text and have it clickable.
type: custom:mushroom-title-card
title: '{{ states(''sensor.time'') }}'
subtitle: '{{ states(''sensor.date'') }}'
alignment: center
card_mod:
style: |
ha-card {
background:
{% if is_state('light.pantry_light', 'off') %}
teal
{% else %}
purple
{% endif %}
;
this code doesnt change the look of the title card at all.
I didn’t know - thank you very much for help.
1 Like