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

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. :sob:

Here is the original:
image

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:
image

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

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).

1 Like

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:

  1. Create a decluttering card for a complex card like a floorplan; use variables for calibrating a relative position of elements.
  2. Select values for these calibration variables for each viewport.
  3. 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.

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.

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?

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?

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')}}

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?

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') }}

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 :wink:
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;
    }
1 Like

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

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

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; :wink:

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

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

1 Like

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.

Hi,

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

Thanks

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?

Could you describe with more details what you need?

Well, only move the header of the fold 8px to the left…
I thought I had managed that by the edit of the resource but noticed I also moved the divider 8px outside of the card ;-(

its because of this:

using default mod:

        card_mod:
          style: |
            ha-card {
              margin: 0px -16px;
            }

id like the

  - type: custom:fold-entity-row
    head:
      type: section
      label: Itinerary

to align with that horizontally

Sharing my glance card setup, that’s showing if any of the devices are on.

type: glance
entities:
  - entity: sensor.dishwasher_operation_state
    icon: mdi:dishwasher
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'Inactive' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: sensor.washing_machine_status_binary
    icon: mdi:washing-machine
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: sensor.tumble_dryer_status_binary
    icon: mdi:tumble-dryer
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: climate.daikin_ac
    icon: mdi:air-conditioner
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: binary_sensor.keba_p30_plug
    icon: mdi:ev-plug-type2
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
show_name: false
show_state: false
show_icon: true
state_color: false

a simple state_color: true should do the same, shouldn’t it?