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

Mariusthvdb · April 1, 2021, 7:06am

ok cool, but don’t waste your time on it…
I’ve also asked RomRider if he would accept a FR on some of his cards, stack-in-card in this case to enable this feature. For now, it’ll have to be what it is…

never mind the edit, I used text-color because I was afraid using color would also color the icons, but it doesn’t

Using the lovely Somfy Orange…

      .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          font-size: 20px;
          color: orange;
          }

CDRX2 · April 1, 2021, 9:32am

Just tried the following and it worked:

type: 'custom:mod-card'
card:
  cards:
    ...
  type: vertical-stack
card_mod:
  style: |
    ha-card {
      background: var(--paper-card-background-color) !important;
    }

Ildar_Gabdullin · April 1, 2021, 9:47am

This is great )))
Will it work with custom:stack-in-card ?
Have not checked it by myself

CDRX2 · April 1, 2021, 10:00am

I think it should, but I don’t have a setup to test that right now (changing my current vertical-stack to stack-in-card automatically adds a background, without using mod-card…

Mariusthvdb · April 1, 2021, 10:01am

it does:

  - type: entities
#    header:
#      type: picture
#      image: /local/images/vijver.png
    entities:
#      - type: custom:hui-element
#        card_type: picture
#        image: /local/images/vijver.jpg
#        style: |
#          ha-card {
#            box-shadow: none;
#            margin: -16px -16px 0px -16px;
#          }
      - type: custom:hui-element
        card_type: custom:mod-card
        card_mod:
          style: |
            ha-card {
              background: url('/local/images/vijver.jpg');
              margin: -16px -16px 0px -16px;
              background-size: cover;
              }
        card:
          type: horizontal-stack
          cards:

            - type: custom:button-card
              template: button_switch
              entity: switch.vijverpomp_links
              triggers_update: sensor.vijverpomp_links_actueel
              name: Pomp left

            - type: custom:button-card
              template: button_switch
              entity: switch.vijverpomp_rechts
              triggers_update: sensor.vijverpomp_rechts_actueel
              name: Pomp right

            - type: custom:button-card
              color_type: blank-card

            - type: custom:button-card
              color_type: blank-card

      - entity: input_boolean.vijverpompen_alterneren
        secondary_info: last-changed
      - entity: binary_sensor.vijverpompen
        secondary_info: last-changed
      - entity: sensor.vijverpompen
        secondary_info: last-changed
      - entity: sensor.pond_buiten_sensor_calibrated_temperature
        name: Temperature Pond

need to fine-tune a bit still but hey, this is awesome!
my first ever mod-card

Ildar_Gabdullin · April 1, 2021, 10:18am

Styling an "input_select" row.

Update (21.06.22): the post is updated with styles for MDC controls; old styles (see at the bottom of the post) do not work since 2022.3.

Colored name:
Two methods are available:
– using a CSS property with a detailed DOM navigation;
– using a CSS variable.

is8

Notes:

The 1st method - allows to change a color permanently (whether the input field is selected or not).
The 2nd method - the name’s color changes if an input field is selected (from “--mdc-select-label-ink-color” to “--mdc-theme-primary”).

code

      - type: entities
        title: Colored name
        entities:
          - entity: input_select.test_value
            name: сustom (method 1)
            card_mod:
              style:
                ha-select $: |
                  span#label {
                    color: red;
                  }
          - entity: input_select.test_value
            name: сustom (method 2)
            card_mod:
              style:
                ha-select $: |
                  span#label {
                    --mdc-select-label-ink-color: magenta;
                    --mdc-theme-primary: orange;
                  }
          - entity: input_select.test_value
            name: default

How to style several rows:
is7

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        title: Colored name for all entities
        card_mod:
          style:
            .card-content:
              div:
                hui-input-select-entity-row $ hui-generic-entity-row ha-select $: |
                  span#label {
                    --mdc-select-label-ink-color: magenta;
                    --mdc-theme-primary: orange;
                  }
        entities:
          - entity: input_select.test_value
            name: Cannot be overwritten
            card_mod:
              style: |
                :host {
                  --mdc-select-label-ink-color: cyan;
                  --mdc-theme-primary: green;
                }
          - entity: input_select.test_value
            name: Overwritten style
            card_mod:
              style:
                ha-select $: |
                  span#label {
                    color: red;
                  }
          - entity: input_select.test_value
            name: Colored name (common)
          - entity: input_select.test_value
            name: Colored name (common)

Colored icon:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.

code

      - type: entities
        title: Colored icon for some entity
        entities:
          - entity: input_select.test_value
            name: 'Colored icon (method #1)'
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_select.test_value
            name: 'Colored icon (method #2)'
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    color: red;
                  }      
          - entity: input_select.test_value
            name: default

How to style several rows:

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        title: Colored icon for all entities
        card_mod:
          style: |
            ha-card {
              --paper-item-icon-color: cyan;
            }
        entities:
          - entity: input_select.test_value
            name: Overwritten color
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_select.test_value
            name: Colored icon (common)
          - entity: input_select.test_value
            name: Colored icon (common)

