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

[Mariusthvdb (Marius)]

Hey Ildar,

did you already check the picture_glance card? I’d love to be able to spin the icons when ‘on’ for the switches:

  - type: picture-glance
    title: Vijverpompen
    state_filter:
      'off': grayscale(72%)
    entity: binary_sensor.vijverpompen
    entities:
      - switch.vijverpomp_links
      - switch.vijverpomp_rechts
      - input_boolean.vijverpompen_alterneren
      - sensor.pond_buiten_sensor_calibrated_temperature
      - binary_sensor.vijverpompen
      - sensor.vijverpompen
    image: /local/images/vijver.png

[jmoneo (Joaquin)]

Thank you so much. It worked perfectly.
I’m going to save your post for later.

[jmoneo (Joaquin)]

Sorry, I thought I was going to make it work but I’m missing something else.
Hidding the icon and hidding the label worked separately, but they don’t if I put them together.
I tried this but it only removes the label:

  - type: entities
    entities: 
      - entity: input_select.test
        # style: |
          # :host state-badge {
            # display: none;
          # }
        style:
          ha-paper-dropdown-menu:
            $:
              paper-menu-button:
                .dropdown-trigger:
                  paper-input:
                    $:
                      paper-input-container:
                        $: |
                          .floated-label-placeholder {
                            height: 0px;
                          }
                        .: |
                          label {
                            display: none;
                          }
          hui-input-select-entity-row:
            $: |
              state-badge {
                display: none;
              }

Thank you!

[Ildar_Gabdullin]

    type: entities
    entities:
      - entity: input_select.test_sensors_for_graph
        style:
          ha-paper-dropdown-menu:
            $:
              paper-menu-button:
                .dropdown-trigger:
                  paper-input:
                    $:
                      paper-input-container:
                        $: |
                          .floated-label-placeholder {
                            height: 0px;
                          }
                        .: |
                          label {
                            display: none;
                          }
          .: |
            :host state-badge {
              display: none;
            }

[jmoneo (Joaquin)]

Thank you!

[Ildar_Gabdullin]

Regarding a bug described here:

Card-mod - Add css styles to any lovelace card

Trying to learn how to change an icon’s color for buttons in a card’s footer (or header). Here is an easy way: type: entities title: '--paper-item-icon-color -> .header-footer.footer' style: | .header-footer.footer { --paper-item-icon-color: red; } entities: - sun.sun - type: divider footer: type: buttons entities: - entity: sensor.cleargrass_1_co2 - entity: sun.sun [image] Note that the color is changed only for the 1st entity, for the "sun.sun" we are supposed t…

Can anyone tell me what could be a difference between these 2 cases:
This works BAD:

type: entities
title: color -> ha-svg-icon (+div)
style:
  .header-footer.footer:
    hui-buttons-header-footer:
      $:
        hui-buttons-base:
          $:
            div:
              state-badge:
                $:
                  ha-icon:
                    $: |
                      ha-svg-icon {
                        color: red;
                      }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun

This works GOOD:

type: entities
title: color -> ha-svg-icon (+div 2)
style:
  .header-footer.footer:
    hui-buttons-header-footer$hui-buttons-base$div:
      state-badge:
        $:
          ha-icon:
            $: |
              ha-svg-icon {
                color: red;
              }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun

The schema:

[KTibow (Kendell R)]

@Ildar_Gabdullin

  .header-footer.footer:
    hui-buttons-header-footer:

I don’t think that’s valid syntax.

[Ildar_Gabdullin]

@KTibow

I don’t think that’s valid syntax.

What is a valid syntax then?
Usually I use this method and it works…
Should I use here .header-footer.footer hui-buttons-header-footer: ?
Tried, same misplacement.

[Mariusthvdb (Marius)]

o wow, you’ve been at it once again. so cool. thanks!

regarding the suspected bug, would this be in card-mod, or the core picture-glance card…

still, give the fact you say we can now only mod the full group (right side, with the togglable entities): can we set a template there for them to only toggle when ‘on’). Really interested to see what would happen.

