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

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

Using the lovely Somfy Orange…

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

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

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

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…

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

1 Like

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:

  1. The 1st method - allows to change a color permanently (whether the input field is selected or not).
  2. 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.

image

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:

image

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

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.

image

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

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.

image

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.

image

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

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

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

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

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

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

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

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

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

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

image

How to add a scrollbar to the list:
post
image

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

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


More examples are described here.

15 Likes

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

1 Like

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

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

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

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

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

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!

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

image

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.

8 Likes