Hi,
I checked this but then I get an eror!
Indentation is important in yaml, so you need to fix it. It seems to be indented too deep to me. It should be 2 spaces deeper than ha-card I think.
Check docs for card-mod, the “style” option’s value is ether a string or a dictionary, you are trying to use both simultaneously.
This is correct:
style: |-
ha-card {
but only for this “string” ha-card part.
The next expression with “$” is a part of dictionary which cannot be combined with a “string” part like you did.
Go to a huge card-mod thread → 1st post → link at the bottom → others → combining.
hm!
It will not wor:
type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 0px;
this is worling as it should!
and this is also working!
type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
fill_container: false
card_mod:
style: |-
ha-card {
{% if
is_state('binary_sensor.cupra_born_car_is_online','on') %}
--card-primary-color:
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
but not together, I tried sevaral cobinations!
hä?!?! I do not understand, what you mean!
Just read the last sentence of my post.
it would be very nice, if you can post the link, I do not find it!
sorry, I’m sorry, I have no idea what you mean! The riddle is obviously too high for me! Anyway, thank you! I don’t see what that has to do with what I want.
You need to learn step by step on simple examples if you wish to use card-mod.
The link I provided contains a lot of tutorial examples - including an explicit answer to
Ok, thank you, you can learn a lot and I learn every day. But, you can’t learn everything there is in the world, that’s just the way it is. When I buy a car, I want to drive it, not design it build it up and then drive it. Certain things have to be there!
Yes, I know, this is not a consumer product and I am grateful for people who develop the whole thing and support it. But my aspiration is different, so I like to learn from examples. It’s enough for me if I can handle it. Here I have obviously reached my limits and then I have to leave it at that! That’s just the way it is! “Schuster bleib bei deinen Leistent”, as a german saying goes.
Thanks for the support, I’ll break this off here.
That is why I gave you a path to a list of examples.
Check out this thread if you are going to learn about modding mushroom cards
You had serval issue as @Ildar_Gabdullin pointed out.
One that wasn’t mentioned was:
a color wasn’t defined here and I have found
if states works best for the first portion of the if statement.
The link I sent you has a great section on what the $ and .: | does as well as healthy guide to everything mushroom.
type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 0px;
}
.: |
ha-card {
{% if states('binary_sensor.cupra_born_car_is_online','on') %}
--card-primary-color: #821b1b;
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
ok, I think I habe it! Two open points are left:
- how I can I reduce the space between the Icons and the first line
- is it possible to use the keyword “entity” in the card-mod section (see post before)
The code:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: null
cards:
- type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape
{% if is_state('binary_sensor.cupra_born_car_is_online','on') %}
{
--shape-animation: ping 2s infinite;
--icon-symbol-size: 20px;
--icon-size: 40px;
}
@keyframes ping
{
0%
{
box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
}
100%
{
box-shadow: 0 0 5px 15px transparent;
}
}
{%else%}
{
--icon-symbol-size: 20px;
--icon-size: 40px;
}
{% endif %}
.: |
ha-card
{
border: none !important;
{% if is_state('binary_sensor.cupra_born_car_is_online','on') %}
--card-primary-color:
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{ ''Motor läuft'' if states(entity) == ''on'' else ''Motor aus'' }}'
icon: >-
{{"mdi:engine-outline" if states(entity)=="on" else
"mdi:engine-off-outline"}}
entity: binary_sensor.cupra_born_engine_status
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''grey'' }}'
card_mod:
style: |
ha-card
{
border: none !important;
{% if is_state('binary_sensor.cupra_born_engine_status','on') %}
--card-primary-color:
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{states(entity)}} %'
icon: >-
{{"mdi:battery-charging-high" if
states("sensor.cupra_born_charging_state")=="charging" else
"mdi:battery-10" if states(entity)<"10"else "mdi:battery-20" if
states(entity)<"20"else "mdi:battery-30" if states(entity)<"30"else
"mdi:battery-40" if states(entity)<"40"else "mdi:battery-50" if
states(entity)<"50"else "mdi:battery-60" if states(entity)<"60"else
"mdi:battery-70" if states(entity)<"70"else "mdi:battery-80" if
states(entity)<"80"else "mdi:battery-90" if states(entity)<"90"else
"mdi:battery-charging-100" if states(entity)<"100"}}
entity: sensor.cupra_born_state_of_charge
multiline_secondary: false
layout: vertical
icon_color: >-
{{ 'red' if states(entity)<"10" else 'amber' if
((states("sensor.cupra_born_charging_state")=="charging")or
states(entity)<"70")else ('green' if ((states(entity) ==
states("number.cupra_born_target_state_of_charge")or
states(entity)<"80"))) }}
fill_container: false
secondary: >-
{{ 'charging' if
states("sensor.cupra_born_charging_state")=="charging" }}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{% if is_state('sensor.cupra_born_charging_state','charging') %}
{
--shape-animation: ping 2s infinite;
--icon-symbol-size: 20px;
--icon-size: 40px;
}
@keyframes ping
{
0%
{
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 0.7);
}
100%
{
box-shadow: 0 0 5px 15px transparent;
}
}
{%else%}
{
--icon-symbol-size: 20px;
--icon-size: 40px;
}
{% endif %}
.: |
ha-card
{
border: none !important;
{% if is_state('sensor.cupra_born_charging_state','charging') %}
--card-primary-color:;
--card-secondary-color:#00CC00;
{%else%}
--card-primary-color:;
--card-secondary-color:;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{ ''geöffnet'' if states(entity) == ''on'' else ''verschlossen'' }}'
icon: '{{"mdi:car-door" if states(entity)=="on" else "mdi:car-door-lock"}}'
entity: binary_sensor.cupra_born_overall_status
multiline_secondary: false
layout: vertical
icon_color: '{{ ''amber'' if states(entity) == ''on'' else ''green'' }}'
card_mod:
style: |
ha-card
{
border: none !important;
{% if is_state('binary_sensor.cupra_born_overall_status','on') %}
--card-primary-color:
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{ ''Heinzung an'' if states(entity) == ''on'' else ''Heizung aus'' }}'
icon: '{{"mdi:radiator" if states(entity)=="on" else "mdi:radiator-off"}}'
entity: light.lidl_edison_bulb_2
multiline_secondary: false
layout: vertical
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
fill_container: false
secondary: >-
{% if states("light.lidl_edison_bulb_2")=="on" %} {{'Temperatur:'}}
{{(states("number.cupra_born_target_climate_temperature")|int)}}
{{"°C"}} {%endif%}
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card
{
border: none !important;
{% if is_state('light.lidl_edison_bulb_2','on') %}
--card-primary-color:;
--card-secondary-color:#00CC00;
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: markdown
content: >-
<hr>
<br/>
<img src = '/local/Cupra-Logo.png'
align='middle'
width='100'
height='59'></img> <font color="#B3773F"><font
size="5">{{'  '}}Fahrzeugübersicht</font></font><br/>
<font color="#B3773F"><font size="4">UN - AC 999</font></font>
<hr>
<br/>
|||||
|:---|---:|---:|---:|
Parkposition am {{as_timestamp(state_attr('sensor.cupra','last_changed'))|
timestamp_custom('%d.%m.%Y um %H:%M')}} Uhr:
|{{'  '}}{{(state_attr('sensor.cupra','street'))}} {{
(state_attr('sensor.cupra','street_number'))}}
|{{'  '}}{{(state_attr('sensor.cupra','postal_code'))}}
{{(state_attr('sensor.cupra','city'))}}
|{{' '}}
|||||
|:---|---:|---:|---:|
verbleibende
Ladezeit:|{{states("sensor.cupra_born_remaining_charging_time")}} min.
verbleibende
Aufheizzeit:|{{'    '}}{{states("sensor.cupra_born_remaining_climatisation_time")}}
min.
|{{' '}}
Kilometerleistung:|{{states("sensor.cupra_born_odometer_in_kilometers")}}
km
Reichweite:|{{states("sensor.cupra_born_range_in_kilometers")}} km
letzter Trip:|{{states('sensor.cupra_born_odometer_in_kilometers') |int -
states('input_number.save_current_mileage')| int }} km
Motor ein: {{as_timestamp(states('input_datetime.on_time_engine'))|
timestamp_custom("%d.%m.%Y um %H:%M Uhr") }}
Motor aus: {{as_timestamp(states('input_datetime.off_time_engine'))|
timestamp_custom("%d.%m.%Y um %H:%M Uhr") }}
{% if (((as_timestamp(states('input_datetime.off_time_engine')) -
as_timestamp(states('input_datetime.on_time_engine')))/60) |int)<=0%}
{{""}}
{%else%}
Die Fahrzeit betrug ca.
{{((as_timestamp(states('input_datetime.off_time_engine')) -
as_timestamp(states('input_datetime.on_time_engine')))/60) |int}} min.
{%endif %}
card_mod:
style:
ha-markdown $: |
img {
vertical-align: middle !important;
.: |
ha-card
{
border: none !important;
}
card_mod:
style: |
ha-card {
border: none !important;
}
Let’s start small with your formatting. I think you are going to need to shrink things for it to fit better.
I cleaned up the code a bit and got your animation working.
type: custom:mushroom-template-card
primary: '{{ ''Online'' if states(entity) == ''on'' else ''Offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 40px;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 green }
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% else %}
{% endif %}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: grey;
}
@LiQuid_cOOled ,
thanks for you feedbak. I am currently on a business trip and I will check this out on the weekend. Sorry for the late response…
Spartacus
I worked on your card some more…let me know
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
primary: '{{ ''Online'' if states(config.entity) == ''on'' else ''Offline'' }}'
icon: '{{"mdi:wifi" if states(config.entity)=="on" else "mdi:wifi-off"}}'
entity: light.pc_lights
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''red'' }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 40px;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 green }
70% {box-shadow: 0 0 0 5px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% else %}
{% endif %}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card {
margin-left: -2px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color: white;
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{ ''Motor läuft'' if states(config.entity) == ''on'' else ''Motor aus'' }}'
icon: >-
{{"mdi:engine-outline" if states(config.entity)=="on" else
"mdi:engine-off-outline"}}
entity: light.pc_lights
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''grey'' }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 38px;
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card {
margin-left: -20px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color: white;
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{states(entity)}} %'
icon: >-
{{"mdi:battery-charging-high" if
states("light.pc_lights")=="on" else
"mdi:battery-10" if states(entity)<"10"else "mdi:battery-20" if
states(entity)<"20"else "mdi:battery-30" if states(entity)<"30"else
"mdi:battery-40" if states(entity)<"40"else "mdi:battery-50" if
states(entity)<"50"else "mdi:battery-60" if states(entity)<"60"else
"mdi:battery-70" if states(entity)<"70"else "mdi:battery-80" if
states(entity)<"80"else "mdi:battery-90" if states(entity)<"90"else
"mdi:battery-charging-100" if states(entity)<"100"}}
entity: sensor.basement_sensor
multiline_secondary: false
layout: vertical
icon_color: >-
{{ 'red' if states(entity)<"10" else 'amber' if
((states(config.entity)=="charging")or
states(config.entity)<"70")else ('green' if ((states(config.entity) ==
states(config.entity)or
states(entity)<"80"))) }}
fill_container: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 40px;
{% if is_state(config.entity,'charging') %}
{
--shape-animation: ping 2s infinite;
}
@keyframes ping
{
0% { box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 0.7);
}
100% { box-shadow: 0 0 5px 15px transparent;
}
{% endif %}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card
{
margin-left: -20px;
border: none !important;
{% if is_state(config.entity,'charging') %}
--card-primary-color:;
--card-secondary-color:#00CC00;
{%else%}
--card-primary-color:;
--card-secondary-color:;
{% endif %}
}
- type: custom:mushroom-template-card
primary: '{{ ''Geöffnet'' if states(config.entity) == ''on'' else ''Verschlossen'' }}'
icon: >-
{{"mdi:car-door" if states(entity)=="on" else
"mdi:car-door-lock"}}
entity: light.bed_lights
multiline_secondary: false
layout: vertical
icon_color: '{{ ''amber'' if states(config.entity) == ''on'' else ''green'' }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 38px;
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card
{
margin-left: -20px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
- type: custom:mushroom-template-card
primary: >-
{{ 'Heinzung an' if states(config.entity) == 'on' else 'Heizung aus'
}}
icon: >-
{{"mdi:radiator" if states(config.entity)=="on" else
"mdi:radiator-off"}}
entity: light.bed_lights
multiline_secondary: false
layout: vertical
icon_color: '{{ ''red'' if states(config.entity) == ''on'' else ''grey'' }}'
fill_container: false
secondary: >-
{% if states(config.entity)=="on" %} {{'Temperatur:'}}
{{(states("entity)|int)}}
{{"°C"}} {%endif%}
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 38px;
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card
{
margin-left: -20px;
--icon-symbol-size: 20px;
--icon-size: 40px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:;
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
card_mod:
style: |
ha-card {
border: none !important;
}
Hi @LiQuid_cOOled ,
thank you for the update. I checked it out, an it is working so far, but there are two thinks, I do not understand:
- type: custom:mushroom-template-card
primary: '{{ ''Online'' if states(config.entity) == ''on'' else ''Offline'' }}'
icon: '{{"mdi:wifi" if states(config.entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''red'' }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 40px;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 green }
70% {box-shadow: 0 0 0 5px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% else %}
{% endif %}
mushroom-state-info$: |
.container {
--card-primary-font-size: 12px;
}
.: |
ha-card {
margin-left: -2px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color: white;
{%else%}
--card-primary-color:#7E7E7E;
{% endif %}
}
The line “set light_state…” is different to the other lines "… {% if is_state(config.entity,‘charging’) %} " and I do not really understand is?
I do also not understand the difference between “states(config.entity)” and “states(entity)”. I never saw config.entity before.
Can you please explain it to me?
Many thanks for your excellent work
Spartacus
This is just another way to write an IF ELSE statement. It works well if there are multiple states. For example:
icon_color: |
{% set light_state = states('light.pc_lights') %}
{% if light_state == 'on' %} green
{% elif light_state == 'off' %} yellow
{% elif light_state == 'unknown' %} red
{% endif %}
As for config.entity, it’s just the method I use. I found that entity doesn’t always work for me. Someone may know the difference.