It does and it offers just true or false. 
I suspect my problem is the repeated use of the coding for each room but I donāt know enough to be able to discover why.
Hmmm, it all looks correct to me then. Have you checked that the actual attribute moves from true to false when the heating is turned off.
Thanks for the suggestion. Just checked and Iāve watched it change.
At the same time, Iām sure one set of icon and icon colour changes affected the other.
Iāve changed icons and icon_color between the two rooms. The kitchen is heating but the study is not so it appears that the results of the If statements are reversed for both rooms.
type: grid
cards:
- type: custom:mushroom-template-card
primary: Kitchen
entity: climate.wiser_kitchen
icon: >-
{% if state_attr('climate.wiser_kitchen', 'is_heating') == 'true'%}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
icon_color: >-
{% if state_attr('climate.wiser_living_room', 'is_heating') == 'true'%}
red
{% else %}
blue
{% endif %}
secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }}'
layout: vertical
- type: custom:mushroom-template-card
primary: Study
entity: climate.wiser_study
icon: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
mdi:fire
{% else %}
mdi:snowflake
{% endif %}
icon_color: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
red
{% else %}
green
{% endif %}
secondary: '{{ state_attr(''climate.wiser_study'', ''current_temperature'') }}'
layout: vertical
Iām trying to replicate this with just motion, light, and media player icons on the bottom right of the card, but with no light entity background.
Icons donāt seem to show for some reason, any ideas? thanks
Thanks, i will try it !
Post the code you have right now so we can help 
Thanks, I edited @rhysb code then butchered it somehow lol.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: '{{ states("sensor.landing_motion_temperature") | round(0) }} Ā°C'
icon: mdi:sofa
entity: light.living_room_light
tap_action:
action: navigate
navigation_path: lounge
hold_action:
action: toggle
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.landing_motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.sky_q
state_not: 'off'
- entity: media_player.sky_q
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: |-
{% set media_type = state_attr('media_player.sky_q',
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:plex
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.landing_motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-outline
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
Light entity icon doesnāt show at all, not sure what the last icon is tbh. I think the code also needs clearing up, as Iāve only removed the light entity for the background under card_mod and nothing else.
There is no light entity icon in your code, so i would assume that is it.
The first bit of the code that refers to your light is for the main big icon at the top left of the card
Otherwise no light entity mentioned.
(Original post by rhysb doesnt have a light entity chip either, so you would need to add your own if you want it )
1 Like
Oh wow, makes sense now lol, thanks for your help. 
1 Like
With this to move them to the left just use the built in alignment for mushroom chips instead of moving chips individually. Like this:
type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
alignment: start
So for your full config like this:
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Stue
secondary: >-
{{ states('sensor.sensor_stue_co2_atom_stue_temperature') | round(0)
}} Ā°C
icon: mdi:sofa-outline
entity: light.sofaspotter
tap_action:
action: navigate
navigation_path: stue
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
card_mod:
style: |
ha-card {
transform: scalex(-1);
padding-bottom: 20px !important;
border: none !important;
}
mushroom-state-info {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
mushroom-shape-icon {
position: absolute;
--icon-size: 77px;
top: -38px;
right: -56px;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.flos
content_info: none
tap_action:
action: toggle
icon: mdi:lamp
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.gubi
content_info: none
icon: mdi:chandelier
use_light_color: true
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_dining_room_smoke_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.ms6_stue_home_security_motion_detection
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: start
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 115px;
{% if is_state('light.sofaspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: KjĆøkken
secondary: '{{ states(''sensor.motionkjokken_temperature'') | round(0) }} Ā°C'
icon: mdi:silverware-fork-knife
entity: light.kjokkenspotter
tap_action:
action: navigate
navigation_path: kjokken
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.kjokkenspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
- type: light
entity: light.pendellampe
content_info: none
tap_action:
action: toggle
icon: mdi:ceiling-light-multiple
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.benkebelysning
content_info: none
icon: mdi:wall-sconce-flat
use_light_color: true
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_kitchen_co_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.motionkjokken_motion
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.kjokkenspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
FYI with the newest version of card mod what you have here (in the second card in the horizontal stack) will not work.
- type: conditional
conditions:
- entity: binary_sensor.motionkjokken_motion
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
You always need to have:
- type: conditional
conditions:
- entity: binary_sensor.motionkjokken_motion
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
Going forward. Just using style: | without card_mod first is now fully dead.
1 Like
Hi,
Iām counting the lights on in specific area. The color of the icon of the mushroom template card is amber when there is at least 1 light on in the room and grey when there isnāt. Pretty simple and working.
However i want to reject some of the lights with a specific device_class: DNDMode.
The code is working to count the correct number of lights (excluding the DNDMode) in the mushroom badge icon.
Iām using this code for it:
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";
However the same rejectattr code is not working for the icon color.
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}
amber {% else %} grey {% endif %}
Any idea what could be wrong?
Full code
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq'
, 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr (
'attributes.device_class' , 'eq' , 'DNDMode') |list | count > 0 %}
amber {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lichten aan
style: |
--popup-border-radius: 12px;
content:
type: custom:auto-entities
filter:
include:
- area: Woonkamer
domain: light
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
--ha-card-border-width: 0;
}
exclude:
- domain: light
attributes:
device_class: DNDMode
card:
type: custom:layout-card
layout:
margin: 0px 10px 10px 10px
border-radius: 12px
cards: []
layout_type: masonry
sort:
method: friendly_name
target: {}
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
A very big thank you for such a detailed answer, this setup is pretty old from the early mushroom days gues i have some rewrites to do.
Any suggestions to use button-card instead of stack-in-card?
Stack in card seems like a dead project, last comit in 2020.
@jeey2k I typically use vertical-stack-in-card and layout card combined. The grid option on layout-card is very dynamic and allows easy adjustments to columns.
Vertical-stack-in-card has a horizontal option as well.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: Outdoor Lights
style: |
ha-card
{ --title-padding: 12px 12px 4px;
--title-font-size: 16px;
--primary-text-color: ;
--title-font-weight: 100;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
Thanks. It is working.
And can I change the blue squares in another colour ? Because it does not matches my colours
@Faecon Yes add ths line --tpc-text-color: yellow; to change the text color and --tpc-elements-background-color: red; to change the background color. Change the color to your preference.
card_mod:
style: |
ha-card{
font-weight: 400;
--tpc-text-color: yellow;
--tpc-elements-background-color: red;
}
1 Like
You are actually overiding the badge color with background: rgb(var(--rgb-orange)); It wasnāt actually amber but rgb(var(--rgb-orange).
icon_color: | references the shape background color, not the badge background color. You can place your if statement like this in card_modā¦
background: {% if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}} amber
{% else %}
green
{% endif %}
}
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";
position: absolute;
color: var(--card-background-color);
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
top: 0;
justify-content: center;
align-items: center;
background: {% if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}}
amber {% else %}
blue
{% endif %}
}
ha-card {
--ha-card-border-width: 0;
}
1 Like
Hi many thanks for your support.
I indeed mean the background color of the shape, not the background of the badge. Thatās indeed orange.
Instead of the above picture, it should be like this:
It was working perfectly before when using this code:
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count > 0 %}
amber {% else %} grey {% endif %}
I just added | rejectattr ('attributes.device_class','eq','DNDMode') to the code, but that does seem to break it.
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class' , 'eq' , 'DNDMode') | list | count > 0 %}
amber {% else %} grey {% endif %}