[HELP] change card color when entity is unlocked

[didi767]

Hi Everyone,

I have the following syntax that shows me the lock details and I want to add the feature that if the lock is open/unlock the whole card would change color to red.
any suggestions?

Thanks!

- type: horizontal-stack
      cards:
      - type: custom:card-modder
        card:
          type: entities
          title: Door
          show_header_toggle: false
          state_color: true
          
          entities:
            - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
              name: Battery level
            - entity: lock.schlage_touchscreen_deadbolt_door_lock
              name: Front Door Lock
              secondary_info: show-state
              secondary_info: last-changed
        style:
            background-image: url("/local/cardbackK.png")
            background-repeat: no-repeat
            background-color: rgba(50,50,50,0.6)
            background-size: 100% 68px
            border-radius: 20px
            border: solid 1px rgba(100,100,100,0.3)
            box-shadow: 3px 3px rgba(0,0,0,0.4)
            color: rgb(220, 230, 247)
            --st-font-size-xl: 15px
            --st-font-size-m: 18px
            --st-font-size-title: 7px
            --st-font-size-sensors: 15px
            --st-spacing: 2px

[didi767]

So this is how it looks like now:

[tobi-bo]

Hi, you can use the addon lovelace-card-mod for this.

thomasloven/lovelace-card-mod

With this you can use templates when styling cards. You find some examples there for exactly what you want.

style: |
  ha-card {
    background: {% if is_state('light.bed_light', 'on') %} green {% endif %};
  }

[didi767]

tried… but I get an error. this is the code I’ve tried:

- type: horizontal-stack
      cards:
      - type: custom:card-mod
        card:
          type: entities
          title: Door
          entities:
            - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
              name: Battery level
            - entity: lock.schlage_touchscreen_deadbolt_door_lock
              style: |
                ha-card {
                  background: {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'unlocked') %} red {% endif %};
                }
              name: Front Door Lock
              secondary_info: show-state
              secondary_info: last-changed
        style:
            background-image: url("/local/cardbackK.png")
            background-repeat: no-repeat
            background-color: rgba(50,50,50,0.6)
            background-size: 100% 68px
            border-radius: 20px
            border: solid 1px rgba(100,100,100,0.3)
            box-shadow: 3px 3px rgba(0,0,0,0.4)
            color: rgb(220, 230, 247)
            --st-font-size-xl: 15px
            --st-font-size-m: 18px
            --st-font-size-title: 7px
            --st-font-size-sensors: 15px
            --st-spacing: 2px

and this is the error:

[tobi-bo]

Hmm, I think you don’t need the custom:card-mod card. Just use the entities card. Also, to style a single entity inside entities card you have to use the :host css class. I just tried this and it works:

    - type: entities
      entities:
        - entity: light.schlafzimmer_decke
          style: |
            :host {
              color: {% if is_state('light.schlafzimmer_decke', 'on') %} green {% endif %};
            }

Maybe, you have the wrong indention, too. The value ‘cards’ for the horizontal-stack card has to be on the same level as ‘type’.
So, I think this should work for you:

    - type: horizontal-stack
      cards:
        - type: entities
          title: Door
          entities:
            - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
              name: Battery level
            - entity: lock.schlage_touchscreen_deadbolt_door_lock
              style: |
                :host {
                  background: {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'unlocked') %} red {% endif %};
                }
              name: Front Door Lock
              secondary_info: show-state
              secondary_info: last-changed
          style:
            background-image: url("/local/cardbackK.png")
            background-repeat: no-repeat
            background-color: rgba(50,50,50,0.6)
            background-size: 100% 68px
            border-radius: 20px
            border: solid 1px rgba(100,100,100,0.3)
            box-shadow: 3px 3px rgba(0,0,0,0.4)
            color: rgb(220, 230, 247)
            --st-font-size-xl: 15px
            --st-font-size-m: 18px
            --st-font-size-title: 7px
            --st-font-size-sensors: 15px
            --st-spacing: 2px

Be aware of the indention, it is important in yaml.

[didi767]

Hi tobi-bo,

Unfortunately it doesn’t work it just shows the regular entities card and it does open the lock but nothing changes visually (I removed the cad-modder as you suggested)

[tobi-bo]

Hi didi,