btw, if I try your top code with the spinning icons, nothing is spinning:

  - type: picture-glance
    image: /local/images/vijver.png
    style: |
      .box:
        'div:nth-child(3)':
          .wrapper:
            ha-icon-button:
              $:
                mwc-icon-button:
                  $: |
                    .mdc-icon-button {
                        color: cyan;
                        animation: rotation 0.5s linear infinite;
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }

    title: Vijverpompen
    state_filter:
      'off': grayscale(72%)
    entity: binary_sensor.vijverpompen
    entities:
      - switch.vijverpomp_links
      - switch.vijverpomp_rechts
      - input_boolean.vijverpompen_alterneren
      - sensor.pond_buiten_sensor_calibrated_temperature
      - binary_sensor.vijverpompen
      - sensor.vijverpompen

[Ildar_Gabdullin]

@Mariusthvdb

we can now only mod the full group (right side, with the togglable entities):

Styling Glance card:

Colored icons:
Only left items (which are not togglable):

type: picture-glance
title: left
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
card_mod:
  style:
    .box div:nth-child(2) .wrapper:
      ha-icon-button ha-state-icon:
        $: |
          ha-svg-icon {
            color: cyan;
          }

Different colors for items:

Note: white color = default style for on, --disabled-color - for off.

type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
card_mod:
  style:
    .box div:nth-child(2):
      div:nth-child(1):
        ha-icon-button ha-state-icon:
          $: |
            ha-svg-icon {
              color: orange;
            }
      div:nth-child(2):
        ha-icon-button ha-state-icon:
          $: |
            ha-svg-icon {
              color: cyan;
            }
      div:nth-child(4):
        ha-icon-button ha-state-icon:
          $: |
            ha-svg-icon {
              color: yellow;
            }
    .box div:nth-child(3):
      div:nth-child(1):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: red;
                }
      div:nth-child(4):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: lightgreen;
                }

Different colors for items + changed default colors:

Default colors are defined by these variables:

• --ha-picture-icon-button-on-color;
• --ha-picture-icon-button-color.

type: picture-glance
title: +vars
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
card_mod:
  style:
    .box div:nth-child(2):
      div:nth-child(1):
        ha-icon-button ha-state-icon:
          $: |
            ha-svg-icon {
              color: orange;
            }
      div:nth-child(2):
        ha-icon-button ha-state-icon:
          $: |
            ha-svg-icon {
              color: cyan;
            }
      div:nth-child(4):
        ha-icon-button ha-state-icon:
          $: |
            ha-svg-icon {
              color: yellow;
            }
    .box div:nth-child(3):
      div:nth-child(1):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: red;
                }
      div:nth-child(4):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: lightgreen;
                }
    .: |
      ha-card {
        --ha-picture-icon-button-on-color: black;
        --ha-picture-icon-button-color: brown;
      }

Different default colors for items:

type: picture-glance
title: vars
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  .box div:nth-child(2) div:nth-child(2) {
    --ha-picture-icon-button-on-color: cyan;
    --ha-picture-icon-button-color: brown;
  }
  .box div:nth-child(2) div:nth-child(3) {
    --ha-picture-icon-button-on-color: black;
    --ha-picture-icon-button-color: green;
  }
  .box div:nth-child(3) div:nth-child(1) {
    --ha-picture-icon-button-on-color: red;
    --ha-picture-icon-button-color: black;
  }
  .box div:nth-child(3) div:nth-child(2) {
    --ha-picture-icon-button-on-color: black;
    --ha-picture-icon-button-color: pink;
  }
  .box div:nth-child(3) div:nth-child(4) {
    --ha-picture-icon-button-on-color: lightgreen;
    --ha-picture-icon-button-color: yellow;
  }

Resized icons:
For all items:

type: picture-glance
title: all
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  ha-card {
    --mdc-icon-size: 40px;
  }

For left items:

type: picture-glance
title: left
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
card_mod:
  style:
    .box .wrapper:
      ha-icon-button ha-state-icon:
        $:
          ha-icon:
            $: |
              ha-svg-icon {
                vertical-align: super;
              }
    .: |
      .box div:nth-child(2) .wrapper {
        --mdc-icon-size: 40px;
      }

