🔹 Card-mod - Add css styles to any lovelace card

Dan_Hajduk · May 28, 2022, 6:45pm

Hi All,
I’m trying to apply style to surveillance-card.

The HTML looks like this:

<surveillance-card>
  <div class="container">
    <div class="thumbs">
         ......
    </div>
    <div class="mainImage">
       .....
    </div>
  </div>

And this is the yaml config

card_mod:
  style: |
    surveillance-card .container .mainImage {
      position: fixed;
      top: 10px;
    }

I’m trying to change the mainImage div

What am I doing wrong?

Thanks

Ildar_Gabdullin · May 28, 2022, 6:54pm

Good that you achieved what you needed.
Just a personal opinion - I would prefer a simpler syntax:

      mmp-button:nth-of-type(1) {
        {% if is_state("automation.follow_me","on") %}
        color: var(--state-icon-active-color);
        {% elif is_state("media_player.kitchen","unavailable") %}
        color: red;
        {% else %}
        color: ????????????????;
        {% endif %}
      }

And now you can see that in you expression there is no a default color.
“iif” expression is compact but sometimes may be difficult to trace…

Recte · May 28, 2022, 9:28pm

I know there is no default color. I did that intentionally cause I have HA set to auto theme dark/light and it would take me extra conditions to cover the dark and light situations. Now it just follows HA.

Nevertheless thanks for pointing that out.

Ildar_Gabdullin · May 28, 2022, 11:20pm

Could you explain?
From a CSS point of view, if some property is undefined it will cause an error.

Recte · May 29, 2022, 9:05am

Sure, I am happy to explain my thoughts on this.

I am more of a scripter than a CCS kind of person, but totally get your point from a CCS perspective. I however don’t think it will end up in an error and here is why.

Basically I just said to card-mod: If this, then overwrite what HA does with my preference. As a result, of not telling what to do else, nothing happens when this is not true, so HA does what it always does.

From a scripting perspective I am not familiar with an obligation to use else unless you want to do something in that else-situation. In the specific situation I do have an else situation that I want to cover, being the situation where the speaker isn’t available. But if it is available, I just want HA to use its default color.

Does this make sense?

For the sake of completeness. At first I did cover the else-situation, simply because I like to be in control of what happens. This however resulted in an unwanted text color when HA toggled in the opposite theme. Maybe I just used the wrong variable, I don’t know anymore.

Anyway, I decided to just give the else situation back in control of HA by not determining the text-color if the iif condition was not true. I however started with the traditional if then else structure, since iif wasn’t available back then, and I still use it when the template is more complex.

Ildar_Gabdullin · May 29, 2022, 9:12am

If you need to let HA to decide - use this:

      mmp-button:nth-of-type(1) {
        {% if is_state("automation.follow_me","on") %}
        color: var(--state-icon-active-color);
        {% elif is_state("media_player.kitchen","unavailable") %}
        color: red;
        {% endif %}
      }

instead if:

      mmp-button:nth-of-type(1) {
        color: {% if is_state("automation.follow_me","on") -%}
        var(--state-icon-active-color)
        {%- elif is_state("media_player.kitchen","unavailable") -%}
        red
        {%- endif %};
      }

1st variant - no style, HA decides what to do.
2nd variant - “color: nothing”, an error.

Recte · May 29, 2022, 9:16am

Fair enough.
The reason for my current code is that I started with an else that I removed later-on. Good tip, I’ll improve my code on that

arganto · May 30, 2022, 2:30pm

As I dont have this card, please provide a screenshot of code-inspector/developer tools dom of this part. Most probably there are some shadow roots as well.

e-raser · May 31, 2022, 7:23pm

How can I combine this with your other styling (have the dynamic badges together with rounded edges)?

This does NOT work:

      - entity: sensor.season
        name: Jahreszeit
        icon: mdi:home
        style: |
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          :host {
            {% set season = states(config.entity) %}
            {% set icon =
              {
                'winter':'mdi:snowflake',
                'spring':'mdi:flower',
                'summer':'mdi:sun',
                'autumn':'mdi:leaf'
              } %}
            {% set icon_color =
              {
                'winter':'rgb(138,180,248)',
                'spring':'rgb(106,168,79)',
                'summer':'rgb(0,0,0)',
                'autumn':'rgb(255,126,0)'
              } %}
            {% set border_color =
              {
                'winter':'rgb(138,180,248)',
                'spring':'rgb(106,168,79)',
                'summer':'rgb(230,145,56)',
                'autumn':'rgb(255,126,0)'
              } %}
            {% set back_color =
              {
                'winter':'rgb(255,255,255)',
                'spring':'rgb(216,251,135)',
                'summer':'rgb(255,242,204)',
                'autumn':'rgb(252,229,205)'
              } %}
            --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
            --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
            --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
            --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
          }

Output is without rounded corners:
grafik

Ildar_Gabdullin · May 31, 2022, 7:34pm

      card_mod:
        style:
          element $: |
            sub-element {
              ...
            }
          .: |
            :host {
              ...
            }

e-raser · May 31, 2022, 7:38pm

Wow! You are awesome. And so quick!