Some other styles for an icon - resized icon, hidden icon:

code

      - type: entities
        title: Other styles for icon
        entities:
          - entity: input_select.test_value
            name: resized icon
            card_mod:
              style: |
                :host {
                  --mdc-icon-size: 40px;
                }
          - entity: input_select.test_value
            name: hidden icon
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }

Colored value:
Two methods are available:
– using a CSS property with a detailed DOM navigation;
– using a CSS variable.

code

      - type: entities
        title: Colored value
        entities:
          - entity: input_select.test_value
            name: colored value (method 1)
            card_mod:
              style:
                ha-select $: |
                  span.mdc-select__selected-text {
                    color: red !important;
                  }
          - entity: input_select.test_value
            name: colored value (method 2)
            card_mod:
              style: |
                :host {
                  --mdc-select-ink-color: orange;
                }
          - entity: input_select.test_value
            name: default

Colored field’s background:

code

      - type: entities
        title: Colored background
        entities:
          - entity: input_select.test_value
            name: colored background
            card_mod:
              style: |
                :host {
                  --mdc-select-fill-color: lightgreen;
                }
          - entity: input_select.test_value
            name: default

Colored underline:
The underline had 3 possible states:
– a default (static) state;
– the input field is hovered by a mouse;
– the input field is selected by a mouse.

There are CSS variables for each state.
In the example below:
– the 1st row is modded by using these CSS variables;
– the 2nd row is modded by changing CSS properties with a detailed DOM navigation;
– the 3rd row has transparent underlines.

is2

code

      - type: entities
        title: Colored underline
        entities:
          - entity: input_select.test_value
            name: colored underline (method 1)
            card_mod:
              style: |
                :host {
                  --mdc-select-idle-line-color: orange;
                  --mdc-select-hover-line-color: cyan;
                  --mdc-theme-primary: magenta;
                }
          - entity: input_select.test_value
            name: colored underline (method 2)
            card_mod:
              style:
                ha-select $: |
                  .mdc-line-ripple::before {
                    border-bottom-color: orange !important;
                  }
                  .mdc-line-ripple::after {
                    border-bottom-color: magenta !important;
                  }
          - entity: input_select.test_value
            name: no underline
            card_mod:
              style:
                ha-select $: |
                  .mdc-line-ripple::before,
                  .mdc-line-ripple::after {
                    border-bottom-style: none !important;
                  }
          - entity: input_select.test_value
            name: default

Colored button:
is1

code

      - type: entities
        title: Colored button
        entities:
          - entity: input_select.test_value
            name: colored button
            card_mod:
              style:
                ha-select $: |
                  .mdc-select__dropdown-icon {
                    --mdc-select-dropdown-icon-color: red;
                    --mdc-theme-primary: cyan;
                  }
          - entity: input_select.test_value
            name: default

Managing list’s & items’ height:
is3

code

  - type: entities
    title: Styling a list
    entities:
      - entity: input_select.test_value
        name: item's height
        card_mod:
          style: |
            :host {
              --mdc-menu-item-height: 16px;
            }
      - entity: input_select.test_value
        name: list's height
        card_mod:
          style:
            ha-select $ mwc-menu $: |
              mwc-list {
                max-height: 96px;
              }
      - entity: input_select.test_value
        name: default

Managing list’s & items’ color:
is4

code

  - type: entities
    title: Colored list's items
    entities:
      - entity: input_select.test_value
        name: colored all items (selected item - differenly) + background
        card_mod:
          style:
            ha-select $: |
              mwc-menu {
                --mdc-theme-text-primary-on-background: red;
                --mdc-theme-primary: green;
                --mdc-theme-surface: yellow;
              }
      - entity: input_select.test_value
        name: colored all items (same color)
        card_mod:
          style: |
            mwc-list-item {
              color: red;
            }
      - entity: input_select.test_value
        name: colored all items (selected item - differenly)
        card_mod:
          style: |
            mwc-list-item {
              --mdc-theme-text-primary-on-background: red;
              --mdc-theme-primary: green;
            }
      - entity: input_select.test_value
        name: colored 2nd item
        card_mod:
          style: |
            mwc-list-item:nth-of-type(2) {
              color: red;
            }
      - entity: input_select.test_value
        name: default

Making the name hidden or more compact:
Since the row has a bigger height than other entity rows, we may want to make a row more compact.
First, we need to customize the row’s height.
Next, there are 2 options for a name & a value:
– remove the name;
– place the name and the value closer to each other.

code

  - type: entities
    title: Hidden/compact name
    entities:
      - entity: input_select.test_value
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: center;
              }
              span#label {
                display: none;
              }
            .: |
              ha-select {
                height: 40px;
              }
      - entity: input_select.test_value
        name: custom
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
            .: |
              ha-select {
                height: 40px;
              }
      - entity: input_select.test_value
        name: default