too bad
I tried it with a light entity and it worked for me when changing the foreground color, like this:

        - type: entities
          entities:
            - entity: light.schreibtisch_mucki
              style: |
                :host {
                  color: {% if is_state('light.schreibtisch_mucki', 'on') %} red {% endif %};
                }
              name: Some Light
              secondary_info: show-state
              secondary_info: last-changed

Actually it’s not working, when using the background-color, so there seems to be something wrong with the css part.
Can you try it with the color style instead, to see if it is generally working?

[tobi-bo]

I played around a bit and i got it working to change the background-color when changing it for the whole entities card, so this worked for me:

        - type: entities
          entities:
            - entity: light.schreibtisch_mucki
              name: Some Light
              secondary_info: show-state
              secondary_info: last-changed
          style: |
            ha-card {
              background: {% if is_state('light.schreibtisch_mucki', 'on') %} red {% endif %};
            }

Maybe this is an option, I haven’t figured out how to change the background color of a single entity row within an entity card.

[didi767]

It works! I will leave it this way if there isn’t an option to keep the original colors I have for the rest of the cards.
so for the thermostat cards I used the card-modder to have this design to them:

the code is this:

- type: horizontal-stack
      cards:
      - type: custom:card-modder
        card:
          # column_width: calc(50% / 2)
          type: custom:simple-thermostat
          entity: climate.downstairs
          step_size: 1
          step_layout: row
          sensors:
            - entity: sensor.downstairs_humidity
              name: Humidity
            - entity: sensor.downstairs_ac_fan
              name: Fan
          control:
            hvac:
              some_mode: false
              another_mode: false
              'off':
                name: Make it cold
                icon: false
              'on':
                name: false
                icon: mdi:whitewalker
            preset:
              away: true
              none:
                name: something
        style:                 
            background-image: url("/local/cardbackK.png")
            background-repeat: no-repeat
            background-color: rgba(50,50,50,0.6)
            background-size: 100% 68px
            border-radius: 20px
            border: solid 1px rgba(100,100,100,0.3)
            box-shadow: 3px 3px rgba(0,0,0,0.4)
            color: rgb(220, 230, 247)
            --st-font-size-xl: 15px
            --st-font-size-m: 18px
            --st-font-size-title: 10px
            --st-font-size-sensors: 13px
            --st-spacing: 2px
      - type: custom:card-modder
        card:
          type: custom:simple-thermostat
          entity: climate.upstairs
          step_size: 1
          step_layout: 'row'
          label temperature: Temp
          sensors:
            - entity: sensor.upstairs_humidity
              name: Humidity
            - entity: sensor.upstairs_ac_fan
              name: Fan
          control:
            hvac:
              some_mode: false
              another_mode: false
              'off':
                name: Make it cold
                icon: false
              'on':
                name: false
                icon: mdi:whitewalker
        style:                 
            background-image: url("/local/cardbackK.png")
            background-repeat: no-repeat
            background-color: rgba(50,50,50,0.6)
            background-size: 100% 68px
            border-radius: 20px
            border: solid 1px rgba(100,100,100,0.3)
            box-shadow: 3px 3px rgba(0,0,0,0.4)
            color: rgb(220, 230, 247)
            --st-font-size-xl: 15px
            --st-font-size-m: 18px
            --st-font-size-title: 10px
            --st-font-size-sensors: 13px
            --st-spacing: 2px

the code for the lock entities is currently:

- type: horizontal-stack
      cards:
      # - type: custom:card-modder
      #   card:
          - type: entities
            entities:
              - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
                name: Battery level
              - entity: lock.schlage_touchscreen_deadbolt_door_lock
                name: Front Door Lock
                secondary_info: show-state
                secondary_info: last-changed
            style: |
              ha-card {
                background: {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'unlocked') %} red {% endif %};
              }
        # style:
        #   background-image: url("/local/cardbackK.png")
        #   background-repeat: no-repeat
        #   background-color: rgba(50,50,50,0.6)
        #   background-size: 100% 68px
        #   border-radius: 20px
        #   border: solid 1px rgba(100,100,100,0.3)
        #   box-shadow: 3px 3px rgba(0,0,0,0.4)
        #   color: rgb(220, 230, 247)
        #   --st-font-size-xl: 15px
        #   --st-font-size-m: 18px
        #   --st-font-size-title: 7px
        #   --st-font-size-sensors: 15px
        #   --st-spacing: 2px

would it be possible to have the same effect?