Those minor adjustments did the trick. If somebody cares/finds this in future… here`s what I used (working):

      - entity: sensor.season
        name: Jahreszeit
        icon: mdi:home
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          .: |
            :host {
              {% set season = states(config.entity) %}
              {% set icon =
                {
                  'winter':'mdi:snowflake',
                  'spring':'mdi:flower',
                  'summer':'mdi:sun',
                  'autumn':'mdi:leaf'
                } %}
              {% set icon_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(0,0,0)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set border_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(230,145,56)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set back_color =
                {
                  'winter':'rgb(255,255,255)',
                  'spring':'rgb(216,251,135)',
                  'summer':'rgb(255,242,204)',
                  'autumn':'rgb(252,229,205)'
                } %}
              --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
              --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
              --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
              --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
            }

grafik

e-raser · May 31, 2022, 8:16pm

Example 2 does not work for me: the badge is still shown even the state of the entity is 0 (zero)

I want to combine: show/hide + round corners

      - entity: sensor.problems_any
        name: Probleme
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          .: |
            :host {
              {% if states(config.entity) | int(0) > 0 -%}
              # problems (> 0)
              display: inline-block;
              color: red;
              --label-badge-text-color: red;
              --label-badge-red: red;
              --label-badge-background-color: yellow;
              {% else %}
              # no problems (0)
              display: none;
              {% endif %}
            }

Seems like the display: none; is simply ignored

e-raser · May 31, 2022, 8:31pm

Can we combine this like this?

if true: show specific icon
else   : show value (number) of entity

Looks like once an icon has been set, it’s not possible to show a value again. So what I tested: either only icons or only values.

Would love to see me proving wrong but I tested everything, no chance.

Ildar_Gabdullin · May 31, 2022, 8:50pm

Do not use this kind of commenting inside strings.
Get rid of it - see if it changes anything.

Ildar_Gabdullin · May 31, 2022, 8:59pm

Agree - this is what I observed.

e-raser · May 31, 2022, 9:04pm

I didn’t have it, just in this forums. So yes, I tried and no, it changed nothing
Anyway, I’d go for an icon styling instead. Unfortunately…

…this is what I feared. So I can’t have my little “mdi:check-circle” icon in green if everything’s fine but show the number if it isn’t. Too bad, but it is what it is right.
Maybe you want to add this information (either icons or values - no mix possible) in your “Dynamic icon” post?

So my last badge question is:

Can we add a label badge (this text:
grafik
), if the entity does not provide one (does not have an unit)?

e-raser · May 31, 2022, 9:33pm

Wow, that’s completely crazy:

I use the exact same code as 2 hours before…

      - entity: sensor.season
        name: Jahreszeit
        icon: mdi:home
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          .: |
            :host {
              {% set season = states(config.entity) %}
              {% set icon =
                {
                  'winter':'mdi:snowflake',
                  'spring':'mdi:flower',
                  'summer':'mdi:sun',
                  'autumn':'mdi:leaf'
                } %}
              {% set icon_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(0,0,0)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set border_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(230,145,56)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set back_color =
                {
                  'winter':'rgb(255,255,255)',
                  'spring':'rgb(216,251,135)',
                  'summer':'rgb(255,242,204)',
                  'autumn':'rgb(252,229,205)'
                } %}
              --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
              --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
              --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
              --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
            }

but now get another result:

grafik

That’s the default icon. The spring one (mdi:flower) is not applied.

How can this be possible? That’s pretty unbelievable - and unreliable.

It’s the same on different devices so checking browser developer mode logs won’t be helpful I guess. Absolutely no idea where to start. And yes, I also removed all the # in that section…

Now, if I completely remove this part:

          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }

…the icon is correct!
grafik

I don’t get it. It was working already, squad badge and dynamic icons. Crazy.

Ildar_Gabdullin · May 31, 2022, 10:12pm

Probably it is possible with a bit of efforts:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        name: show value
  - type: custom:badge-card
    badges:
      - entity: sensor.xiaomi_cg_1_temperature
        name: dynamic icon
        icon: mdi:fire
        card_mod:
          style:
            ha-state-label-badge $:
              ha-label-badge $: |
                .badge-container .label-badge .value::after {
                  {% if is_state('input_boolean.test_boolean','on') %}
                    content: "{{states(config.entity)}}";
                  {% endif %}
                }   
              .: |
                ha-label-badge ha-state-icon {
                  {% if is_state('input_boolean.test_boolean','on') %}
                    display: none;
                  {% endif %}
                }

Ildar_Gabdullin · May 31, 2022, 10:57pm

You can, results may differ on different browsers:

type: custom:badge-card
badges:
  - entity: sensor.xiaomi_cg_1_co2
    name: default
  - entity: sensor.ha_count_sensor
    name: added UoM
    card_mod:
      style:
        ha-state-label-badge $ ha-label-badge $: |
          .badge-container .label-badge .value::after {
            content: "my UoM";
            background-color: var(--ha-label-badge-color, var(--primary-color));
            color: var(--ha-label-badge-label-color, white);
            border-radius: 1em;
            padding: 9% 16% 8%;
            font-weight: 500;
            overflow: hidden;
            position: absolute;
            bottom: -1em;
            left: -0.2em;
            right: -0.2em;
            line-height: 1.05em;
            font-size: 0.5em;
          }

But you better create a template sensor with a UoM.

arganto · June 1, 2022, 3:00pm

Does anyone know, why and how mod-card around another card (even without card_mod, etc.) is changing the order of the card(s) in the dashboard? And how to avoid this?