Just substitute an if (or iif) statement to make it read however you’d prefer (i.e. turn on to open, etc.).
Alternatively, you might be able to change it on the backend.
This is working …
- type: custom:mushroom-template-card
primary: 'AC: {% if is_state("climate.john_s_device", "cool") %}
Cooling
{% else %}
Off
{% endif %}'
#secondary: 'AC: {{ states("sensor.tv_window_sensor_battery") }}%'
entity: climate.john_s_device
icon_color: |
{% if is_state('climate.john_s_device', 'cool') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('climate.john_s_device', 'cool') %}
mdi:fan-chevron-down
{% else %}
mdi:fan-chevron-up
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
Thank you!
2 Likes
This is the image source from Upklyak on Freepik
3 Likes
No literally got two different pictures, one night and one day, it just toggles between the two depending on the entity state
2 Likes
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Finn Bedroom
alignment: center
tap_action:
action: navigate
navigation_path: finn
- type: custom:mushroom-template-card
icon: none
entity: light.finns_room
icon_color: none
tap_action:
action: navigate
navigation_path: finn
hold_action:
action: none
card_mod: null
style: |
ha-card {
min-height: 140px;
background: var(--card-background-color) url(
{% if (is_state('light.finns_room', 'on') and state_attr('light.finns_room', 'brightness') < 20) and (is_state('input_boolean.sunset_mode', 'on')) %}
'/local/backgrounds/finn_bedroom_night.jpg'
{% elif (is_state('light.finns_room', 'off') and is_state('input_boolean.sunset_mode', 'on')) %}
'/local/backgrounds/finn_bedroom_night.jpg'
{% else %}
'/local/backgrounds/finn_bedroom.jpg'
{% endif %})
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.2);
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- type: custom:mushroom-chips-card
alignment: start
style: |
ha-card {
margin-left: 5px
}
chips:
- type: template
content: >-
{{ states(entity) | float }}{{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.finn_bedroom_sensor_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state >= '19' %}
red
{% elif state < '19'%}
blue
{% else %}
grey
{% endif %}
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
}
- type: template
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.finn_bedroom_sensor_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
}
- type: template
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.finn_bedroom_sensor_pressure
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
}
- type: template
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.aarlo_air_quality_finn_bedroom
icon: mdi:biohazard
icon_color: |-
{% set state = states(entity)|int %}
{% if state <= 10 %}
green
{% elif state <= 25 %}
yellow
{% elif state <= 40 %}
orange
{% elif state > 40 %}
red
{% else %}
grey
{% endif %}
tap_action:
action: none
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
}
- type: template
entity: light.finns_room
icon: mdi:lightbulb
icon_color: >-
{% set r = state_attr('light.finns_room', 'rgb_color')[0] %} {%
set g = state_attr('light.finns_room', 'rgb_color')[1] %} {% set b
= state_attr('light.finns_room', 'rgb_color')[2] %} rgba( {{r}},
{{g}}, {{b}}, 0.1);
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
position: absolute;
right: 65px;
}
- type: conditional
conditions:
- entity: switch.adaptive_lighting_finn_bedroom
state: 'on'
chip:
type: template
entity: switch.adaptive_lighting_finn_bedroom
icon: |-
{% set state = states(entity) %}
{% if state == 'on' %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
position: absolute;
right: 30px;
}
- type: template
entity: switch.adaptive_lighting_sleep_mode_finn_bedroom
icon: mdi:theme-light-dark
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.05em;
position: absolute;
right: 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: start
style: |
ha-card {
margin-left: 5px
}
chips:
- type: template
entity: media_player.finn_tv
content: '{{ states(entity) | capitalize }}'
icon: |-
{% set state = states(entity) %}
{% if state == 'playing' %}
mdi:television-play
{% elif state == 'paused' %}
mdi:television-play
{% elif state == 'off' %}
mdi:television-off
{% elif state == 'unavailable' %}
mdi:television-off
{% else %}
mdi:television
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == 'playing' %}
green
{% elif state == 'paused' %}
yellow
{% elif state == 'off' %}
grey
{% elif state == 'unavailable' %}
red
{% else %}
green
{% endif %}
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.1em;
}
- type: template
entity: media_player.finn_bedroom_speaker
icon: mdi:google-home
content: '{{ states(entity) | capitalize }}'
icon_color: |-
{% set state = states(entity) %}
{% if state == 'playing' %}
green
{% elif state == 'paused' %}
yellow
{% elif state == 'off' %}
grey
{% elif state == 'unavailable' %}
red
{% else %}
green
{% endif %}
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.1em;
}
- type: custom:mushroom-chips-card
alignment: end
style: |
ha-card {
margin-right: 5px
}
chips:
- type: conditional
conditions:
entity: binary_sensor.aarlo_cry_finn_bedroom
state: 'on'
card:
type: template
entity: binary_sensor.aarlo_cry_finn_bedroom
icon: mdi:emoticon-cry
icon_color: red
tap_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
}
- type: conditional
conditions:
entity: binary_sensor.aarlo_sound_finn_bedroom
state: 'on'
card:
type: template
entity: binary_sensor.aarlo_sound_finn_bedroom
icon: mdi:music-note
icon_color: red
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
}
- type: template
entity: binary_sensor.aarlo_motion_finn_bedroom
icon: |-
{% if is_state(entity, 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% else %}
red
{% endif %}
style: |
ha-card {
{% if is_state('binary_sensor.aarlo_motion_finn_bedroom', 'on') %}
animation: blink 2s linear infinite;
{% endif %}
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
min-height: 40px;
}
@keyframes blink {
50% {opacity: 0;}
}
3 Likes
Its at this post:
Here are some animated icons, unfortunately the template function does not offer the possibility to integrate the slider or other buttons, maybe someone has a good idea.
2 Likes
I have a question for the template guru’s out there.
So I want to be able to display the "last-changed” setting whilst using the template card
If I use the normal entity card. I can show the last changed and it tell me in seconds/minutes/hours/days when an entity last changed.
See below
However, when I try and use the template card, I can’t work out what to config to use.
The closest I have got is for it to display the time it last changed See below:
The code I am using is
states.sensor.house_temperature.last_changed.astimezone().strftime('%H:%M')
So, I was wondering if there is another piece of code I can use to display the last change setting in the template card.
Thanks everyone, and I love the mushroom card.
3 Likes
Hi, is it possible to insert an icon in the title and subtitle in the card title?
Try like this:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-bottom: 14px !important;
}
You can’t use mdi icons, but you can use emoji.
1 Like
That worked!!! Thank you.
I was replying to dadada
1 Like
Hi there,
with the new badge_icon is it possible to add the badge_icon IF a light is on ? For exemple for a group.light ?
Yep, is possible.
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: hue:room-office
entity: light.YOURLIGHT
badge_icon: |-
{% if is_state('light.YOUROTHERLIGHT', 'on') %}
mdi:lightbulb
{% elif is_state('light.YOUROTHERLIGHT', 'off') %}
{% endif %}
icon_color: disabled
badge_color: |-
{% if is_state('light.YOUROTHERLIGHT', 'on') %}
amber
{% elif is_state('light.YOUROTHERLIGHT', 'off') %}
{% endif %}
light off:
light on:
@piitaya & @GnoI86 Sweet additon to an already great card set!
2 Likes
You have 2 {% endif %} in your template.
And please use the code tags and not screenshots for code.
Stil not working @RodgerDodger . Any ideas ?
type: custom:mushroom-template-card
primary: Test Light
secondary: testing badges
icon: mdi:lightbulb
entity: light.sink_light
badge_icon: |-
{% if is_state('light.sink_light', 'on') %}
mdi:lightbulb
{% elif is_state('light.sink_light', 'off') %}
{% endif %}
icon_color: |-
disabled
badge_color: |-
{% if is_state('light.sink_light', 'on') %}
amber
{% elif is_state('light.sink_light', 'off') %}
{% endif %}