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

Share your Projects! Dashboards & Frontend
1716

Styling footer (or header):

This whole description outdated since HA 2021.12 when new "chip" buttons were presented.

Earlier I tried to understand the styling and faced some problem which was described here and here. The problem was not solved but I found a walkaround - and then decided not to worry about the problem (since there is another solution).

Resizing icons:
image

      - type: entities
        style: |
          .header-footer.footer {
            --mdc-icon-size: 50px;
            height: 50px;
          }    
        entities:
          - sun.sun
          - type: divider
        footer:
          type: buttons
          entities:
            - entity: binary_sensor.updater
            - entity: binary_sensor.updater

Note: this method allows to resize icons but do not align them with respect to the center of the card:
image

To make icons aligned, the following method must be used:

      - type: entities
        style:
          .header-footer.footer hui-buttons-header-footer$:
            hui-buttons-base$div: |
              state-badge {
                width: unset !important;
              }
          .: |
            .header-footer.footer {
              --mdc-icon-size: 50px;
              height: 50px;
            }    
        entities:
          - sun.sun
          - type: divider
        footer:
          type: buttons
          entities:
            - entity: binary_sensor.updater
            - entity: binary_sensor.updater

image

Colored icons:
Method #1 - works for all kind of entities including "sensor", "input_boolean", "binary_sensor", "sun.sun":
image

type: entities
card_mod:
  style:
    hui-buttons-header-footer$:
      hui-buttons-base$div: |
        state-badge {
          color: red;
        }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun

Method #2 - same for some particular items:
image

type: entities
card_mod:
  style:
    hui-buttons-header-footer$:
      hui-buttons-base$div: |
        div:nth-child(1) state-badge {
          color: red;
        }    
        div:nth-child(3) state-badge {
          color: cyan;
        }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun

Method #3 - changing "--paper-item-icon-color" & "--paper-item-icon-active-color" variables which define styles for binary_sensor, input_boolean, switch, sun.sun:
image

type: entities
card_mod:
  style: |
    .header-footer.footer {
      --paper-item-icon-active-color: orange;
      --paper-item-icon-color: grey;
    }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sensor.cleargrass_1_co2
    - entity: sun.sun
    - entity: input_boolean.service_true_value

Changing a background:
image

type: entities
entities:
  - sun.sun
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun
style:
  .header-footer.footer hui-buttons-header-footer:
    $: |
      hui-buttons-base {
        background-color: red;
      }

####### END of old style-buttons #######

Styling an image inside a footer:
By default the footer’ height is automatically set dependingly on the image’s size:
image

type: entities
entities:
  - sun.sun
footer:
  type: picture
  image: >-
    https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png

Here is how to adjust the image’s height to the card’s height:
image

type: entities
entities:
  - sun.sun
footer:
  type: picture
  image: >-
    https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png
style:
  .header-footer.footer hui-picture-header-footer:
    $: |
      img {
        height: 100%;
      }
  .: |
    .header-footer.footer {
      height: 200px;
    }

P.S. Do you know that you can use a GIF?
11

type: entities
entities:
  - sun.sun
footer:
  type: picture
  image: 'https://i.gifer.com/Z23b.gif'
style:
  .header-footer.footer hui-picture-header-footer:
    $: |
      img {
        height: 100%;
      }
  .: |
    .header-footer.footer {
      height: 100px;
    }

qaws

  type: entities
  entities:
    - sun.sun
  footer:
    type: picture
    image: 'https://i.gifer.com/5uwq.gif'
  style:
    .header-footer.footer hui-picture-header-footer:
      $: |
        img {
          height: 100%;
        }
    .: |
      .header-footer.footer {
        height: 70px;
      }
      ha-card {
        --ha-card-background: black ;
        color: white;
      }

More examples are described here.

2 Likes