How to disable an input_select row:
Two methods are available:
– the row is displayed as disabled;
– the row only has a read-only input field.

code

  - type: entities
    title: Locked input_select
    entities:
      - entity: input_boolean.test_boolean
        name: Lock input_select
      - entity: input_select.test_value
        name: disabled
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                --mdc-select-ink-color: var(--disabled-text-color);
                --mdc-select-label-ink-color: var(--disabled-text-color);
                --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                --mdc-select-idle-line-color: var(--disabled-text-color);
                --paper-item-icon-color: var(--disabled-text-color);
                pointer-events: none;
              {% endif %}
            }
      - entity: input_select.test_value
        name: read-only
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }

Fixing a left padding:
Check the difference between the 2nd row (default) & the 3rd row (styled):

code

  - type: entities
    title: left padding
    entities:
      - entity: sun.sun
      - entity: input_select.test_value
      - entity: input_select.test_value
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                padding-inline: 16px 0px !important;
              }
              .mdc-select__anchor span#label {
                inset-inline-start: 16px;
              }

Short list of CSS variables available for “select” control:

Old styles - not valid since HA 2022.3

Styling a button:

type: entities
title: colored button
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input: |
                iron-icon {
                  color: red;
                }

Colored value:

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: |
                    iron-input {
                      color: red;
                    }

Colored items in the list:
Same colors for all items:

type: entities
title: All items
entities:
  - entity: input_select.test_sensors_for_graph
    style: |
      :host {
        --paper-listbox-background-color: yellow;
        --paper-listbox-color: green;
      }

Specific colors for some items:

type: entities
title: Different colors
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        paper-listbox: |
          paper-item:nth-child(2) {
            background-color: cyan;
            color: red;
          }
          paper-item:nth-child(4) {
            background-color: blue;
            color: white;
          }
      .: |
        :host {
          --paper-listbox-background-color: yellow;
          --paper-listbox-color: green;
        }

Colored label & underline:
These elements change their colors when focused.
Label & underline:

type: entities
title: label & underline
entities:
  - entity: input_select.test_sensors_for_graph
    style: |
      :host {
        --paper-input-container-focus-color: red;
        --paper-input-container-color: orange;
      }

Only label:

type: entities
title: label
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input:
                $:
                  paper-input-container: |
                    label {
                      --paper-input-container-focus-color: red;
                      --paper-input-container-color: orange;
                    }

Only underline:

type: entities
title: underline
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input:
                $:
                  paper-input-container:
                    $: |
                      .underline {
                        --paper-input-container-focus-color: red;
                        --paper-input-container-color: orange;
                      }

Hidden label:

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

Reduced item’s height:

type: entities
title: Item's height
entities:
  - entity: input_select.test_sensors_for_graph
    card_mod:
      style: |
        :host {
          --paper-font-subhead_-_line-height: 30px;
          --paper-item-min-height: 20px;
        }

How to add a scrollbar to the list:
post

How to disable a control:

type: entities
title: Locked input_select
entities:
  - entity: input_boolean.test_boolean
    name: Lock input_select
  - entity: input_select.test_value
    tap_action:
      action: none
    card_mod:
      style:
        ha-paper-dropdown-menu:
          $:
            paper-menu-button:
              .dropdown-trigger:
                paper-input:
                  $:
                    paper-input-container: |
                      iron-input {
                        {% if is_state('input_boolean.test_boolean','on') %}
                          color: var(--disabled-text-color);
                        {% endif %}
                      }
        .: |
          :host {
            {% if is_state('input_boolean.test_boolean','on') %}
              --paper-item-icon-color: var(--disabled-text-color);
              --paper-input-container-color: var(--disabled-text-color);
              pointer-events: none;
            {% endif %}
          }

Also, you may remove color options to make the row clearly visible but “read-only”.

More examples are described here.

Ildar_Gabdullin · April 1, 2021, 10:51am

Check this post, may be you will find something useful.

ASNNetworks · April 1, 2021, 10:55am

Yes, mod-card should work with all cards that have no ha-card. I use it for stack-in-card myself as well. The usage is explained here: https://github.com/thomasloven/lovelace-card-mod#styling-cards-without-an-ha-card-element

Mariusthvdb · April 1, 2021, 12:05pm

yes, but its a bit more complex when that card itself is encapsulated in another card, see my example above. hui-element to the rescue though, and note, the mod-card modded card can be the regular card type again, no need for hui-element of custom:hui-xxx

phairplay · April 1, 2021, 12:37pm

I want to monitor the different devices one below the other along with their name, and having the padding reduced allows me to view it on my mobile phone without scrolling.

I’ve been able to do the same on glance cards but I can’t seem to get it to work on the horizontal-stack

Mariusthvdb · April 1, 2021, 3:03pm

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 · April 1, 2021, 3:13pm

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

jmoneo · April 1, 2021, 3:41pm

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 · April 1, 2021, 3:52pm

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