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

[majkers]

Thanks. That did the trick:

card:
  show_header_toggle: false
  title: Rachunki
  type: entities
filter:
  include:
    - entity_id: variable.*
      options:
        secondary_info: true
        style:
          hui-generic-entity-row:
            $: |
              .secondary::before {
                content: "Do zapłaty:"
              } 
              .secondary::after {
                color: 
                {% if is_state_attr(config.entity, 'status','do oplacenia') %} 
                  green 
                {% else %} 
                  red 
                {% endif %}
                ;
                content: "{{ state_attr(config.entity, 'do_zaplaty') }}"
              } 
sort:
  method: state
type: 'custom:auto-entities'

[ntompson (Nick)]

Hi,

I’m trying to use card-mod to colour the background of entities on a glances card. I plan to adjust background colour according to temperature (haven’t done that bit yet). I would like to adjust padding and margin, but notice that only some of these settings don’t take.

My config:

    - type: glance
      entities:
        - entity: sensor.temperature_8434
          name: Kitchen
        - entity: sensor.downstairs_temperature
          name: TV room
        - entity: sensor.inside_temperature
          name: Bedroom
        - entity: sensor.temperature_study
          name: Study
        - entity: sensor.temperature_5534
          name: Oliver
        - entity: sensor.temperature_1902
          name: Pete
        - entity: sensor.temperature_ellie
          name: Ellie
      show_icon: false
      style: |
        .entity {
          background: red;
          margin-left: 4px;
          margin-right: 4px;
          margin-bottom: 8px;
          padding-bottom: 4px;
          padding-top: 4px;
        }

But looking in the inspector in Chrome, I can see that some of these get ignored.

Any suggestions as to what I can do differently?

Thanks

[ntompson (Nick)]

Darn. The colour adjustment isn’t working for me. I’m doing this:

      style: |
        .entity {
          margin-left: 4px;
          margin-right: 4px;
          margin-bottom: 8px;
          padding-bottom: 4px;
          padding-top: 4px;
          background:
            {% if states(config.entity) |int <22 %}
              green;
            {% else %}
              blue;
            {% endif %}
        }

If I replace states(config.entity) with a number, it works. Is there some trick to getting states(config.entity) working?

[eggman (bertie basset)]

Templating

          background:
            {% if states(‘config.entity’) |int <22 %}
              green;
            {% else %}
              blue;
            {% endif %}
        }

A simple matter of quotes and you’re there.

[ntompson (Nick)]

Thanks for the quick response @eggman, but that doesn’t seem to be the answer. All of the examples I have seen are without quotes. In any case - trying it in my cases didn’t make any difference.

[eggman (bertie basset)]

Ah, yes - usually that parameter is a string value of an entity id, I hadn’t realised it could also be a variable referring to the current entity in a card.

[thomasloven (Thomas Lovén)]

Css prioritization is weird.
Try margin-bottom: 8px !important;etc.

[thomasloven (Thomas Lovén)]

The glance card has no entity property. The things in the glance card do, though. Try applying the styles to them instead.

[ntompson (Nick)]

Awesome - thanks Thomas. CSS is weird…

[ntompson (Nick)]

OK - I think I see what you mean - I think I’ve misunderstood the use of config.entity.

I had hoped it would allow me to set some dynamic CSS (eg set colour based on temperature) at the card level, which would be applied to each entity in turn at render time. But I think you are saying that I must do this at the entity level, which means reentering the same dynamic CSS code for each entity. A little verbose, but I guess it gets the job done.

[thomasloven (Thomas Lovén)]

You can avoid a lot of copy pasting with node anchors.

[ntompson (Nick)]

Ah Thomas - you’re a legend and a gentleman. Thanks - node anchors work beautifully.

[Mariusthvdb (Marius)]

@thomasloven

As such, changing the CSS color property of your entities card, won’t affect the more-info-card inside it.

Hi Thomas,

Since HA 110 changes the way it handles icons, the ‘old’ custom-ui way of customizing icon_color doesnt work anymore. Which is a major bummer, since custom-ui was able to customize entities globally, and every where in HA these entities are displayed with their customizations. Any card, be it custom or core, and, importantly, in the more-info.

Did file a feature request to please add a new way of customizing entities in Ha core Frontend, but that will be a long shot I fear.

So, trying my best to customize icons with what’s available right now, and using your card-mod Style of course. But, that only styles the entities in a Lovelace card, and not their more-info, as the quote above already indicates.

I’ve managed to template the icon color in an auto-entities card and would really have that functionality used in more-info. Which, without the color, in fact will be a Less-info from Ha 110 onward…

Since your answer above was a long time ago (talking Ha development time), I was wondering if you know of a way yet to globally customize items, so the more-info on the entity is also customized?

If not, could you give me a pointer what to look for in the ‘old’ custom-ui, and what has been changed in the 110 HA icon handling, so I can try to adapt that script to that? I haven’t been able to find that in the GitHub.
thanks for having a look.

[tom_l]

I would like to be able to move the card title up slightly to match my card backgrounds:

I’ve found the right element using the browser inspector but am having trouble translating this to card-mod css:

I’ve tried both inside and outside ha-card:

style: |
  ha-card {
    card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    };
    border: solid 1px var(--primary-color);
    background: 
      {% if is_state('input_select.select_theme', 'Night') %}
        url('/local/background/card_bg_night.png');
      {% else %}
        url('/local/background/card_bg_day.png');
      {% endif %}  
  }

Any hints?

[eggman (bertie basset)]

have you tried a dot, period, full-stop, whatever in front of card-header?

[tom_l]

I have now. It made no difference unfortunately.

[reste_narquois (Chris Warne)]

Is this any good?

style:
  .: |
    ha-card {
      border: solid 1px var(--primary-color);
      background: 
        {% if is_state('input_select.select_theme', 'Night') %}
          url('/local/background/card_bg_night.png');
        {% else %}
          url('/local/background/card_bg_day.png');
        {% endif %}  
    }
    ha-card div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }

[tom_l]

Yep that did it. Thank you. I changed my file names to make it a little simpler as per Mariusthvdb’s advice in another topic.

style:
  .: |
    ha-card {
      border: solid 1px var(--primary-color);
      background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
    }
    ha-card div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }

Now I just have to apply it to literally hundreds of cards…

[reste_narquois (Chris Warne)]

Great! I think I’m nicking your idea of changing the background like this…

[Mariusthvdb (Marius)]

@tom_l

apply it to literally hundreds of cards…

you’re not alone, I am faced with a burden alike, while things could be so much simpler. Were simpler even…
EDIT: just to keep things tidy: my issue above has been resolved…

on your repetitive job: isn’t a yaml anchor an option for you?