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

jmoneo · April 1, 2021, 4:08pm

Thank you!

Ildar_Gabdullin · April 1, 2021, 10:33pm

Regarding a bug described here:

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 · April 1, 2021, 11:47pm

I don’t think that’s valid syntax.

Ildar_Gabdullin · April 2, 2021, 12:06am

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 · April 2, 2021, 8:06am

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 · April 2, 2021, 8:58am

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

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

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

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 · April 2, 2021, 10:05am

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 · April 2, 2021, 12:08pm

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:

Apr-02-2021 14-06-05

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 · April 2, 2021, 12:57pm

You may also use another animations:
aaaaa
Check my post above.

Ildar_Gabdullin · April 2, 2021, 12:57pm

Yes, we can.

Mariusthvdb · April 2, 2021, 2:35pm

now you’re teasing me…

Ildar_Gabdullin · April 2, 2021, 2:36pm

BTW, could you share a picture of pump?

Mariusthvdb · April 2, 2021, 2:39pm

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

Ildar_Gabdullin · April 2, 2021, 2:41pm

I mean this thing:

Is it a pump or a valve ?)

Mariusthvdb · April 2, 2021, 2:42pm

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 · April 2, 2021, 3:06pm

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

Mariusthvdb · April 2, 2021, 3:10pm

well, that’s ok, it is ‘old’ states UI, still being kept alive.

Card-mod is the way to go forward, though I still use custom-ui fervently, because of its power to set customizations globally on entities, domains or globs in HA, and not per card in Lovelace.

That being said, if you can please help me combine the animation and icon_color in the style mod based on state, Id be most grateful…

Ildar_Gabdullin · April 2, 2021, 3:57pm

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
  - type: picture-glance
    title: "title"
    image: /local/images/blue_low.jpg
    entities:
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
    style:
      '.box div:nth-child(3)':
        'div:nth-child(2)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
      .: | 
        .box div:nth-child(3) div:nth-child(2)  {
          --ha-picture-icon-button-on-color: blue;
        }

But may be this one you will like more:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
  - type: picture-glance
    title: title
    image: /local/images/blue_low.jpg
    entities:
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
    style:
      '.box div:nth-child(3)':
        'div:nth-child(2)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: blue;
                    }
                  }
      .: |
        .box div:nth-child(3) div:nth-child(2) {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }

ggggggggggggg

Mariusthvdb · April 2, 2021, 5:27pm

very very nice, thanks you so much.

Was wondering ion we could take this 1 step further even, by not explicitly mentioning the entity in the template, but using something we can use elsewhere too, like:

{% if is_state(entity,'on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}

because it would customize the already identified entity

'.box div:nth-child(3)':
        'div:nth-child(2)':

?

btw, using this on the 2 separate switches makes only 1 behave correctly, I suspect an indent issue, but cant find it.:

    style:
      '.box div:nth-child(3)':
        'div:nth-child(1)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('switch.vijverpomp_links','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--text-color-off);
                    }
                    100% {
                      color: blue;
                    }
                  }
      .: |
        .box div:nth-child(3) div:nth-child(1) {
          --ha-picture-icon-button-on-color: var(--text-color-off);
        }

        'div:nth-child(2)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('switch.vijverpomp_rechts','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--text-color-off);
                    }
                    100% {
                      color: blue;
                    }
                  }
      .: |
        .box div:nth-child(3) div:nth-child(2) {
          --ha-picture-icon-button-on-color: var(--text-color-off);
        }

Ildar_Gabdullin · April 2, 2021, 8:42pm

We cannot use here smth like "config.entity".

  - type: picture-glance
    title: title
    image: /local/images/blue_low.jpg
    entities:
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
    style:
      '.box div:nth-child(3)':
        'div:nth-child(2)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: blue;
                    }
                  }
        'div:nth-child(1)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: blue;
                    }
                  }
      .: |
        .box div:nth-child(3) div:nth-child(2) {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }
        .box div:nth-child(3) div:nth-child(1) {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }

Actually, since the " --ha-picture-icon-button-on-color" is supposed to be the same for the 1st & 2nd item, the corresponding code may be reduced - if there is no other entities in this “right” group.