šŸ”¹ Card-mod - Add css styles to any lovelace card

Thank you!

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

image

The schema:

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.

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

Styling Glance card:

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

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

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

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

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

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

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

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

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

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

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

To make states visible:

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

image

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

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

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

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

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

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

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

image

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

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

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

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

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

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

9 Likes

cool :wink:

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)

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?

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

1 Like

Yes, we can.

now youā€™re teasing meā€¦

BTW, could you share a picture of pump?

what do you mean exactly, Iā€™ve posted a gif above?

I mean this thing:
image
Is it a pump or a valve ?)

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

1 Like

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

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ā€¦

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;
        }

aa

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

2 Likes

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

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.