Try removing that pipe symbol ( | ) in the style: | line.
See this post.
Nice! Iāve been trying to get color working as well. Mind sharing your code?
Thanks a lot, it worked!!!
Hi Pittaya
May I ask a question ? How do we display time format without a translated state ?
I mean I want to display this :
Like this :
What am I not seeing here? Hereās a template card I created but itās not showing āopenā or āclosedā but āonā or āoffāā¦ the entity is reporting correctly but the card is not showing it for some reason.
- type: custom:mushroom-template-card
primary: 'TV Window: {{ states("binary_sensor.tv_window_sensor_contact") }}'
secondary: 'Battery: {{ states("sensor.tv_window_sensor_battery") }}%'
entity: binary_sensor.tv_window_sensor_contact
icon: mdi:account-box
name: Motion
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
Hereās a picture showing nothing but doors and windows that are saying either āonā or āoffāā¦
How can I make them show āOpenā or āClosedā?
Thank you all!!!
1 Like
Try this
You can search for āepic time conversionā for much more guidance. Iāve found time conversion to be surprisingly (unnecessarily?) complicated.
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