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

Me too. Changed to ha-card instead :slight_smile:

Ok - so after about 2 days on this and reading through all the great examples above (thank you IIdar) I have hit a road block with styling my input_select dropbox positioning. As you can see from the below image it’s start position is 1) too far to the left 2) too wide. I can manually change in the inspector (element.style fields) but I can not figure out how to do it in my code. Reading up on CSS I dont believe Element.style is something I can edit; however I can not seem to find the parent elements for these values…or what else determines them.

Any help would be greatly appreciated - Im learning CSS slowly so my code below may not be elegant…I have also cut out a lot of code to make it easier to post here so its only the positioning and size of the dropdown box that I need assistance with.

image

type: entities
show_header_toggle: false
entities:
  - type: custom:hui-element
    card_type: picture-elements
    image: /local/images/hardware/YamahaAVR_stretch.png
    elements:
      - type: custom:hui-element
        card_type: entities
        entities:
          - entity: input_select.speakerlist
            card_mod:
              style:
                hui-generic-entity-row: 
                  $:
                    ha-paper-dropdown-menu:
                      $:
                        paper-menu-button:
                          $: 
                            iron-dropdown: |
                              :host {
                                position: static !important;
                              }
        style:
          top: 54%
          left: 21%
          width: 30%
          height: 20%
        card_mod:
          style:
            .: |
              :host {
                --mdc-icon-size: 17px;
                --paper-font-subhead_-_line-height: 9px;
                --paper-font-subhead_-_font-size: 9px;
                --paper-item-min-height: 0px;
              }
              .card-content {
                padding-top: 5px;
                padding-bottom: 0px;
                padding-right: 10px;
                padding-left: 0px;
              }

******* EDIT - worked it out finally *********

for some time this function has not been activated, until a few weeks ago when the water pump was on the fan icon was spinning flashing yellow now it no longer works.

        card_mod:
          style:
            state-badge:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      {% if is_state('sensor.stato_pompa', 'on') %}
                        animation: rotation 2s linear infinite;
                        color: yellow;
                      {% endif %}
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }


You posted your card_mod code but have not mentioned where this code is used.

this is the complete card code, as explained until recently it worked well

      - type: state-icon
        entity: sensor.flusso
        title: pompa
        state_color: true
        style:
          top: 80%
          left: 24%
          border: 'solid 3px rgba(100,100,100,0.3)'
          border-radius: 20px
          color: 'white'
          transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
          '--paper-item-icon-active-color': yellow
          '--paper-item-icon-color': grey
          '--grey-icon-height': 2vw
          '--grey-icon-width': 2vw
        card_mod:
          style:
            state-badge:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      {% if is_state('sensor.stato_pompa', 'on') %}
                        animation: rotation 2s linear infinite;
                        color: yellow;
                      {% endif %}
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }

Scroll down to the example with animation for the state-icon
If smth stopped working - check the examples first. HA is changing, examples are being updated (usually).

AFAIK, this started with .11, so recently is a matter of definition. Double check from here as well.

1 Like

seems the new iif templates Templating - Home Assistant are a perfect fit for these card_mod templates:

card_mod:
  style: |
    ha-card {
     --paper-item-icon-color:
       {% if states(config.entity) == 'off' %}
         yellow;
       {% elif states(config.entity) == 'on' %}
         green;
       {% else %}
         gray;
       {% endif %}
         }

can become:

card_mod:
  style: |
    ha-card {
      --paper-item-icon-color: {{is_state(config.entity,'off')|iif('yellow','green','gray')}}
    }
4 Likes

Hello.
First of all, thank you for this amazing work and for the community that are always supporting some doubts and helping some newbies like me.
My doubt, is… I want to change the color of the text of the power, depending on the value.

I’m trying to figuring out how to change or to compare the value, since i’m using a flex-table with include global sensors and not a specify value.

My code, and result for better undestanding.

So how, to change values inside column 2 and 3 depending or comparing values? Thanks.

1 Like

Hello, Is there a way to change the colour of the icon for the light entity, but at the same time prevent it from dimming?

I want to have basically the same behaviour as for the switches. I am really struggling with template…

This was so easy in the past…

Hi there, i’m in need of some help. Im hoping that using Card-mod i can change the postion and size of the lock symbol in the “love-lock-card”. Is this possible and how? TIA

Regards…Marc

