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

Pelican · January 13, 2022, 5:58am

OK I made a new example. Remember the top does not change because the masks show “emptiness”. So the masks starts at the top of each tank (which stays the same) and stretch down. I made the tank background in such a way that the three mask tops start at 20%, 50% and 0%. In the 569px high main background graphic, that was around 119px (20%), 285px (50%) and of course, 0.

So let’s start with a sensor. I use ESPHome (or Tasmota) for PC boards I made for the ESP-07. The ultrasonic sensor for Tank 1 in ESPHome is defined like this:

sensor:
  - name: "tank1"
    id: ads1115_49_0
    ads1115_id: ads1115_49
    multiplexer: 'A0_GND'
    update_interval: 1s     
    gain: 2.048
    platform: ads1115
    unit_of_measurement: "m"
    icon: "mdi:gauge"
    accuracy_decimals: 0
    filters:
    - calibrate_linear:
          - 0.100 -> 0.0
          - 1.000 -> 270   
    - median:
        window_size: 10
        send_every: 1
        send_first_at: 1

This gives me a calibrated and filtered output of the distance between the sensor and the liquid. 10cm is full (0) and 1m is empty (270) for a range of 90cm.

The three values go into the card’s CSS variables.

    - type: picture-elements
      image: /local/graphics/test/tankbackground.png
      card_mod:
        style: | 
          ha-card {
            --mask1-height: {{states('sensor.tank1')|int}};
            --mask2-height: {{states('sensor.tank2')|int}};
            --mask3-height: {{states('sensor.tank3')|int}};
          }          
      elements:
        - type: image
          image: /local/graphics/test/mask1.png
          style:
            transform-origin: left top
            top: 20%
            width: 100%
            height: 1px
            transform: scale(1,var(--mask1-height))
        - type: image
          image: /local/graphics/test/mask2.png
          style:
            transform-origin: left top          
            top: 50%
            width: 100%
            height: 1px
            transform: scale(1,var(--mask2-height))
        - type: image
          image: /local/graphics/test/mask3.png
          style:
            transform-origin: left top          
            top: 0%
            width: 100%
            height: 1px
            transform: scale(1,var(--mask3-height))

The result looks like this for 75% full (25% empty):

Here is the background image (note it shows all tanks full):

Mask 1

Mask 2

Mask 3

I hope this helps someone else. [Update - the scaling breaks. Not sure where to look next]

Mariusthvdb · January 13, 2022, 9:11am

because I had not seen it before, and I only just discovered it

Add a scrollbar to you markdown card:

card_mod:
  style: |
    ha-card.type-markdown {
      box-shadow: none;
      margin: 0px -16px -16px -16px;
      overflow-y: scroll;
      height: 300px;
    }

(the .type-markdown trick is to make sure this card_mod is only applied to the markdown card itself, and not to an enveloping entities card if you happen to embed the markdown card, like I do in my config. This can also be used for other cards ofc, and is useful when an embedded cards card_mod causes the whole (embedding) card to go beyond the regular Lovelace default card width)

Ildar_Gabdullin · January 13, 2022, 10:33am

Thanks a lot, will look at the code with attention.

Pelican · January 13, 2022, 10:40pm

OK the scaling sucks. It looks like the issue comes in with scaling being calculated using something other than the main image of the picture-elements card. If you put the card in a vertical-stack or something like that, then the levels fall apart.

Here is the original:

Two cards stacked horizontally. It looks like the scaling is based on the total width of the vertical-stack card containing the two picture-elements card:

It gets worse. Even using ordinary zooming in the browser breaks it:

It looks like the % styling in the elements themselves (ie width: 100%) scales correctly. It is therefore the scaling transform that breaks it. The only way seems to be to access the height % of the image elements. @thomasloven - can you please help? I really tried and @Ildar_Gabdullin has been amazing with his help (thank you again Ildar).

Ildar_Gabdullin · January 13, 2022, 11:31pm

That was exactly what I was talking about - scaling kills the picture.
I guess that this is a nature of picture elements card - scaling breaks a relative position of elements respectively to the main image.
Do not think that card-mod may resolve it.
Once I made a floorplan: main image + “dark room” images, and every scaling broke the plan - each “dark room” image was placed to different positions when the page was resized. Finally, I made all “dark room” transparent images of the same size as the main image. That means that for every small object like a hardware sensor, a lamp etc I also need to use a large transparent image. Also, I cannot place an icon or a static text - these elements will be misplaced after resize! (this do not allow to have the same card on PC, tablet & mobile phone - they may have different viewports).

