Style whole entities card based on state of entity within

Configuration Frontend
1

Hello,
I’m using an entities card with 2 entities. Now I’d like to color the background of the whole entities card based on the state of one of the entities within. Is there a way to do so?
Thank you for your help!

2

Card-mod thread

3

I’m sorry, I’m fairly new to HA, and I’m not sure what you’re trying to tell me. I do know of card mod, I can see how it could achieve my goals I just haven’t figured out how.

I have some idea that it would have to be achieved with some {{ or [[, I’m not yet fluent enough to have found the right syntax to yield a result - therefore my question here. I promise I spend a lot of time trying to figure it out on my own before I post here and I’m sorry if it’s something that’s obvious to anyone else.

4

follow instructions to install card_mod:

then just add this to your entity card:

card_mod: 
  style: |
    ha-card {
      background: red;
    }
5

Go to the post about card-mod in this forum

Then, at the end of first post you’ll see a link to a section containing the amazing work made by Ildar Gabdullin.

If you can’t find what you’re looking for there (very unlikely), then post in the same thread for help.

6

Thank you for pointing me in the right direction! I have added that to the entities card, removed the backgrounds of the button-cards within the entities card and it’s working for setting the background-color.

Now I just need the conditional statement that refers to the state of one of the entities. If it were a button-card and not an entities card, I’d write:

state:
      - value: 'on'
        styles:
          card:
            - background-color: red

But as I understand it, I now have to put it within the CSS card mod provides and add a conditional statement saying “if the state of binary_sensor.xxx is on, then set ha-card { … }”.
I feel like I’m only missing the right syntax my a few symbols… And like I’ve probably also missed a post in this thread that contains the answer… :frowning:

7

A general schema for a “binary_sensor”:

card_mod:
  style:
    xxx $ xxx $: |
      xxx {
        {% if is_state('binary_sensor.xxx','on') -%}
          css_attr_1: xxx;
          css_attr_2: xxx;
        {%- else -%}
          css_attr_1: xxx;
          css_attr_2: xxx;
        {%- endif %}
      }
8

Thank you so much! I was close but I had

'binary_sensor.xxx' == 'on'

and it took me forever to see that. :man_facepalming: