Style whole entities card based on state of entity within

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!

Card-mod thread

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.

follow instructions to install card_mod:

then just add this to your entity card:

  style: |
    ha-card {
      background: red;

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.

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:

      - value: 'on'
            - 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 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:

A general schema for a “binary_sensor”:

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

Thank you so much! I was close but I had

'' == 'on'

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