Well, there is a workaround for different viewports:

Create a decluttering card for a complex card like a floorplan; use variables for calibrating a relative position of elements.
Select values for these calibration variables for each viewport.
Call the decluttering card with a corresponding set of variables for each device (custom:state-switch may be used).

But this workaround anyway will not help in the “window is resized” case.

Btw, there is an issue for picture elements.

Pelican · January 14, 2022, 12:16pm

Assuming I can get the aspect_ratio to work (I am probably doing something wrong because I cant get it to work), is it possible to template aspect_ratio with card-mod? If it aspect_ratio scales correctly, it will solve the problem.

maurizio53 · January 14, 2022, 12:18pm

I have this conditional card:

              - type: conditional
                conditions:
                  - entity: media_player.cast_camera_letto
                    state: playing
                card:
                  type: entity
                  entity: media_player.cast_camera_letto
                  attribute: app_name
                  name: ' '
                  icon: ' '
                  style: |
                    ha-card {
                      height: 40px;
                      width: auto;
                      color: green;
                      font-family: 'Georgia';
                      font-weight: normal;
                      font-size: {{ '10px' if is_state_attr('media_player.cast_camera_letto', 'app_name', 'Netflix') else '12px' }};
                      }

and i would like to have the app_name attribute with a font size 10px, but i have the font family and the font weight as expected but not the font size.
Schermata 2022-01-14 alle 13.24.25

What is wrong in this?

Farcorner · January 16, 2022, 7:17am

Hi,

I’m looking for a way to change the color of the icon depending on the value within a entity card.
I can change the icon color with the following code:

type: entities
entities:
  - entity: sensor.dracaena_bodemvocht
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: #e7363e;
          }

so far, so good, the icon turns red. But now I want to change the color depending on the value, so if the value is between 15% and 60% I want the icon to become green, everything else I want the icon to turn red.

I’ve tried several options and thought I’d work with the following code, but no success yet.

type: entities
entities:
  - entity: sensor.dracaena_bodemvocht
    card_mod:
      style: |
        ha-card {
          paper-item-icon-color:
            {% if states('sensor.dracaena_bodemvocht') | float 15-60 %}
              green
            {% else %}
              red
            {% endif %}
            ;
        }

Can someone point me in the right direction?

Mariusthvdb · January 16, 2022, 11:43am

sure, why dont you use the same config form your first example?

        - entity: input_number.power_threshold
          card_mod:
            style: |
              :host {
                --paper-item-icon-color: {{'red' if is_state('input_boolean.test','on') else 'green' }};
                }

or the new iif template which is perfect for these shorter needs:

{{is_state('input_boolean.test','on')|iif('red','green')}}

Farcorner · January 17, 2022, 10:23am

Thanks that worked! Last question, is possible to define a range (from 15-60%) within

{{is_state('input_boolean.test','on')|iif('red','green')}}

Or is that only possible with a input_boolean and a automation?

Mariusthvdb · January 17, 2022, 10:35am

sure, just replace the templates condition with the one you need. test it in the dev tools template

like:

{{(15 < states('sensor.dracaena_bodemvocht') | float < 60)|iif('red','green') }}

Mariusthvdb · January 18, 2022, 2:16pm

recently found the scrollbar on a markdown card:

card_mod:
  style: |
    ha-card.type-markdown {
      overflow-y: scroll;
      height: 300px;
    }

and now like to add that to some very long auto-entities entities cards…

however, I can not find a way to do it, nor an example in the pages above. setting that to ha-card {} itself doesnt do a thing, and I guess it should be set to .div#states.card-content. However,

      card_mod:
        style: |
          .card-header {
            background-color: var(--background-color-off);
            color: var(--text-color-off);
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 16px 0px;
          }
          .div#states.card-content {
             overflow-y: scroll;
             height: 300px;
           }

or

        style: |
          .card-header {
            background-color: var(--background-color-off);
            color: var(--text-color-off);
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 16px 0px;
          }
          .card-content {
               overflow-y: scroll;
               height: 300px;
           }

doesnt work either. please have a look what I should try? thanks!

edit

