Well done on the wobble! Is it possible to do that with the template card icon I wonder?
Try:
icon_color: |-
{% set icsp = states('sensor.solaredge_current_power')|float(0) %}
{% if icsp > '0' %}
green
{% else %}
red
{% endif %}
That helps!!
Thank you!!
Here goes to anyone looking:
- type: custom:mushroom-template-card
primary: 'Motion: {{ states("binary_sensor.bedroom_motion_sensor_occupancy") }}'
secondary: 'Battery: {{ states("sensor.bedroom_temp_sensor_battery_2") }}%'
entity: binary_sensor.bedroom_motion_sensor_occupancy
icon: mdi:motion
name: Motion
use_light_color: false
Expanding on @Boostin4HP card as a base, done the drop down as well, but with custom colours for the indoor/outdoor temperature and it just uses heatings (radiators), so no cooling.
Also merged in the climate title to flatten the card into a whole.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-title-card
title: Climate
subtitle: ''
- 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.home', 'hvac_action') }}
icon: |-
{% set mode = states('climate.home') %}
{% if mode == 'off' %}
mdi:radiator-off
{% elif mode == 'heating' %}
mdi:radiator
{% else %}
mdi:radiator-disabled
{% endif %}
icon_color: |-
{% set status = state_attr('climate.home','hvac_action') %}
{% if 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.home
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
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.heat {
background: #472421;
color: #f44336;
}
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.home
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
- 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")}} °C'
entity: climate.home
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
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement") }}
Humidity
entity: sensor.humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}
Pressure
entity: sensor.average_indoor_pressure_downstairs
icon: mdi:gauge
icon_color: grey
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: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.average_indoor_temperature_downstairs
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Inside
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '19' %}
red
{% elif temp >= '17' and temp < '19' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:home-thermometer-outline
- type: custom:mushroom-template-card
entity: sensor.outdoor_temperature
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Outside
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '19' %}
red
{% elif temp >= '17' and temp < '19' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:thermometer
- 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.home
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.average_indoor_temperature_downstairs
name: Inside Temperature
color: '#4caf50'
- entity: sensor.outdoor_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
13 Likes
Have to pinch this too. Stop it! 
1 Like
@rhysb trying to incorporate the adaptive lighting settings into the card as well, so have the following:
Any ideas how to get that rgb color matching working for the icon_color? Does the mushroom-template-card support returning rgb?
2 Likes
Do you mean from the icon color? Maybe, I’ll have a look later…
Yer. Would appreciate it, it just says string in docs
And they said it couldn’t be done… It was a bit tricky though.
type: custom:mushroom-template-card
primary: Yeehaa!
icon: mdi:horse-human
icon_color: yellow
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: wobbling 0.5s linear infinite alternate;
}
@keyframes wobbling {
0% {
transform: rotate(-20deg);
}
100% {
transform: rotate(20deg);
}
}
type: custom:mushroom-template-card
primary: Weeeee!
icon: mdi:pinwheel
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
15 Likes
Which bit looks weird for you?
hey @Posreg How did you make these polish radios work.
I want to have same thing for my wife as well
Thanks in advance
can you share your code?
Hi, the following template is not showing the state of the sensor in the secondary information part. It is left empty. The template itself is OK. It renders fine in the template check in the developer section of HA. Any ideas why?
primary: Upstream Fehler
entity: sensor.upstream_fehler
secondary: |
{% if states('sensor.upstream_fehler') in ['unknown','unavailable'] %}
Offline
{% else %}
{{ states('sensor.upstream_fehler') }}
{% endif %}Do this in a chip and I will give you a cookie.
I figured out that the issue is that the template renders to 0 (zero). Zero is not displayed, even if just using the number zero instead of the template. The following also does NOT work.
{% if states('sensor.upstream_fehler') in ['unknown','unavailable'] %}
Offline
{% else %}
0
{% endif %}
The following works:
secondary: |
{% if states('sensor.upstream_fehler') in ['unknown','unavailable'] %}
Offline
{% else %}
- {{ states('sensor.upstream_fehler') }} -
{% endif %}
It would be awesome to have style supported in the visual editor
2 Likes
Who wants a cookie? 
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: Cookie
card_mod:
style:
mushroom-template-chip$: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
12 Likes
Mind posting your yaml?
How are you getting the fan to rotate?
I think I already posted it in here but here it is again:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: |-
{% if is_state('fan.YOURFAN', 'on') %}
mdi:fan
{% else %}
{% endif %}
icon_color: |-
{% if is_state_attr('fan.YOURFAN', 'preset_mode',
'Normal')%}
blue
{% elif is_state_attr('fan.YOURFAN', 'preset_mode',
'Nature')%}
green
{% else %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
entity: fan.YOURFAN
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('fan.YOURFAN') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
And it’s right above your question:
3 Likes