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!
This is the image source from Upklyak on Freepik
No literally got two different pictures, one night and one day, it just toggles between the two depending on the entity state
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;}
}
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.
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.
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.
That worked!!! Thank you.
I was replying to dadada
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!
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 %}
chips:
- type: entity
entity: sensor.number_of_lights_on
tap_action:
action: navigate
navigation_path: light-on
- type: template
entity: sensor.number_of_lights_on
layout: vertical
icon: |-
{% set mode = states(‘sensor.number_of_lights_on’) %}
{% if mode >= ‘1’ %}
mdi:lightbulb-group
{% else %}
mdi:lightbulb-group-off
{% endif %}
icon_color: |-
{% set mode = states(‘sensor.number_of_lights_on’) %}
{% if mode >= ‘1’ %}
orange
{% else %}
grey
{% endif %}
secondary: states {{ states(“sensor.number_of_lights_on”) }}%
card_mod: null
alignment: center
style: |
ha-card {
–chip-box-shadow: 0px 0px;
}
alignment: end
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
how to merge to card