details, details, its always in the details:

      card_mod: &header
        style: |
          .card-header {
            background-color: var(--background-color-off);
            color: var(--text-color-off);
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 16px 0px;
          }
          .card-content {
            max-height: 600px;
            overflow-y: scroll;
          }

max-height in stead of height… scrolling nicely! could even be used in card-mod-theme, if not for interfering with some of my more complex cards with fold-entity-rows and header settings
Having a fixed max-height adds to the overall tidiness of the front-end though. so here goes:

  card-mod-card: |
    .card-header {
      font-weight: 300;
      letter-spacing: 0px;
      /*background: radial-gradient(var(--primary-color),var(--card-background-color));*/
    }
    .card-content {
      max-height: 600px;
      overflow-y: scroll;
    }

KameDomotics · January 18, 2022, 3:20pm

Hi, is it possible to color this switch of the card entities?
I would like to color only that one, so possibly without changing the theme of all the switches.
Is that possible?
Thanks

Ildar_Gabdullin · January 18, 2022, 3:41pm

1st post → link at the bottom → link for toggles

Mariusthvdb · January 18, 2022, 4:07pm

having these entities

      - input_select.intercom_message
      - entity: input_text.message
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                .info {
                 display: none;
                }
              paper-input:
                $: |
                  paper-input-container iron-input {
                    --paper-input-container-shared-input-style_-_width: 400px;
                  }

results in:

and Id love to align the 2 lines on the left, and on right side of the card. Can we do that, without hardcoding the pixels somehow.

without the mod, the 2 lines are at least aligned on the right side:

there’s no effective ‘auto’ setting afaik, but we can replace
--paper-input-container-shared-input-style_-_width: 300px with width: 300px;

btw, we can also set the name to an empty string like this and only style the width (which still wont be adaptive):

      - entity: input_text.message
        name: ' '
        card_mod:
          style:
            hui-generic-entity-row:
              paper-input:
                $: |
                  paper-input-container iron-input {
                    --paper-input-container-shared-input-style_-_width: 340px;
                  }

problem with these fixed settings is the device isnt responsive anymore, and setting it too wide make mobile misbehave, and 100% doest seem to work either. CSS width property

found this old card: GitHub - gadgetchnnel/lovelace-text-input-row: A custom Lovelace text input row for use in entities cards which does rather nicely still…:

FR: Allow input_text to have no Name and use full row width · Discussion #11360 · home-assistant/frontend · GitHub

Pelican · January 18, 2022, 10:52pm

Update on the scaling issue.

It seems like the combination of picture-card and card-mod doesn’t like scaling the vertical size of the masks up, but it is ok to scale it down. So using a 1px mask that is scaled up will break, but if you make a mask that is exactly the same height and width of the underlying image, then it works correctly when you reduce the height. The problem is you get ugly artifacts making it unusable.

My solution in the end was to use the full size masks and position them at -100%. I then template the top position with card-mod. Example:

        elements:
          - type: image
            image: /local/mask1.png
            style:
              position: absolute
              transform-origin: top center          
              transform: translate(0,-100%) 
              left: 0% 
              width: 100%
            card_mod:
                style: | 
                  :host {
                      top: {{(states('sensor.some_sensor_value_templated_in_config_yaml'))}}%;               
                    }

It is an ugly solution and it means I have to cut all the tank images across the top so the mask can move down. It also means the tank tops have to be on the same level. It scales OK though and there are no artifacts.

Definitely a disappointment, but I will wait to see if there is any movement on this.

Hopefully this saves someone else some effort. Thanks again @Ildar_Gabdullin

Ildar_Gabdullin · January 18, 2022, 11:39pm

Thanks a lot for efforts.
For temporarily I decided to fix scales & positions for PC, iPhone & iPad as I described here:

It will only work on fixed screen sizes, will not support real-time resize.

kaelsaes · January 19, 2022, 9:20am

Hi,

is it possible to make a light card a little bit smaller?

Thanks

Mariusthvdb · January 19, 2022, 11:13am

given the current state of affairs of the fold-entity-row resource I find the header is positioned 8px too far to the right…
Ive edited the resource to use a

margin-left: -8px;

in the #head{} section, but now see that also moves the divider out of the card. Not good…

Now how could we move the header of the fold 8px to the left?

Ildar_Gabdullin · January 19, 2022, 8:33pm

Could you describe with more details what you need?