Found an interesting example of this just now. Scaling the Logitech Media Server interface with the material UI causes the right side of the header, and the entire footer, to “disappear”. I’m guessing that these elements don’t follow the scale and are still acting like the frame is 100,000px tall/wide

What did you test/tried until now?

As far as I can see, this is a quite simple css assigned to ha-state-icon, e.g.

    color: rgb(255, 190, 87);
    filter: brightness(74.6%);

and should be directly to set - without test.

using:

type: entities
title: Z-wave devices
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
    }
    .card-content {
      max-height: 500px;
      overflow-y: scroll;
    }
entities:

  - type: custom:decluttering-card
    template: zwave_device
    variables:
      - name: Ikea hub
      - id: ikea_hub

  - type: custom:decluttering-card
    template: zwave_device
    variables:
      - name: Stookhok
      - id: stookhok

etc
etc

I get a beautifully scrolling list of all Zwave devices, in the style I have set throughout my config:

however, and this is a first, when scrolling that list, I can see the fold labels shine through my header:

Jan-31-2022 17-15-42

@Ildar_Gabdullin since we have been discussing the new fold-entity-row today (which is employed here too), would you know how to mitigate this?

I can add a margin of 8px to the bottom the header, but then we see the top divider of the first fold…

btw if I carefully wiggle the mouse pointer, I can also see a horizontal scrollbar…

How can I reposition a whole entities card row to the right (“margin-left: 20 px;” for example)?

I want the entity icon to start where normally the text starts so move everything a bit to the right.

Other trick (I’m not aware of) would be to place an mdi icon within the text part of an entities card row - don’t think that’s possible.

I tried this:

type: picture-elements
image: /local/lovelace/Kitchen_blur.jpg
elements:
  - type: state-label
    entity: sensor.blank_blank
    title: null
    prefix: Kitchen
    attribute: null
    style:
      transform: translate(0%,0%)
      top: 70%
      left: 2%
      font-size: 1.4vw
      color: white
      text-shadow: 1px 1px 1px rgba(0,0,0,0.5)
  - type: state-label
    entity: climate.climate_kitchen
    icon: mdi:radiator
    prefix: '🌡 '
    suffix: '°C'
    attribute: temperature
    style:
      transform: translate(0%,0%)
      left: 2%
      top: 81%
      font-size: 0.9vw
      color: rgb(190,190,190)
  - type: state-icon
    entity: light.cookinglights
    icon: mdi:spotlight
    style:
      transform: translate(0%,0%)
      top: 72%
      right: 4%
      '--paper-item-icon-color': white
      '--paper-item-active-icon-color': yellow

When light goes on the icon changes to the colour reflecting its brightness and temperature, I really don’t like that. All I want is one colour for ‘on’ and ‘off’ state.

type: vertical-stack
title: Left padding
cards:
  - type: entities
    entities: &ref_entities
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
  - type: entities
    entities: *ref_entities
    card_mod:
      style: |
        .card-content {
          padding-left: 64px;
        }
  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun
        card_mod:
          style: |
            hui-generic-entity-row {
              padding-left: 24px;
            }
      - entity: sun.sun
        card_mod:
          style: |
            hui-generic-entity-row {
              padding-left: 48px;
            }

I do not know how to add an icon - but you can add an image:

      - entity: sun.sun
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content:before {
                  background: url("/local/images/Stan_small.png");
                  content: "----";
                  color: transparent;         
                  background-size: cover;
                }

изображение

Look at this card:

  - type: entities
    title: Header
    entities:
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
    card_mod:
      style: |
        .card-header {
          background-color: rgba(255,0,0,0.2);
        }
        .card-content {
          background-color: rgba(0,255,0,0.2);
        }

It is clear that “header” & “card-content” areas are overlapping.
With “margin-top: 0px” they are not:

  - type: entities
    title: Header
    entities:
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
    card_mod:
      style: |
        .card-header {
          background-color: rgba(255,0,0,0.2);
          padding-top: 0px;
          padding-bottom: 0px;
        }
        .card-content {
          background-color: rgba(0,255,0,0.2);
          margin-top: 0px;
          overflow-y: scroll;
          overflow-x: hidden;
          max-height: 300px;
          margin-bottom: 16px;
        }

изображение

a yes, thats a nice variant too. It has the same effect as my margin in the header adding the 8px to the bottom.

However, because all of my entities are folds, the card shows the top divider. which is what I ws trying to prevent, and have it look like the first screenshot above

guess that cant be done