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

[homeassken]

Still trying to put all of this together. I want to make the icon green if on, red if off. I’ve tried “color” and “icon-color”. I guess I’m not sure how to call the “slotted” section. What am I doing wrong?

card_mod:
  style: |
    .chip-container *:nth-child(1) {
      --color: green; !important;
    }
    .chip-container *:nth-child(2) {
      --color: green; !important;
    }
    .chip-container *:nth-child(1) {
      {% if is_state('binary_sensor.opengarage1_vehicle','off') %}
      --chip-background: var(--lights-button-color) !important; 
      --color: red; !important;
      {% endif %}
    }
    .chip-container *:nth-child(2) {
      {% if is_state('binary_sensor.opengarage2_vehicle','off') %}
      --chip-background: var(--lights-button-color) !important;
      {% endif %}
    }```

[arganto]

@edlentz

.card-header

For this just look some post above yours. See here, which refers to this.

[polskikrol]

Makes sense. You definitely cleared it up with the per-row information. I went ahead and implemented this with a custom template, invoked for each entity separately.

[Ildar_Gabdullin]

@arganto, sorry for tagging.
May be you remember, sometime ago we discussed a bit about using “{% … %}” brackets for card-mod and its impact on performance.
In short - there 2 ways for conditional styling:
“brackets inside”:

some_element {
  {% if .... %}
  some_css_property: xxxx;
  {% endif %}
}

“brackets outside”:

{% if .... %}
some_element {
  some_css_property: xxxx;
}
{% endif %}

Recently I checked how “card-mod” elements are created in both cases.
Here is a test card:

type: entities
entities:
  - input_boolean.test_boolean
  - input_boolean.test_boolean_2
  - input_boolean.test_boolean_3
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info.pointer.text-content {
            {% if is_state('input_boolean.test_boolean','on') %}
              color: red;
            {% endif %}
          }
          .text-content:not(.info) {
            {% if is_state('input_boolean.test_boolean_2','on') %}
              color: cyan;
            {% endif %}
          }  
        .: |
          :host {
            {% if is_state('input_boolean.test_boolean_3','on') %}
            --paper-item-icon-color: orange;
            {% endif %}
          }
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row $: |
          {% if is_state('input_boolean.test_boolean','on') %}
          .info.pointer.text-content {
            color: red;
          }
          {% endif %}
          {% if is_state('input_boolean.test_boolean_2','on') %}
          .text-content:not(.info) {
            color: cyan;
          }   
          {% endif %}
        .: |
          {% if is_state('input_boolean.test_boolean_3','on') %}
          :host {
            --paper-item-icon-color: orange;
          }
          {% endif %}

A very simple logic: each checkbox set a custom color for a name, state & icon.

1st row is styled with “brackets inside”, 2nd - “brackets outside”.

Here is a difference when all toggles are OFF (surely name & state are styled on the same DOM level, could be 1 toggle instead of 2…):
“brackets inside”:

“brackets outside”:

So, in both cases “card-mod” elements ARE created, a difference is in their content, and here I have no idea if it could impact on a performance…

[arganto]

@Ildar_Gabdullin

a difference is in their content, and here I have no idea if it could impact on a performance…

Every bit counts. I didn’t say that the card-mod elements were not created. Only the content and nothing is ofc less then empty elements. To be honest, I don’t know how a browser is parsing this, if this is preparsed and removed then or if it compares if an element is somewhere devined in CSS style and the only find nothing so another useless step, …

But at then end of the day, at least these useless bytes are not inserted from card-mod code, not loaded to the browser (transfer) and not in memory and then perhaps the above parsing reductions, …

If it brings nothing or microseconds or … as I come from the ancient computer days where you where able to write whole games some kbs, I still always try the make as clean as I can.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

some_element {
  {% if .... %}
  some_css_property: xxxx;
  {% endif %}
}

“brackets outside”:

{% if .... %}
some_element {
  some_css_property: xxxx;
}
{% endif %}

wouldn’t you think that since in both cases the ‘if’ needs to be evaluated, a difference in computing time is negligible?

Must confess that since these are all jinja templates, and require constant backend logic, and hence traffic to and from the frontend to the backend and back again, I try to minimize these templates in card_mod as much as possible. It’s very heavy on the system indeed.

it’s quite remarkable (I’d even go as far as to say it’s shocking) to see how many evaluations take place when running the profiler template option.

I’ve tried minimizing after seeing that hard proof…

Another aspect, and that is untouched in this discussion, is the lack of an ‘else’ clause in those templates. I am aware we all believe (or maybe even are told) card_mod takes care of that, but talking about ‘empty’ properties, I’d always prefer to have an ‘else’ resolution there. Can’t proof it, but it does make me feel safer.

My summary would be:
if you truly ‘require’ templates in the card_mod mods, do it either way, and always use an else.
try to minimize templates as much as possible, it’s heavy on the system.

preloading them might even be heavier…

just see this (untemplated) card_mod in action and watch the frontend struggle:

which is a basic card config mod like:

entities:
  - type: custom:fold-entity-row
    card_mod: &scroll
      style: |
        #measure {
          max-height: 300px;
          overflow-x: hidden;
          overflow-y: scroll;
        }
    head:
      type: section
      label: Binnen
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
    padding: 0
    entities:

      - type: custom:auto-entities
        card: &type_mod
          type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 0px -16px;
              }

now consider adding templates to those…
card_mod’s impact is not to be neglected.

[Ildar_Gabdullin]

@arganto

didn’t say that the card-mod elements were not created

Yes, and I did not say that you said it)).

@arganto

as I come from the ancient computer days where you where able to write whole games some kbs, I still always try the make as clean as I can

Agreed, I have same bringing up - converting assembler to fortran77 ))

[Ildar_Gabdullin]

@Mariusthvdb

but talking about ‘empty’ properties, I’d always prefer to have an ‘else’ resolution there. Can’t proof it, but it does make me feel safer.

It’s another issue, also important.
I advise everywhere using this:

{% if ... %}
property: value;
{% endif %}

instead of this:

property: {% if ... %}
value;
{% endif %}

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

{% if ... %}
property: value;
{% endif %}

my suggestion would be:

{% if ... %}
property: value;
{% else %}
....
{% endif %}

ofc, same would go for the other format.

[Ildar_Gabdullin]

@Mariusthvdb

my suggestion would be:

What for?
Check generated card-mod elements - they just empty if a condition is not met.

[Mariusthvdb (Marius)]

Yeah, that’s what is happening in the Frontend.

I just dont like unguarded (Jinja) templates

[Ildar_Gabdullin]

@Mariusthvdb

I just dont like unguarded (Jinja) templates

You know, this is a programming, sometimes “else” is not really required.

[Mariusthvdb (Marius)]

probably yes. and I agree on trying to always use the property inside the template: prevent empty properties. for the same reason btw. no open ends.

on another matter:
I’ve added a post on multiple-entity-row in that topic, pertaining to trying to align the names:

can we ‘fix’ those?

as an experiment, I also took out the main icon now:

  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: weather.buienradar
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }
              state-badge {
                display: none;
              }
        show_state: false
        entities:
          - entity: sensor.buienradar_temperature
            name: Temp
          - entity: sensor.buienradar_wind_force
            name: Bft
          - entity: sensor.buienradar_wind_direction
            name: Richting
          - entity: sensor.buienradar_pressure
            name: Lucht
          - entity: sensor.buienradar_precipitation
            name: Neerslag
          - entity: sensor.buienradar_goes_irradiance
            name: Zon
          - entity: sensor.buienradar_humidity
            name: Vocht
#           - entity: sensor.buienradar_barometer
#             name: Bar

and that seem better on desktop:

but still messes the names on mobile (apparently just that bit less space for a single card-width).

note it now shows the units below the state, and ‘Richting’ has no unit…

so yet another hack:

          - entity: sensor.buienradar_wind_direction
            name: Richting
            unit: 🧭

makes this on desktop:

and this on mobile:

or I could have added unit: Wind maybe, but that is all a bit silly.

found a bug there probably:
when using unit: --> it positions the unit next to the value, and word-wraps to the unit line. even when using unit: Uit--> apparently, using any of these characters (also when quoted) confuses the multiple-entity-row card.

all of this this makes me wonder if there is no other option to show several entities on a row, and not have to ‘kill’ the main entity. Just have a multiple-entity-row sec. Is there a card like that?

[arganto]

You can either set no-wrap. But then perhaps get problems with the size.

  - entity: sun.sun
    card_mod:
      style:
        .: |
          .entities-row div.entity {
            white-space: nowrap;
          }
    type: custom:multiple-entity-row

Or you can align theme on top

  - entity: sun.sun
    card_mod:
      style:
        .: |
          .entities-row {
           align-items: start !important;
          }
    type: custom:multiple-entity-row

Or where is you demand/problem, if I perhaps didn’t get it?

[Mariusthvdb (Marius)]

@arganto

    card_mod:
      style:
        .: |
          .entities-row {
           align-items: start !important;
          }

thank you vm.

can confirm this works nicely indeed:

complete used card-mod:

    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
          state-badge {
            display: none;
          }
        .: |
          .entities-row {
           align-items: start !important;
          }

for reference.

its too bad we can not use

    tap_action:
      action: more-info
      entity: weather.buienradar

when display: none is set to the state-badge. I was kind of hoping the action would be set on the card, (like with custom:button-card) and not on the main entity. So, if we want an action to be happening we are forced to keep that state-badge, and get a higher card because of that

Thanks to arganto’s mod, the card remains nicely aligned.

(the nowrap also works, but then the card overflows, which is kind of obvious. shouldnt interfere with that aspect of the card calculations probably)

I did lower the padding (default is 16px) on the containing entities card to take away some of that vertical white space

type: entities
card_mod:
  style: |
    .card-content {
      padding: 8px;
    }
entities:
  - type: custom:multiple-entity-row

again, full card with all tested card-mod options (and some multiple-entity-row options) in comments:

type: entities
card_mod:
  style: |
    .card-content {
      padding: 8px;
    }
entities:
  - type: custom:multiple-entity-row
    entity: weather.buienradar
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
#           state-badge {
#             display: none;
#           }
        .: |
          .entities-row {
           align-items: start !important;
          }
#           .entities-row div.entity {
#             white-space: nowrap;
#           }
    show_state: false
#     tap_action:
#       action: more-info
#       entity: weather.buienradar
    entities:
      - entity: sensor.buienradar_temperature
        name: Temp
      - entity: sensor.buienradar_wind_force
        name: Bft
      - entity: sensor.buienradar_wind_direction
        name: Wind
#         unit: Uit #🧭
      - entity: sensor.buienradar_pressure
        name: Lucht
      - entity: sensor.buienradar_precipitation
        name: Neerslag
      - entity: sensor.buienradar_goes_irradiance
        name: Zon
      - entity: sensor.buienradar_humidity
        name: Vocht
#           - entity: sensor.buienradar_barometer
#             name: Bar

result:

[Mariusthvdb (Marius)]

same card, another challenge apparently…

multiple-entity with state:

but I dont want the state, so try:

  - type: entities
    entities:
      - entity: sun.sun
        type: custom:multiple-entity-row
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }
            .: |
              .entities-row div.state.entity {
                display: none;
              }
        state_color: true
#         show_state: false
        entities:
          - entity: sensor.sun_next_dawn
            name: Dawn
            format: time
          - entity: sensor.sun_solar_elevation
            name: Hoogte
            unit: false
          - entity: sensor.sun_next_rising
            name: Sunrise
            format: time
          - entity: sensor.sun_next_noon
            name: Noon
            format: time
          - entity: sensor.sun_next_setting
            name: Sunset
            format: time
          - entity: sensor.sun_next_dusk
            name: Dusk
            format: time
          - entity: sensor.sun_next_midnight
            name: Night
            format: time

showing:

so, in this case the display: none actually only does the same as show_state: false (commented because also tested) and does Not ‘release’ the space of that element to the card.

Could we some how force the card to be ‘filled’ from the right side?

all the more remarkable, because on mobile this works nicely, and filling the full width:

[arganto]

@Mariusthvdb

only does the same as show_state: false (commented because also tested) and does Not ‘release’ the space of that element to the card.

show_state: false

is releasing the space. So you migh be wrong with your statement above, that it is not releasing.

[Mariusthvdb (Marius)]

probably, maybe I should take that out, and simply forward the ask:

why does this row not get filled from right as the examples show, but leave that space open.

Only if I use extra entities the space gets used (but then the card overflow on mobile, so that is not an option)

[arganto]

Because it has no 100% width and only takes the size it is needing, left aligned. If you set width 100% to the .entities-row it could be, that it is directly as you want. But you should see this if you click arround on the elements in developer tools, too.

[Mariusthvdb (Marius)]

well, sure, ive been clicking my way around this morning… hehe

I just discover it is caused by using the:

        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }

if I replace that with the state: false native card option, we get:

which is exactly what I am looking for was expecting based on the docs examples. Unfortunately we can now clearly see the name space is not released, going to the mobile display of the row:

causing the right side to overflow again… grr