Different sizes for items:

type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
card_mod:
  style:
    .box .wrapper:
      ha-icon-button ha-state-icon:
        $:
          ha-icon:
            $: |
              ha-svg-icon {
                vertical-align: super;
              }
          .: |
            ha-svg-icon {
              vertical-align: super;
            }
    .: |
      .box div:nth-child(2) div:nth-child(2) {
        --mdc-icon-size: 10px;
      }
      .box div:nth-child(2) div:nth-child(3) {
        --mdc-icon-size: 50px;
      }
      .box div:nth-child(3) div:nth-child(1) {
        --mdc-icon-size: 35px;
      }

Colored title:

type: picture-glance
title: Title
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  .box .title {
    color: orange;
  }

How to limit an area for the title:
By default the long title occupies all available area and icons are shifted to the right, causing some items not to be displayed:

To prevent this you may limit an area available for the title.
But in this case the title will be clipped.
This styling makes a better look:

type: picture-glance
title: Title long long long long long
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  .box .title {
    text-overflow: unset;
    white-space: normal;
    max-width: 130px;
    font-size: 13px;
    line-height: 1.2;
    align-self: center;
  }

Rotating icons:
Only right items:

type: picture-glance
title: right
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
style:
  .box div:nth-child(3):
    .wrapper:
      ha-icon-button ha-state-icon $ ha-icon $: |
        ha-svg-icon {
          animation: rotation 0.5s linear infinite;
        }
        @keyframes rotation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(359deg);
          }
        }

Some items:

