Hey. I need to integrate a elseif statement into my lovelace-card-mod style. I want to react to the window sensors. And they know: open, tilted and closed. But I only manage to react to two conditions:
card_mod:
style: |
ha-card {
background-color: {{ '#006400' if is_state('sensor.hmip_srh_007_state', 'closed') else '#ff1c1c' }};
}
Does anyone know a solution to this?
us state() instead
{%- set sensor = states('sensor.hmip_srh_007_state') %}
{%- if sensor == 'open' %}#ff1c1c
{%- elif sensor == 'tilted' %}#123456
{%- else %}#006400
{%- endif %}
Thank you! But something doesnât seem to be correct yet. Is that maybe because the HACS plugin doesnât know these parameters? The button remains without color and is normally displayed as a button.
type: button
tap_action:
action: none
entity: sensor.hmip_srh_007_state
name: Name
show_state: true
show_icon: false
icon_height: 45px
hold_action:
action: none
card_mod:
style: |
ha-card {%- set sensor = states('sensor.hmip_srh_007_state) %}
{%- if sensor == 'open' %}#ff1c1c
{%- elif sensor == 'tilted' %}#FF7F00
{%- else %}#006400
{%- endif %}
Because you left out the property you are coloring
Of cause! Sorry! This is how it works:
card_mod:
style: |
ha-card {
background-color:
{%- set sensor = states('sensor.hmip_srh_007_state') %}
{%- if sensor == 'open' %}#ff1c1c
{%- elif sensor == 'tilted' %}#FF7F00
{%- else %}#006400
{%- endif %}
}
Thank you very much!
Sorry to revive an old thread here - but I felt the topic is quite similar to the problem I have.
I want to draw a red border around the temperature card if the heating is on, draw a white border when the heating is off and the door is open. When the heating is off and door is closed, no border.
(Iâve an automation that turns the heating off when the door is open)
The white border appears as intended, however the red border when the heating is on isnât⌠Here is the card config as I have it now:
type: custom:mini-graph-card
name: Living Room
entities:
- entity: sensor.average_mi_li_room_temperature
line_color: blue
card_mod:
style: |
ha-card {
border:
{%- set sensor = states('input_boolean.living_room_temp_vs_heating_set_point') %}
{%- set sensor2 = states('binary_sensor.living_room_door_sensor_contact') %}
{%- if sensor and sensor2 == 'off' %}
{%- elif sensor == 'on' and sensor2 == 'off' %}solid 3px red
{%- elif sensor == 'off' and sensor2 == 'on' %}solid 3px white
{%- else %}
{%- endif %}
Edit: found the prroblem, had to change the first if 
need to change to {%- if sensor == off and sensor2 == âoffâ %}
Iâm trying to do something similar, but with a gauge card and changing the border color based on several numerical values. The difference is I would like to use less than or greater than ( < or > ) but I canât find a way to make it work with CSS. Is using less than or greater than not possible with card mod?
It works, this is the YAML of my HACS card, itcolors the border of the card when there is an update
type: tile
entity: sensor.hacs
color: blue
card_mod:
style: |
ha-card {
{% if states('sensor.hacs') | float > 0 %}
border: solid 3px orange;
{% else %}
border: ;
{% endif %}
}
Thanks! If you donât mind, I have two quick questions:
What is âfloatâ? Is it something thatâs part of the code to get the greater than to work, or is it saying âif float is greater than 0â?
And how come sometimes I see card-mod examples like yours that have "ha-card { " , but other times they have ":host { "?
Iâm not a Jinja ninja, so really donât know Searching through the forums I saw that the more knowledgeable people here said that you need to convert the state of an entity (which provides numerical values) into a float, in order to perform mathematical comparisons.
About card_mod, I really donât know css, so Iâm just following what I see on the forums, and find what works by trial and error.
float converts a string to a number so you can use the number to perform logic.
Oh, ok. Thanks!
No worries, trial and error is how Iâve learned pretty much everything about Home Assistant. There really needs to be a Home Assistant University or something.
trying to do something similar but I want the logic to be based on a different sensor.
i.e. to follow your example it would be NOT be based on sensor.hacs but for example sensor.battery_power
Cannot seem to get it to work, same syntax works fine if i use
states(config.entity)
This is really helped me a lot, I was locking for the background colour depends on zone and this template work as a charm. Just changed the sensor the colour codes
card_mod:
style: |
ha-card {
background-color:
{%- set sensor = states('device_tracker.oneplus_8_pro') %}
{%- if sensor == 'home' %}rgba(6, 168, 3, 0.2);
{%- elif sensor == 'Queensmead school' %}rgba(24, 192, 222, 0.4);
{%- else %}rgba(41, 4, 4, 0.5);
{%- endif %}
}
Hey everyone! I am trying to use a combination of mod-card, mushroom cards, and the custom variables component to highlight the outside of an icon when the variable == âOverviewâ.
I was able to get the color condition working within the mushroom card to turn the icon blue when the variable == âOverviewâ but am having trouble getting it working within the card-mod section of the code.
type: custom:mushroom-template-card
primary: Overview
secondary: ''
icon: mdi:home
entity: var.floor_select_var
icon_color: '{{ ''blue'' if states(entity) == ''Overview'' else ''white'' }}'
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: call-service
service: script.overview_select
target: {}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px solid green
}
SO - I would like the bottom part of that code to accomplish-
border: 2.5px solid green IF states(entity) == âOverviewâ
Could someone please tell me what is wrong with this: (The coloring code works, the error is confusing me).
card_mod:
style: |
ha-card {
background:
{%- set sensor = states('binary_sensor.grid_status') %}
{%- if sensor == 'on' %} color-mix(in srgb, var(--white-color) 10%, var(--card-background-color));
{%- else %} color-mix(in srgb, var(--red-color) 50%, var(--card-background-color));
{%- endif %}
}
The following show up 1372 times in the past 2 days.
I have a kind of the same but different problem 
I would like to color a card border when hovering it.
But that can not be done with states if I use a card_mod class.
Example:
card_mod:
class: custom-button-card-hover
style: |
#info {
{% if not( is_state('light.voorkamer', 'on') ) %}
class: custom-button-card-hover-on
{% else %}
class: custom-button-card-hover-off
{% endif %};
ha-card:hover.custom-button-card-hover-on {
box-shadow: rgba(106, 149, 214, 1.0) 0px 0px 0px 1px !important;
}
ha-card:hover.custom-button-card-hover-off {
box-shadow: rgba(106, 149, 214, 1.0) 0px 0px 0px 4px !important;
}
It looks like youâre just making up fields by adding class:. Are you sure card mod supports that field?
Yes, you can use âclassâ option within âcard_modâ.
But it is not possible to use âclassâ as a style like that person does.
Means - this is normal and supported:
card_mod:
class: custom-button-card-hover
This is wrong:
style: |
#info {
{% if not( is_state('light.voorkamer', 'on') ) %}
class: custom-button-card-hover-on
{% else %}
class: custom-button-card-hover-off
{% endif %};
Also, the âclassâ option does not support templates (there is a FR for this on github).