[didi767]

Still didn’t make it work. here it is, side by side, the regular card next to the card-modder when the lock is open:

still, I’m not sure if it is possible to get the same “all red card” status.
the current code:

- type: horizontal-stack
      cards:
      - type: entities
        entities:
          - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
            name: Battery level
          - entity: lock.schlage_touchscreen_deadbolt_door_lock
            name: Front Door Lock
            secondary_info: show-state
            secondary_info: last-changed
        style: |
          ha-card {
            background: {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'unlocked') %} red {% endif %};
          }
      - type: custom:card-modder
        card:
          type: entities
          title: Door
          show_header_toggle: false
          state_color: true
          entities:
            - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
              name: Battery level
            - entity: lock.schlage_touchscreen_deadbolt_door_lock
              name: Front Door Lock
              secondary_info: show-state
              secondary_info: last-changed
        style:
          background-image: url("/local/cardbackK.png")
          background-repeat: no-repeat
          background-color: rgba(50,50,50,0.6)
          background-size: 100% 68px
          border-radius: 20px
          border: solid 1px rgba(100,100,100,0.3)
          box-shadow: 3px 3px rgba(0,0,0,0.4)
          color: rgb(220, 230, 247)
          --st-font-size-xl: 15px
          --st-font-size-m: 18px
          --st-font-size-title: 7px
          --st-font-size-sensors: 15px
          --st-spacing: 2px

[tobi-bo]

The problem is, if you have a background-image style the background-color has no effect, because it is overlayed by the image. The solution is, to set the background-image only when there is no color, like this:

        - type: entities
          entities:
            - entity: light.schreibtisch_mucki
              name: Some Light
              secondary_info: show-state
              secondary_info: last-changed
          style: |
            ha-card {
              {% if is_state('light.schreibtisch_mucki', 'off') %}
              background-image: url("/local/pictures/njoy.png");
              {% endif %}
              background-repeat: no-repeat;
              background-size: 100% 68px;
              background-color: {% if is_state('light.schreibtisch_mucki', 'on') %} red {% else %} rgba(50,50,50,0.6) {% endif %};
              border-radius: 20px;
              border: solid 1px rgba(100,100,100,0.3);
              box-shadow: 3px 3px rgba(0,0,0,0.4);
              color: rgb(220, 230, 247);
              --st-font-size-xl: 15px;
              --st-font-size-m: 18px;
              --st-font-size-title: 7px;
              --st-font-size-sensors: 15px;
              --st-spacing: 2px;
            }

It works in my setup with the light.
Be aware, that you have to use the opposite state at the background-image condition, which is ‘off’ in my scenario.
Never mind about the image path in my example, it’s just a random image from my installation

Maybe it’s an idea, to use two images, one for every state, and switch between them, instead of the background-color.

[didi767]

not working for me it’s exactly the same code… I’m really confused. the only thing that changes this time is the lock color (from blue to yellow when open):

- type: horizontal-stack
      cards:
      - type: entities
        entities:
          - entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
            name: Battery level
          - entity: lock.schlage_touchscreen_deadbolt_door_lock
            name: Front Door Lock
            secondary_info: show-state
            secondary_info: last-changed
        style: |
          ha-card {
            {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'locked') %}
            background-image: url("/local/cardbackK.png");
            {% endif %}
            background-repeat: no-repeat;
            background-size: 100% 68px;
            background-color: {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'unlocked') %} red {% else %} rgba(50,50,50,0.6) {% endif %};
            border-radius: 20px;
            border: solid 1px rgba(100,100,100,0.3);
            box-shadow: 3px 3px rgba(0,0,0,0.4);
            color: rgb(220, 230, 247);
            --st-font-size-xl: 15px;
            --st-font-size-m: 18px;
            --st-font-size-title: 7px;
            --st-font-size-sensors: 15px;
            --st-spacing: 2px;
          }

[didi767]

IT WORKS!!! sorry… I checked the wrong card (I have two of them next to each other to compare code)
Thank you so much for your time @tobi-bo! I really appreciate it!

[didi767]

Hey @tobi-bo, for some reason I cannot change the size of the texts inside the card. does the usage of “ha-card” disables this option?

Thanks,

[tobi-bo]

Hi, hmmm, how did you try to change the size? I actually did not know it, so I often use a css/html debugger to investigate those things

[didi767]

I just left it as is for now