type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
style:
  .box div:nth-child(2):
    div:nth-of-type(2) ha-icon-button ha-state-icon $: |
      ha-svg-icon {
        animation: rotation 0.5s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
    div:nth-of-type(3) ha-icon-button ha-state-icon $: |
      ha-svg-icon {
        animation: rotation 5s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
  .box div:nth-child(3):
    div:nth-of-type(1) ha-icon-button ha-state-icon $ ha-icon $: |
      ha-svg-icon {
        animation: rotation 5s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
    div:nth-of-type(2) ha-icon-button ha-state-icon $ ha-icon $: |
      ha-svg-icon {
        animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(359deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }

Note that the “sun” icon is not centered - IMHO it happens because the icon ITSELF not centered properly.
Update: should be fixed in a future MDI release.

Some more animations:

type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
    icon: mdi:bell
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
  - entity: input_boolean.test_boolean
    icon: mdi:plus-circle
card_mod:
  style:
    .box div:nth-child(2):
      div:nth-of-type(1) ha-icon-button ha-state-icon $: |
        ha-svg-icon {
          animation: jumping 1s linear infinite alternate;
        }
        @keyframes jumping {
          0% {
            margin-top: -20px;
          }
          100% {
            margin-top: 6px;
          }
      div:nth-of-type(2) ha-icon-button ha-state-icon $: |
        ha-svg-icon {
          animation: coloring 1s linear infinite;
        }
        @keyframes coloring {
          0% {
            color: blue;
          }
          100% {
            color: red;
          }
        }
      div:nth-of-type(3) ha-icon-button ha-state-icon $: |
        ha-svg-icon {
          animation: resizing 1s linear infinite;
        }
        @keyframes resizing {
          0% {
            --mdc-icon-size: 8px;
          }
          25% {
            --mdc-icon-size: 12px;
          }
          50% {
            --mdc-icon-size: 16px;
          }
          75% {
            --mdc-icon-size: 20px;
          }
          100% {
            --mdc-icon-size: 24px;
          }
        }
      div:nth-of-type(4) ha-icon-button ha-state-icon $ ha-icon $: |
        ha-svg-icon {
          animation: wobbling 1s linear infinite alternate;
        }
        @keyframes wobbling {
        0% {
          transform: rotate(-45deg);
        }
        100% {
          transform: rotate(+45deg);
        }
    .box div:nth-child(3):
      div:nth-of-type(1) ha-icon-button ha-state-icon $ ha-icon $: |
        ha-svg-icon {
          animation: stretching_x 1s linear infinite alternate;
        }
        @keyframes stretching_x {
          0% {
            transform: scaleX(0.5);
          }
          100% {
            transform: scaleX(2.0);
          }
        }
      div:nth-of-type(2) ha-icon-button ha-state-icon $ ha-icon $: |
        ha-svg-icon {
          animation: stretching_y 1s linear infinite alternate;
        }
        @keyframes stretching_y {
          0% {
            transform: scaleY(0.5);
          }
          100% {
            transform: scaleY(2.0);
          }
      div:nth-of-type(3) ha-icon-button ha-state-icon $ ha-icon $: |
        ha-svg-icon {
          animation: flipping 1s linear infinite;
        }
        @keyframes flipping {
          0% {
            transform: rotateX(0deg);
          }
          100% {
            transform: rotateX(359deg);
          }
        }
      div:nth-of-type(4) ha-icon-button ha-state-icon $ ha-icon $: |
        ha-svg-icon {
          animation: disappearing 1s linear infinite alternate;
        }
        @keyframes disappearing {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }

Colored state:
All states:

type: picture-glance
title: all
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style:
  .box .row: |
    .wrapper .state {
      color: orange;
    }

Some state:

type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  .box .row div:nth-child(3) .state {
    color: red;
  }
  .box .row div:nth-child(4) .state {
    color: black;
  }

Overwritten style:

type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style:
  .box .row: |
    .wrapper .state {
      color: orange;
    }
    div:nth-child(3) .state {
      color: red !important;
    }

How to display long states:
Here is how states are displayed by default:

To make states visible:

• increase a width for items;
• decrease a font-size.

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style:
  .box .row: |
    .wrapper {
      width: 70px !important;
    }
    .wrapper ha-icon-button {
      align-self: center;
    }
    .wrapper .state {
      font-size: 9px;
    }

Long states may be displayed as 2 lines. For this enable word-wrapping for a text.
Note that the whole row is automatically increased.

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style:
  .box .row: |
    .wrapper {
      width: 50px !important;
    }
    .wrapper ha-icon-button {
      align-self: center;
    }
    .wrapper .state {
      text-overflow: unset;
      white-space: normal;
      font-size: 9px;
    }

How to change a style for some item:

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style:
  .box .row: |
    div:nth-child(3) {
      width: 70px !important;
    }
    .wrapper ha-icon-button {
      align-self: center;
    }
    div:nth-child(3) .state {
      font-size: 9px;
    }

or this:

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style:
  .box .row: |
    div:nth-child(3) {
      width: 50px !important;
    }
    .wrapper ha-icon-button {
      align-self: center;
    }
    div:nth-child(3) .state {
      text-overflow: unset;
      white-space: normal;
      font-size: 9px;
    }

How to display states for resized icons:
If icons are resized, then states may be misplaced:

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  ha-card {
    --mdc-icon-size: 80px;
  }

If a width for items is increased, then it is clear that states are misaligned too (not aligned with respect to icons):

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  ha-card {
    --mdc-icon-size: 80px;
  }
  ha-card .box .row div {
    width: 100px !important;
  }

How to solve it:

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  ha-card .box .row .wrapper ha-icon-button {
    --mdc-icon-button-size: 80px !important;
  }
  ha-card {
    --mdc-icon-size: 80px;
  }
  ha-card .box .row .wrapper {
    align-items: center !important;
  }
  ha-card .box .row div {
    width: 100px !important;
  }

How to align text vertically for the title (+ resizing the footer):
If states are displayed, then the title may be not aligned vertically:

To align it vertically, set the "line-height" property = height of the footer (should be measured via Inspector):

type: picture-glance
title: vertical align
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  .box .title {
    line-height: 52px;
  }

Also, it is possible to specify the height of the footer explicitly:

type: picture-glance
title: vertical align
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  ha-card .box {
    height: 80px;
  }
  ha-card .box .title {
    line-height: 80px;
  }

Changed background for the bottom row:

type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  ha-card .box {
    background-color: rgba(0,255,0,0.5);
  }

Styling an image:
This section describes how to make the image to fit the defined card’s size.
By default the card’s size depends on the image’s size:

type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean

If the card’s size is defined then the image’s size do not change automatically:

type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style: |
  ha-card {
    height: 300px !important;
  }

Here is how to fix it:

type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style:
  hui-image:
    $: |
      div {
        height: inherit;
      }
      div img {
        height: inherit;
      }
    .: |
      hui-image {
        height: 100%;
      }
  .: |
    ha-card {
      height: 300px !important;
    }

Without a bottom row:

Note: this will work if the bottom row’s height is 40px (+8px for padding); otherwise use an approprite value in formula instead of “48px”.

type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
  - entity: sun.sun
  - entity: sun.sun
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
card_mod:
  style:
    hui-image:
      $: |
        div {
          display: inline;
        }
        div img {
          height: 100%;
        }
      .: |
        hui-image {
          height: calc(100% - 48px);
        }
    .: |
      ha-card {
        height: 300px !important;
      }

---

More examples are described here.

[Mariusthvdb (Marius)]

cool

meanwhile I am struggling with the mod-card config, and more specifically, I am trying too have the button card show a transparent background, to reveal the image better. Since the buttons use a template in which depending on the theme a certain color variable is used there’s some difficulty in finding the correct syntax:
this works, but has the wrong effect, it simply sets the opacity on all of the button, including text and icon

            - type: custom:button-card
              template:
                - button_switch
                - spin
              style: |
                ha-card {box-shadow: none;opacity: 0.9;}
              entity: switch.vijverpomp_links
              triggers_update: sensor.vijverpomp_links_actueel
              name: Pomp left

Or:

              styles:
                card:
                  - filter: opacity(50%)

I dont want that, and would prefer to set the opacity to the background only, and tried:

            - type: custom:button-card
              template:
                - button_switch
                - spin
              style: |
                ha-card {box-shadow: none;
                         background-color: rgba(0,0,0,0.2);}

this doesnt stick at all:

I also tried background:, to no avail…
what to do?

edit
this was no card-mod issue, sorry, its a button-card styling thing… needed to merge state by id (because of the other stylings already set):

              state:
                - value: 'on'
                  id: state-on
                  styles:
                    card:
                      - background: rgba(0,0,0,0.6)
                - value: 'off'
                  id: state-off
                  styles:
                    card:
                      - background: rgba(0,0,0,0.6)

[Mariusthvdb (Marius)]

great!

    style:
      '.box div:nth-child(3)':
        'div:nth-child(1)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    animation: rotation 2s linear infinite;
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
        'div:nth-child(2)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    animation: rotation 0.5s linear infinite;
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(360deg);
                    }
                    100% {
                      transform: rotate(0deg);
                    }
                  }

shows as:

one more styling wish would be to combine this with state dependency:
on: rotation on, color blue
off: no rotation, color grey

Can we combine those in the styling mod?

[Ildar_Gabdullin]

@Mariusthvdb

rotation

You may also use another animations:

Check my post above.

[Ildar_Gabdullin]

@Mariusthvdb

Can we combine those in the styling mod?

Yes, we can.

[Mariusthvdb (Marius)]

now you’re teasing me…

[Ildar_Gabdullin]

BTW, could you share a picture of pump?

[Mariusthvdb (Marius)]

what do you mean exactly, I’ve posted a gif above?

[Ildar_Gabdullin]

I mean this thing:

Is it a pump or a valve ?)

[Mariusthvdb (Marius)]

it is mdi:engine, and mdi:engine-off customized in custom-ui:

    switch.vijverpomp_*:
      templates:
        icon: >
          if (state == 'on') return 'mdi:engine';
          return 'mdi:engine-off';
        icon_color: >
          if (state == 'on') return 'blue';
          return 'grey';

so I don’t need that in this style, only color and animation. (Customized color isn’t recognized in this Lovelace card unfortunately, hence the need to set it in the card-mod style)

in real life they are 2 pumps, not valves

[Ildar_Gabdullin]

@Mariusthvdb

Customized color isn’t recognized in this Lovelace card unfortunately,

I know nothing about Custom UI, it is in my future plans.