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

Ildar_Gabdullin · February 22, 2021, 9:37pm

Wrong indentation for the "style" keyword.
Picture elements card has its OWN "style" keyword for an element like “state-badge”. You are not supposed to use this "style" section for "card-mod".
Using the “style” you can do this non-card-mod styling:

  - type: picture-elements
    style: |
      ha-card { height: 120px !important; }
    image: /local/images/blue.jpg
    elements:
      - type: state-badge
        entity: sensor.cleargrass_1_co2
        style:
          color: orange
          '--label-badge-text-color': magenta
          '--label-badge-red': green
          '--label-badge-background-color': yellow
          top: 18%
          left: 10%

Hasshun · February 22, 2021, 10:08pm

Hi Ildar,

Originally, I wanted the color to be red on state-change, but simply trying to overwrite ‘–label-badge-red’ also did not succeed.

Checked in Chrome and Edge.

Ildar_Gabdullin · February 22, 2021, 10:40pm

I just realized that for "binary_sensor" we must use --label-badge-blue instead of --label-badge-red.

    badges:
      - entity: binary_sensor.updater
        name: 'some name'
        style: |
          :host {
            --label-badge-blue: cyan;
          }
      - entity: sensor.cleargrass_1_co2
        name: 'some name'
        style: |
          :host {
            --label-badge-red: cyan;
          }

Edited my first post about badges - 🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin.

Mariusthvdb · February 23, 2021, 3:33pm

Hi @Ildar_Gabdullin

in response to a rather old post of mine on conditional badges, Conditional badge at all possible? was written by @Troon

please add that to the Badge styling options it is rather powerful, and dearly missed in current core Badge usage

KTibow · February 23, 2021, 8:34pm

What do you mean? thomasloven is the developer of card_mod. Do you mean that they should make an example?

Ildar_Gabdullin · February 23, 2021, 8:49pm

Thank you for a good idea, here added a couple of examples (+ added a link here).

Badges: conditional display:

Example 1 - toggle “Show / Hide badge”:

  - title: badge
    path: badge
    badges:
      - entity: sensor.cleargrass_1_co2
        name: conditional
        style: |
          :host {
            {% if is_state('input_boolean.test_boolean','on') %}
            display: inline-block;
            {% else %}
            display: none;
            {% endif %}
          }
    cards:
      - type: entities
        entities:
          - entity: input_boolean.test_boolean
            name: Show badge

Example 2 - show a badge if the sensor is available:

      - entity: sensor.cleargrass_1_co2
        name: display if available
        style: |
          :host {
            {% if states(config.entity) in ['unavailable','unknown'] -%}
            display: none;
            {% else %}
            display: inline-block;
            {% endif %}
          }

… one more styling:

Badges: hidden name:

      - entity: sensor.cleargrass_1_co2
        name: transparent color
        style: |
          :host {
            color: transparent;
          }

Update 17.08.23: this fix may not be needed since there is a PR to implement the “show_name” option which is not working this moment.

More examples are described here.

Mariusthvdb · February 23, 2021, 10:13pm

No, see post below yours, above this one

ASNNetworks · February 24, 2021, 1:22am

Has anyone figured out how to use backdrop-filter css for cards? The css style is used for popups/more-info (and works great there). I wanted to use this as background for cards, bur couldn’t get it to work. Maybe it’s not possible, or am I missing something?

KTibow · February 24, 2021, 1:23am

Was the background transparent?

ASNNetworks · February 24, 2021, 1:26am

Partially, i used background css value rgba(0,0,0,0.5). Background showed fine, but backdrop did nothing.

KTibow · February 24, 2021, 1:26am

Screenshot?

ASNNetworks · February 24, 2021, 9:50am

So this is what I had as the code and screenshot:

Now, these are 4 cards inside a stack-in-card. I do know that you need mod-card to style horizontal-stack card. But I believe stack-in-card is handled differently and doesn’t need mod-card. Hence why I use style option. Btw, the background is completely black with this code, so style options do work. Also the volume slider card itself has no background set (completely transparant). So the black is the background of stack-in-card. If I set ‘–ha-card-background’: none, then the black is completely gone and background of Lovelace shows (so volume slider cards have no background).

Style code:

                  - cards:
                      - VOLUME SLIDER CARD
                      - VOLUME SLIDER CARD
                      - VOLUME SLIDER CARD
                      - VOLUME SLIDER CARD
                    mode: horizontal
                    keep:
                      background: true
                      border_radius: true
                      margin: true
                      outer_padding: false
                    style:
                      '--ha-card-background': 'rgba(0, 0, 0, 1)'
                      '--ha-card-box-shadow': none
                      '--ha-card-border-radius': 20px
                      '--ha-card-backdrop-filter': blur(17px) !important
                      '--ha-card-webkit-backdrop-filter': blur(17px) !important                      
                      left: 50%
                      top: 70%
                      width: 1000px
                      height: 800px
                      font-smoothing: none

Btw, this is all setup inside a picture-elemente-card. Which is why I have left/top/width/height variables. To my understanding I need this styling format in order to have positions working. This format

                style: |
                  ha-card {
                    height: 100vh;
                    width: 100vw;
                  }

doesn’t work when styling cards inside a picture-element if you also want to use positions (I believe).

Any idea what I can try?

KTibow · February 24, 2021, 2:33pm

What does it look like when they have no background? What does it look like with a partially transparent one?

anon36468094 · February 25, 2021, 2:21pm

I’m struggling to get the icon color changed, after allot of trial and error i have accomplished the code below but the icon color is now black instead of the normal blue color. Is there anyone that have the key to get this working.

type: 'custom:mod-card'
card:
  type: horizontal-stack
  cards:
    - type: entity
      entity: climate.vicare_heating
      attribute: active_vicare_program
      style: |
        ha-card {
          --state-icon-color: {% if is_state_attr('config.entity', 'reduced') %} #50A14F {% else %} #5591c2 {% endif %};
          }

KTibow · February 25, 2021, 2:41pm

Don’t quote config.entity.

anon36468094 · February 25, 2021, 4:22pm

Thanks for the reply. Just tested without the quotes but still the icon color stays black.

petro · February 25, 2021, 4:38pm

is_state_attr takes 3 arguments

anon36468094 · February 25, 2021, 5:12pm

Thanks Petro. Not to take the easy way but any change to show a example how i can toggle the icon color, i just can’t seem to make it work…

petro · February 25, 2021, 5:18pm

Unfortunately I can’t because I know nothing about your entity or attribute. Do you understand what is_state_attr does?

anon36468094 · February 25, 2021, 5:22pm

Well unfortunately i don’t. Most of the time i’m just trying to make it work but i know that not the easiest way. Will look furture into this and hope i find a solution.