šŸ”¹ Card-mod - Add css styles to any lovelace card

Oh, exactly, I forgot that we discussed it earlierā€¦

Very nice & useful.

1 Like

Itā€™s a linear interpolation in RGB space, so it takes a state (temperature at the time of writing) and a start and stop colour with corresponding states. Those are tuples that are unpacked. The three channels are then separated. A scalar (s) is then calculated do determine where the input state is in the given range of the start and stop states. This is then used to calculate a channel value for each channel, before recombining it into an RGB value.

2 Likes

Will take it for experimenting, very promising! Thanks a lot!

1 Like

How can I change the align-item option for the entity?

        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            card_mod:
              style:
                $: |
                  .card-header {
                    font-size: 15px !important;
                  }
                  :host {
                    border-style: none !important;
                  }

Hi, can someone break this down for me. I see a lot of things after style, but I donā€™t know why it needs to be one or the other. Here are some:

  1. hui-generic-entity-row $: |

  2. .: |

  3. ha-card {

  4. :host {

I seem to always get it wrong. Please help me. Thanks

yeah its amazingly beautiful indeed

however, reading Pieterā€™s explanation there, I fear it will be costly if applied widely? @parautenbach any numbers on that? can you see any increase in resource usage?

If I change my code to below the entity align correctly but then the .card-header font size no longer works.

        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
            - not_home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            style: |
              .entity {
                align-items: baseline !important;
              }
              ha-card {
                border: none;
              }
              .card-header {
                font-size: 10px !important;
              }

I was able to fix it with the below code

        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
            - not_home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            card_mod:
              style:
                .: |
                  ha-card {
                    border: none;
                  }
                  .entity {
                    align-items: baseline !important;
                  }
                $: |
                  .card-header {
                    font-size: 15px !important;
                    padding: 1px 16px 1px;
                  }

Thank you.

Youā€™re right, itā€™s important to keep the processing overhead of complex templating code in mind.

In this case I havenā€™t seen a noticeable increase in server load. Itā€™s remained on 0.05 on average (Unix load). Maybe it goes up to 0.1 for a moment, but itā€™s hard to isolate something like this. I think I use this macro in about 10 places. Page loads feel pretty instant.

1 Like

was thinking whether this macro wouldnā€™t be a good example for the new custom_templates functionality? so we can call it form anywhere in the config, either back-or frontend

Indeed, Iā€™ve moved that to my custom templates directory. I havenā€™t added it to HACS though, because I donā€™t want to enable experimental features (it kind of borks my system for some reason). Iā€™ll do that once this becomes mainstream.

You should start reading this and then this and afterwards try out and investigate the examples from here and you will see, where and why is what used where. And ofc turn on Browser-Developer tools to see the html dom.

1 Like

Thatā€™s exactly how I did, as in 4-5 posts above. Donā€™t notice any delays, and already using for other things all over my HA. I have a low end machine for HA, itā€™s almost allways at least at 35% of processor usage, but I think this kind of computation requires more from the browser/app than from the processor, so I donā€™t notice any more load because of this

yeah well, thats a bit of mixed bag.
Jinja templates are evaluated in the backend, serverside, while (custom cards mostly using) JS templates are evaluated in the Frontend, so ā€˜screen deviceā€™ side.

Some custom cards do allow for jinja templates, like card_mod, or template-entity-row, and Ive never been able to be 100% where this all goes.

I would suspect these to be extra heavy on both systems as they not only require evaluating power, but also cause a lot of traffic to and fro.

Hence: always reduce as much as possible, and simply be vigilant (also meaning to write correct templates, thereā€™s nothing more dangerous for a Frontend then depend on those templates that will enter a never ending evaluationā€¦)

having said all that:

makes me want to try :wink:

2 Likes

Is it possible to round the value shown on a card to 0 decimals and not show the unit of measurement via card_mod?

Possible. But not recommended.
Use a more appropriate tool instead. Like template-entity-row.

Hey, thanks. I figured some things out by just reading the card-mod github more slowly. I still donā€™t think I have it completely, but it definitely helped.

I have a custom mod card i want to have on the bottom of my screen (5px or 10 doesnt matter)

    card_mod:
      style: |
        :host {
          bottom: 10;
        }
        ha-card {
          display: flex;
          background: none;
          --ha-card-border-width: 0px;
          --ha-card-box-shadow: none;
          justify-content: center;
        }

why is this not working ?

Trying to center the controls on this card but canā€™t get it workingā€¦ pls help

Code I tried:

type: custom:climate-mode-entity-row
entity: climate.3family_room
name: ' '
icon: none
secondary_info: none
modes:
  - hvac_mode: heat
  - hvac_mode: cool
  - hvac_mode: heat_cool
  - hvac_mode: 'off'
card_mod:
  style: |
    :host {
      display: contents !important;
    }

The code is just above youā€¦