Lovelace using card-mod, conditional formatting

Configuration Frontend
1

I’m really new to programming, both with YAML and CSS. I’ve been able to successfully code a few cards with similar situations, but for some reason can’t get this one to work. I’m not sure what the problem is. All I want is if the door is locked, for the border to turn green. Any other state (ie unlocked) and it should be red. But all I get is red, no matter what the state is. I’ve tried two different versions of the code, and got the same result with both of them. Can anyone see what the problem is?

Version 1:

cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: lock.en_front_door_lock
    style: |
      :host {
       --ha-card-border-color: {% if is_state('lock.en_front_door_lock', 'Locked') %} green {% else %} red {% endif %};
      }
    show_state: true
    icon_height: 40px
    name: Front Door

Version 2:

cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: lock.en_front_door_lock
    style: |
      :host {
         --ha-card-border-color: 
          {% set sensor = states('lock.en_front_door_lock') %}
          {% if sensor == 'Locked' %}green
          {% else %}red
          {% endif %}
        } 
    show_state: true
    icon_height: 40px
    name: Front Door

image
image895×579 25.5 KB

2

Wondering if you ever got this to work?. I have searched high and low in the forum and cannot find any examples of conditional formatting using the card-mod. It would be sweet if I could change color/font/text based on the state of a sensor.

3

You can format via card_mod using conditions, but i only used it for integer values in the past.
Maybe you can use it for string also. Haven’t tried it.

Maybe the " ; " is missing in your code. You have to end a line with it to separate the commands.

                  opacity:
                    {% if states('sensor.dwd_pollenbelastung_roggen_today') | int >= 1 %}
                    1.0
                    {% else %}
                    0.3
                    {% endif %}
                    ;

or

                  color: 
                    {% if states('sensor.openweathermap_feels_like_temperature') | int <= 10 %}
                    lightblue;
                    {% elif states('sensor.openweathermap_feels_like_temperature') | int >= 25 %}
                    #ff2929;
                    {% else %}
                    #4ad032;
                    {% endif %}