🔹 Card-mod - Super-charge your themes!

Hasshun · February 24, 2021, 12:27pm

Thanks for helping.
If you mean by de-intending this below, then I tried. ( for the record: ain’t no coding wizard here:))

    style: |
      host {
        {% if is_state('binary_sensor.window4', 'Open') %} 
        --label-badge-blue: '#03A9F4'; 
        {% endif %};
        {% if not is_state('binary_sensor.window4', 'Closed') %} 
        --label-badge-blue: '#fd79a8'; 
        {% endif %}; 
        color: #fff;
        }

As for the badges at the header, if I get it right “ha-state-label-badge” and “ha-label-badge” works if you want to change badges at the top of the dashboard. “host” is used in general to define badge customization. In short, I guess “ha-” cannot be used under picture-element card.

KTibow · February 24, 2021, 2:36pm

Here’s what I mean:

  - type: state-badge
    entity: binary_sensor.window4
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  color: #000 !important;
                }          
        .: |
          :host {
            {% if is_state('binary_sensor.window4', 'on') %} --label-badge-red: #03A9F4; {% endif %};
            {% if not is_state('binary_sensor.window4', 'off') %} --label-badge-red: #fd79a8; {% endif %}; 
            color: #fff;
          }

Hasshun · February 24, 2021, 9:52pm

Seems like if “entity” is not in line with “style” it refuses to show anything. But even if I correct it, nothing happens, only shows the original blue.
Should I not use the label-badge-blue instead of red? >> Though it’s still not working. :I

KTibow · February 25, 2021, 2:03am

What are you trying to do? What colors do you want, and when?

Hasshun · February 25, 2021, 6:38am

Originally I wanted state-badges to change color on event from preset color (this varies) to red. I saw from other posts the example how to create that at the header section and tried to reuse it under picture-element.

I asked the same question in an other topic and Ildar said that in case of binary sensors we must use label-badge-blue instead of red.

KTibow · February 25, 2021, 2:40pm

Which event?

Hasshun · February 25, 2021, 2:45pm

When state changes, like in my first post above, “on” to “off”.

          :host {
            {% if is_state('binary_sensor.window4', 'on') %} --label-badge-red: #03A9F4; {% endif %};
            {% if not is_state('binary_sensor.window4', 'off') %} --label-badge-red: #fd79a8; {% endif %}; 
            color: #fff;
          }

KTibow · February 25, 2021, 2:46pm

Well then why do you make it not off? That’s basically the same thing as on.

Hasshun · February 25, 2021, 2:51pm

You mean like this:

          :host {
            {% if is_state('binary_sensor.window4', 'off') %} --label-badge-red: #03A9F4; {% endif %};
            {% else %} --label-badge-red: #fd79a8; {% endif %}; 
            color: #fff;
          }

KTibow · February 25, 2021, 2:52pm

That would mean that if it is on, it should be #fd79a8. If that’s what you want, then that’s correct.

Hasshun · February 25, 2021, 2:55pm

Yes, that would be the point, but sadly it does not work, no matter which label-badge (-blue or -red) I use.
Is the problem with the code or the feasability inside picture-element?

KTibow · February 25, 2021, 2:59pm

To test whether it applies at all, try adding a display: none outside of the if statement in :host.

Hasshun · February 25, 2021, 7:58pm

Something just does not add up. None of the preferences inside host: seems to work, not even positioning.

thomasloven · February 25, 2021, 11:49pm

Until 40 minutes ago, styling picture elements had never been supported.

It is now, though. In card-mod 3.0.0.
Please re-read the readme. Lots of things have changed.

BradAU · February 26, 2021, 6:00am

Hi @thomasloven

Firstly, thanks for all the work you do on this and your other cards/plugins, a lot of us would have far more bland lovelace setups if it wasn’t for you.

I’ve just updated to 3.0.0 and have an odd behaviour, I read the updated readme about adding card_mod: before style: | and confirm those styles are being applied but ‘state’ color changes are not being applied to icons even though they’re outside of ‘style’;

I have a row of custom:button-cards as a header with the first showing day/night based on sun.sun, during the day the color changes based on the state of a binary_sensor from the openuv integration, this and the other buttons that change color depending on state are not working since the update.

Any assistance would be appreciated.

UPDATE: I’ve also confirmed it affects changing the icon color based on state on all custom:button-card instances with styling applied.

        - type: conditional
          conditions:
            - entity: sun.sun
              state: above_horizon
          card:
            type: custom:button-card
            card_mod:
              style: |
                ha-card {
                  background: rgba(0,0,0,0);
                  box-shadow: none;
                }
            entity: binary_sensor.protection_window
            show_name: false
            show_state: false
            aspect_ratio: 1/1
            color_type: icon
            color: auto
            icon: custom:sun
            size: 75%
            styles:
              card:
                - padding: 5%
            state:
              - value: "on"
                color: var(--sun)
              - value: "off"
                color: var(--header-text-color)
              - value: "unavailable"
                color: var(--black)
            tap_action:
              action: none
        - type: conditional
          conditions:
            - entity: sun.sun
              state: below_horizon
          card:
            type: custom:button-card
            card_mod:
              style: |
                ha-card {
                  background: rgba(0,0,0,0);
                  box-shadow: none;
                }
            aspect_ratio: 1/1
            color_type: icon
            color: var(--header-text-color)
            icon: custom:night
            size: 75%
            styles:
              card:
                - padding: 5%
            tap_action:
              action: none

thomasloven · February 26, 2021, 7:51am

This should be fixed with patch 3.0.1

Hasshun · February 26, 2021, 8:01am

Oh well, that explains a lot. I’ll dig deep into it.
Thank you thomasloven for your hard work!

BradAU · February 26, 2021, 8:37am

Yes all working, thanks again @thomasloven

tom_l · February 26, 2021, 9:17am

Thomas this class no longer seems to be working in the mobile app (ios) with 3.0.1:

  card-mod-theme: day
  card-mod-card: |
    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: url("/local/background/card_bg_Day.png");
    }

No card background or border is displayed. It is working on the desktop (Firefox).

Reverted to 2.0.3 and the card displays as expected again.

Hasshun · February 26, 2021, 9:17am

I saw a lot of examples with state-label, but when I apply the same customization below state.badge it don’t work for me. Are all the elements supported? THY