Thank you for your time.
It worked a bit 
the error is gone. But it looks like the second rule (elif) isn’t reacting because the temp sensor is above > 20 right now. It should be red.
It evaluates your if statement in order.
- Is the temperature > 15? It is. Say green. This if statement is over.
- never evaluated
1 Like
Here’s how I setup mine
{% set temp = states(entity) %}
{% if temp < '67' %}
green
{% elif temp < '69' %}
light-green
{% elif temp < '71' %}
lime
{% elif temp < '72' %}
yellow
{% elif temp < '74' %}
amber
{% elif temp < '78' %}
orange
{% elif temp < '84' %}
deep-orange
{% else %}
red
{% endif %}
6 Likes
Yes that should work great!!!
Thank you for the example!
Got you started, didn’t it? 
Hahahhahah see all the help that came afterwards?
1 Like
Hey mate, big favour if thats ok, i was wondering if you could either help me join these cards together or point me in the right directionm on how i can learn some of this stuff
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: |-
{{ states('sensor.average_kitchen_humidity') | round(0) }}% | {{
states('sensor.average_kitchen_temperature') | round(0) }}°C
icon: mdi:pot-steam
entity: light.area_kitchen_lights_group
icon_color: '''{{ ''''white'''' if is_state(entity, ''''on'''') else ''''white'''' }}'''
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
fill_container: true
card_mod:
style: |
:host {
--mush-icon-size: 90px;
height: 100px;
background: url('https://img.freepik.com/free-vector/terrace-with-mountain-lake-view-home-villa-hotel-area-with-sofa-ottoman-stand-wooden-patio-with-scenery-nature-landscape-background-with-rocks-water-pond-cartoon-vector-illustration_107791-11419.jpg?t=st=1658807264~exp=1658807864~hmac=8ec279678398cc8813f10112ecb27e57af9e4d4da6e42611c78c0a6e290e0946&w=1380') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.9);
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.area_kitchen_lights_group', 'on') else 'grey' }}), 0.3) !important;
}
- square: false
columns: 7
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.kitchen_light_switch') %}
{% if state=='on' %}
hue:bulb-group-ceiling-round
{% elif state=='off' %}
hue:bulb-group-ceiling-round
{% endif %}
entity: light.kitchen_light_switch
icon_color: |-
{% set state=states('light.kitchen_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.kitchen_pendant_light_switch') %}
{% if state=='on' %}
mdi:vanity-light
{% elif state=='off' %}
mdi:vanity-light
{% endif %}
entity: light.kitchen_pendant_light_switch
icon_color: |-
{% set state=states('light.kitchen_pendant_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.kitchen_strip_light_switch') %}
{% if state=='on' %}
hue:lightstrip
{% elif state=='off' %}
hue:lightstrip
{% endif %}
entity: light.kitchen_strip_light_switch
icon_color: |-
{% set state=states('light.kitchen_strip_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('cover.ducted_ac_kitchen_zone') %}
{% if state=='open' %}
mdi:air-conditioner
{% elif state=='closed' %}
mdi:air-conditioner
{% endif %}
entity: cover.ducted_ac_kitchen_zone
icon_color: |-
{% set state=states('climate.ducted_ac_controls_interface') %}
{% if state=='off' %}
disabled
{% elif state=='cool' %}
blue
{% elif state=='heat' %}
orange
{% elif state=='fan_only' %}
brown
{% elif state=='dry' %}
green
{% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('binary_sensor.kitchen_motion_sensor') %} {% if
state=='on' %} mdi:motion-sensor {% elif state=='off' %}
mdi:motion-sensor-off {% endif %}
entity: binary_sensor.kitchen_motion_sensor
icon_color: |-
{% set state=states('binary_sensor.kitchen_motion_sensor') %} {% if
state=='on' %} blue {% elif state=='off' %} disabled {% endif %}
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('binary_sensor.kitchen_sink_leak_sensor') %} {% if
state=='on' %} mdi:pipe-leak {% elif state=='off' %} mdi:pipe-leak {%
endif %}
entity: binary_sensor.kitchen_sink_leak_sensor
icon_color: |-
{% set state=states('binary_sensor.kitchen_sink_leak_sensor') %} {%
if state=='on' %} orange {% elif state=='off' %} disabled {% elif
state=='unavailable' %} red {% endif %}
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('sensor.electrolux_fridge_appliance_state') %}
{% if state=='False' %}
mdi:fridge
{% elif state=='True' %}
mdi:fridge-alert
{% endif %}
entity: sensor.electrolux_fridge_appliance_state
icon_color: |-
{% set state=states('sensor.electrolux_fridge_appliance_state') %}
{% if state=='False' %}
green
{% elif state=='True' %}
red
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
height: 135px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.1);
{% if is_state('light.area_back_patio_lights_group', 'on') %}
box-shadow: 0 0 10px rgba(255, 152, 0, 0.8);
{% endif %}
}
1 Like
Remove the two vertical-stacks at the top and replace them with a custom:stack-in-card like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
Sorry to disappoint, but that is the volume bar 
. Would be nice to have a progress bar though.
Sigh, thank you!
one last one, how do i remove the entity shape colour?
Hey Tempus, happy days! I stole the one from Mini Media Player.
Mushroom Media Player with Progress Bar:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.office
name: Media Player
icon: mdi:play
use_media_artwork: false
fill_container: false
use_media_info: true
show_volume_level: false
media_controls:
- previous
- play_pause_stop
- next
collapsible_controls: true
tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.office
state_not: 'off'
- entity: media_player.office
state_not: idle
card:
entity: media_player.office
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 42px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
You can adjust the progress bar height with --mmp-progress-height:
7 Likes
Add this to the Mushroom Card:
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
2 Likes
Do you know how to fix this issue I’m having, can’t get the fan icons to show up.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
icon: |-
{% set mode = states('climate.3family_room') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.3family_room','hvac_action') %}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.3family_room
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.3family_room
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.3family_room
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.3family_room
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: weather
entity: weather.home
show_conditions: true
show_temperature: false
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.vaughan_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.3family_room_temperature
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.vaughan_temperature
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
--st-mode-background: #2d2d2d;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.3family_room
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan:
Auto low:
name: Auto
icon: mdi:fan-auto
Low:
name: 'On'
icon: mdi:fan
- type: custom:mini-graph-card
entities:
- entity: sensor.3family_room_temperature
name: Inside Temperature
color: '#4caf50'
- entity: sensor.vaughan_temperature
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
5 Likes
You can dynamically change the color of the Chip icon like this:
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-icon {
{% set r = state_attr('light.lounge_cabinet_light', 'rgb_color')[0] %}
{% set g = state_attr('light.lounge_cabinet_light', 'rgb_color')[1] %}
{% set b = state_attr('light.lounge_cabinet_light', 'rgb_color')[2] %}
color: rgb( {{r}}, {{g}}, {{b}} ) !important;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Change the number of nth-child(1): to address each chip.
2 Likes
Okay so I took a deeper look into it and its also not working on safari on the iphone. I think theres an CSS / safari problem, I found several threads on the internet about grayscaling and problems on safari, but no solution works for me.
Is anyone got this to work?
Maybe your thermostat doesn’t support it?
icon_color: >-
{% if (state_attr('sensor.woonkamer_temperature','temperature') | int < 20) %} green
{% elif (state_attr('sensor.woonkamer_temperature','temperature') | int => 20) %} red
{% else %} cyan
{% endif %}
Damn. Yeh it would be nice lol
1 Like