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

Styling Entities card.
(including some special row elements - button, section, divider)

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

Colored background & rounded corners - can be easily achieved by using "--ha-card-background" & "--ha-card-border-radius" variables:
image

type: entities
title: Title
entities:
  - entity: sun.sun
style: |
  ha-card {
    --ha-card-background: orange;
    --ha-card-border-radius: 14px;
  }

Using background image:
Test image:


By default a background image is placed w/o a resizing:
image

type: entities
entities:
  - entity: sun.sun
title: Image clipped
style: |
  ha-card {
    background-image: url("/local/images/blue_low_2.jpg");
  }

How to fit the image to the defined card’s size:
image
Note: the card’s height is defined.

type: entities
entities:
  - entity: sun.sun
title: Image fitted
style: |
  ha-card {
    background-image: url("/local/images/blue_low_2.jpg");
    background-size: 100% 100%;
    height: 250px !important;
  }

For a content area only:
image

type: entities
entities:
  - entity: sun.sun
title: Image fitted to content
style: |
  ha-card .card-content {
    background-image: url("/local/images/blue_low_2.jpg");
    background-size: 100% 100%;
  }

For a header area only:
image

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
title: Image fitted to header
style: |
  ha-card .card-header {
    background-image: url("/local/images/blue_low_2.jpg");
    background-size: 100% 100%;
  }

With a defined position:
image

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
title: Image placed on header
style: |
  ha-card .card-header {
    background-image: url("/local/images/blue_low_2.jpg");
    background-size: 30% 50%;
    background-position: 95% center;
    background-repeat: no-repeat;
  }

Colored text: (w/o 'secondary_info')
изображение

type: entities
entities:
  - entity: sun.sun
    name: Colored text
    style: |
      :host {
        color: red;
      }
  - entity: sun.sun
    name: Colored value
    style:
      hui-generic-entity-row:
        $: |
          .text-content:not(.info) {
            color: orange;
          }      
  - entity: sun.sun
    name: Colored name
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer.text-content {
            color: green;
          }
  - entity: sun.sun
    name: Colored name & value
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer.text-content {
            color: green;
          }
          .text-content:not(.info) {
            color: orange;
          }      

Colored text: (with 'secondary_info')
If "secondary_info" is specified then the code changes - I have to use ".info.pointer" instead of ".info.pointer.text-content".
According to my tests in all the cases described above it is possible to always use ".info.pointer" - it seems to work anyway.
изображение

type: entities
entities:
  - entity: sun.sun
    name: Colored name
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: orange;
          }
  - entity: sun.sun
    name: Colored name (with secondary_info)
    secondary_info: last-changed
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: cyan;
          }

Common style: changing a color for all rows: (except 'secondary_info' )
All text (except a title):
изображение

type: entities
title: Some title
style: |
  ha-card .card-content {
    color: red;
  }
entities:
  - entity: input_boolean.test_boolean
  - entity: sun.sun
    secondary_info: last-changed

Only values:
изображение

type: entities
style:
  hui-text-entity-row:
    $:
      hui-generic-entity-row:
        $: |
          .text-content:not(.info) {
            color: red;
          }
entities:
  - entity: sun.sun
  - entity: sun.sun

Only names:
изображение

type: entities
style:
  hui-text-entity-row:
    $:
      hui-generic-entity-row:
        $: |
          .info.pointer.text-content {
            color: green;
          }
entities:
  - entity: sun.sun
  - entity: sun.sun

Values & names:
изображение

type: entities
style:
  hui-text-entity-row:
    $:
      hui-generic-entity-row:
        $: |
          .info.pointer.text-content {
            color: orange;
          }
          .text-content:not(.info) {
            color: red;
          }
entities:
  - entity: sun.sun
  - entity: sun.sun

Changing a color for the whole card (i.e. including a title): (except 'secondary_info')
изображение

type: entities
title: 'Common: all text'
style: |
  ha-card {
    color: orange;
  }
entities:
  - entity: sun.sun
    secondary_info: last-changed
  - entity: sun.sun

Colored title:
изображение

type: entities
title: 'Style: colored title'
style: |
  ha-card .card-header {
      color: red;
  }
entities:
  - entity: sun.sun

Another option - using a "--ha-card-header-color" variable:

type: entities
title: 'Style: colored title'
style: |
  ha-card {
    --ha-card-header-color: red;
  }
entities:
  - entity: sun.sun

Overwriting styles:
изображение
How it is specified:

  • all text is blue
  • all rows’ text is red
  • one row’s text is cyan
type: entities
title: 'Changed color'
style: |
  ha-card {
    color: blue;
  }
  ha-card .card-content {
    color: red;
  }
entities:
  - entity: input_boolean.test_boolean
    name: Inherited color
  - entity: sun.sun
    name: Inherited color
    secondary_info: last-changed
  - entity: sun.sun
    name: Changed color
    secondary_info: last-changed
    style: |
      :host {
       color: cyan;
      }

Other tricks with the header:
image

type: entities
title: Some title (+card-mod)
card_mod:
  style: |
    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }
    ha-card .card-header .name {
      color: red;
      text-align: right;
      font-weight: 1000;
      letter-spacing: 3px;
    }
entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun

Colored secondary_info:
изображение

type: entities
entities:
  - entity: sun.sun
    secondary_info: last-changed
    style:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              color: green !important;
            }

Note that I have to use '!important', it does not work without it - do not know why…

Colored secondaryinfo-entity-row:
Sometimes it is required to use 'custom:secondaryinfo-entity-row', here is how to style it (note that 'hui-toggle-entity-row' is added for example):
изображение

type: entities
entities:
  - type: 'custom:secondaryinfo-entity-row'
    entity: input_boolean.test_boolean
    name: secondaryinfo-entity-row
    secondary_info: some colored text
    style:
      hui-toggle-entity-row:
        $:
          hui-generic-entity-row:
            $: |
              .info.pointer .secondary {
                  color: red;
              }

It looks similarly to the standard 'secondary_info' (no 'ha-relative-time' is specified).

Common styling: changing a color for all 'secondary_info':
изображение

type: entities
title: Common styling
style:
  hui-text-entity-row:
    $:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              color: green !important;
            }
entities:
  - entity: sun.sun
    secondary_info: last-changed
  - entity: sun.sun
    secondary_info: last-changed

How to set different colors for a name & secondary-info:
изображение

type: entities
entities:
  - entity: sun.sun
    secondary_info: last-changed
    style:
      hui-generic-entity-row:
        $:
          .info.pointer: |
            .secondary ha-relative-time {
              color: green;
            }
          .: |
            .info.pointer {
              color: red;
            }

Additional styles for "secondary-info":
post


Colored RUN button row:

type: entities
title: Run button
entities:
  - type: button
    name: Colored text
    tap_action:
      action: none
    card_mod:
      style: |
        .flex {
          color: red;
        }
  - type: button
    name: Colored icon
    tap_action:
      action: none
    card_mod:
      style:
        ha-state-icon:
          $: |
            ha-svg-icon {
              color: green;
            }
  - type: button
    name: Colored button
    tap_action:
      action: none
    card_mod:
      style:
        .flex mwc-button:
          $: |
            .mdc-button {
              color: orange !important;
            }
  - type: section
    label: combined
  - type: button
    name: Colored icon & text
    tap_action:
      action: none
    card_mod:
      style:
        ha-state-icon:
          $: |
            ha-svg-icon {
              color: green;
            }      
        .: |
          .flex {
            color: red;
          }
  - type: button
    name: Colored text & button
    tap_action:
      action: none
    card_mod:
      style:
        .flex mwc-button:
          $: |
            .mdc-button {
              color: orange !important;
            }
          .: |
            .flex {
              color: red;
            }
  - type: button
    name: Colored icon, text & button
    tap_action:
      action: none
    card_mod:
      style:
        ha-state-icon:
          $: |
            ha-svg-icon {
              color: green;
            }      
        .flex mwc-button:
          $: |
            .mdc-button {
              color: orange !important;
            }
          .: |
            .flex {
              color: red;
            }
  - type: button
    name: Colored icon, text & button (express)
    tap_action:
      action: none
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: green;
          color: red;
          --mdc-theme-primary: orange;
        }
  - type: section
  - type: button
    name: Styled button
    tap_action:
      action: none
    card_mod:
      style:
        .flex mwc-button:
          $: |
            .mdc-button {
              background: orange !important;
              margin-right: 10px;
              border: 1px solid black !important;
              border-radius: 10px !important;
            }

Colored section: (including colored label, colored section’s upper line, invisible section’s upper line)

type: entities
title: Colored section
entities:
  - type: section
    label: Colored section
    style: |
      .label {
        color: magenta !important;
      }
  - entity: sun.sun
  - entity: sun.sun
  - type: section
    label: Colored section
    style: |
      .label {
        color: green !important;
      }
  - entity: sun.sun
  - entity: sun.sun
  - type: section
    label: Colored section's line
    style: |
      .divider {
        background-color: red !important;
        margin-top: 32px !important;
        height: 8px !important;
      }
  - entity: sun.sun
  - entity: sun.sun
  - type: section
    label: Invisible section's line
    style: |
      .divider {
        background-color: transparent !important;
        margin-top: 32px !important;
      }
  - entity: sun.sun
  - entity: sun.sun

Styling a section’s upper line includes:

  • "margin-top" - a space before the line;
  • "height" - a line’s thickness;
  • "background-color" - a line’s color.

Note: '!important' is specified.


Styling a divider row:
Styling should be done using native “style” option for “Entities card”.

Colored divider:
изображение

type: entities
title: Colored divider (not-card-mod)
entities:
  - entity: sun.sun
  - entity: sun.sun
  - type: divider
    style:
      background-color: red
      height: 8px
  - entity: sun.sun
  - entity: sun.sun
  - type: divider
    style:
      background-color: magenta
  - entity: sun.sun
  - entity: sun.sun

Invisible divider (may be used as a spacing between rows):
изображение

type: entities
title: Invisible divider (not-card-mod)
entities:
  - entity: sun.sun
  - entity: sun.sun
  - type: divider
    style:
      background-color: transparent
      height: 32px
  - entity: sun.sun
  - entity: sun.sun

Changing an icon’s color:
By default for entities like "sensor" (same for "device_tracker" , "person" , "zone" , …) an icon’s color does not depend on the entity’s state.
There are two methods for changing a color:

  • using a "--paper-item-icon-color" variable;
  • using a "color" CSS property.

For some row (methods #1, #2):
image

type: entities
entities:
  - entity: sensor.cleargrass_1_co2
    name: Colored
    style: |
      :host {
        --paper-item-icon-color: red;
      }
  - entity: sensor.cleargrass_1_co2
    name: Default color
type: entities
entities:
  - entity: sensor.cleargrass_1_co2
    name: Colored
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: red;
            }      
  - entity: sensor.cleargrass_1_co2
    name: Default color

For all rows:
Method #1 (using a "--paper-item-icon-color" variable):
image
Note: for the 3rd row the color was overwritten by an individual style.

type: entities
style: |
  ha-card {
    --paper-item-icon-color: red;
  }      
entities:
  - entity: sensor.cleargrass_1_co2
    name: Colored
  - entity: sensor.cleargrass_1_co2
    name: Colored
  - entity: sensor.cleargrass_1_co2
    name: 'Overwritten color (:host)'
    style: |
      :host {
        --paper-item-icon-color: cyan;
      }
  - entity: sun.sun
    name: Colored

Method #2 (using a "color" CSS property):
image

type: entities
card_mod:
  style:
    hui-sensor-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: red;
            }
    hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: cyan;
            }      
entities:
  - entity: sun.sun
    name: Colored
  - entity: sun.sun
    name: Colored
  - entity: sensor.cleargrass_1_co2
    name: Colored
  - entity: sensor.cleargrass_1_co2
    name: Colored
  - entity: input_boolean.test_boolean
    name: Default color
  - entity: sensor.cleargrass_1_co2
    name: Overwritten color (:host) - failed
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: orange !important;
        }      
  - entity: sensor.cleargrass_1_co2
    name: Overwritten color
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: green !important;
            }

Notes:
1.The 6th icon was not overwritten: the common styling was done by Method #2, the individual styling - by Method #1, so the overwriting failed.
2.The 7th icon was overwritten: the common styling was done by Method #2, the individual styling - by Method #2 (with "!important").
3.The 5th icon was not colored since the "hui-sensor-entity-row" and "hui-text-entity-row" do not affect the "input_boolean" row - the "hui-toggle-entity-row" must be used instead.


By default for entities like "binary_sensor" , "sun.sun" , "switch" , "input_boolean" - an icon’s color DOES depend on the entity’s state - if the property "state_color: true" is set for the card (or for this particular row). If it is set to "false", then the color DOES NOT depend on the state - use same Methods #1, #2 as for the "sensor" (described above).
There are two methods for changing a color:

  • using "--paper-item-icon-color" and "--paper-item-icon-active-color" variables;
  • using a "color" CSS property.

Method #1 (using "--paper-item-icon-color" and "--paper-item-icon-active-color" variables):
For some row:
image

type: entities
state_color: true
entities:
  - entity: binary_sensor.battery_charging_cleargrass_1
    name: Colored
    style: |
      :host {
        --paper-item-icon-active-color: red;
        --paper-item-icon-color: cyan;
      }
  - entity: sun.sun
    name: Default colors
  - entity: binary_sensor.service_off_value
    name: Default colors
  - entity: binary_sensor.service_off_value
    name: Colored
    style: |
      :host {
        --paper-item-icon-active-color: red;
        --paper-item-icon-color: cyan;
      }

For all rows:
image
Note: for the 4th row the colors were overwritten.

type: entities
state_color: true
style: |
  ha-card {
    --paper-item-icon-active-color: red;
    --paper-item-icon-color: cyan;
  }
entities:
  - entity: binary_sensor.battery_charging_cleargrass_1
    name: Colored
  - entity: sun.sun
    name: Colored
  - entity: binary_sensor.service_off_value
    name: Colored
  - entity: binary_sensor.service_off_value
    name: Overwritten colors
    style: |
      :host {
        --paper-item-icon-active-color: green;
        --paper-item-icon-color: magenta;
      }

Method #2 (using a "color" CSS property):
For some row:
image

type: entities
state_color: true
entities:
  - entity: binary_sensor.battery_charging_cleargrass_1
    name: Default colors
  - entity: sun.sun
    name: Default colors
  - entity: binary_sensor.service_off_value
    name: Default colors
  - entity: binary_sensor.service_off_value
    name: Colored
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: red;
            }  

For all rows:
image
Notes:

  • state-color: false option is set;
  • for the 4th row the color was overwritten.
type: entities
state_color: false
card_mod:
  style:
    hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: cyan;
            }      
entities:
  - entity: binary_sensor.battery_charging_cleargrass_1
    name: Colored
  - entity: sun.sun
    name: Colored
  - entity: binary_sensor.service_off_value
    name: Colored
  - entity: binary_sensor.service_off_value
    name: Overwritten color
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: red !important;
            }      

Styling entity_picture:
By default (at least in the default stock theme) an "entity_picture" is displayed in a circle frame:
image

type: entities
entities:
  - entity: person.ildar

The reason of it - the "border-radius: 50%" property.
Here is how to make a square frame with round corners:
image

type: entities
entities:
  - entity: person.ildar
style:
  hui-text-entity-row$hui-generic-entity-row$: |
    state-badge {
      border-radius: 10%;
    }

Also we may apply filters to the "entity_picture":
image

type: entities
entities:
  - entity: person.ildar
  - entity: person.ildar
    style:
      hui-generic-entity-row$: |
        state-badge {
          filter: grayscale(80%);
        }

Wrapped text:
изображение

type: entities
entities:
  - entity: sun.sun
    name: Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped
    style:
      hui-generic-entity-row:
        $: |
          .info {
            color: red;
            text-overflow: unset !important;
            white-space: unset !important;
          }
  - entity: sun.sun
    name: Not wrapped Not wrapped Not wrapped Not wrapped

Changing a font-size:
See here


Changing an icon’s size:
For the whole card:
изображение

type: entities
show_header_toggle: false
entities:
  - entity: sun.sun
  - entity: sun.sun
style: |
  ha-card {
    --mdc-icon-size: 60px;
  }

For some row:
изображение

type: entities
show_header_toggle: false
entities:
  - entity: sun.sun
  - entity: sun.sun
    style: |
      :host {
        --mdc-icon-size: 60px;
      }

Styling a card’s title if a main icon is specified:
The main icon - an icon in the card’s title.

type: vertical-stack
title: Card with icon
cards:
  - type: entities
    title: Colored icon & title
    icon: 'mdi:car'
    style: |
      .card-header .name {
        color: red;
      }      
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: entities
    title: Colored icon
    icon: 'mdi:car'
    style:
      .card-header .name .icon:
        $: |
          ha-svg-icon {
            color: orange;
          }      
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: entities
    title: Colored icon & title (different)
    icon: 'mdi:car'
    style:
      .card-header:
        .name .icon:
          $: |
            ha-svg-icon {
              color: orange;
            }
        .: |
          .name {
            color: red;
          }
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: entities
    title: Colored title
    icon: 'mdi:car'
    style:
      .card-header:
        .name .icon:
          $: |
            ha-svg-icon {
              color: var(--paper-item-icon-color);
            }
        .: |
          .name {
            color: red;
          }
    entities:
      - entity: sun.sun
      - entity: sun.sun

Resizing the icon:
изображение

type: entities
title: Resized icon
icon: 'mdi:car'
style:
  .card-header: |
    .name .icon {
      --mdc-icon-size: 60px;
    }
entities:
  - entity: sun.sun
  - entity: sun.sun

Hiding an icon or a state:
image

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              display: none;
            }
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              display: none;
            }
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            state-badge:
              $: |
                ha-state-icon {
                  display: none;
                }

Adding a prefix or suffix, math operations, replacing a value:
post



More examples are described here.

4 Likes

@Ildar_Gabdullin wow! You might want to consider making a PR in GitHub to add this documentation.

1 Like

Styling 'custom:multiple-entity-row’

Intro:
Let’s call the “left” entity as the “main entity” (for which we may display a state on the last right column), all right entities - “secondary entities”.
For secondary entities you may use a “styles” option (no card-mod required) to set a color and some other CSS properties:

    entities:
      - entity: sensor.xxxxxxx
        styles:  ### styling a “state” string
          width: 80px
          text-align: left
          color: red

or

        styles:
          --paper-item-icon-color: red  ### styling an icon

or

        styles:
          --secondary-text-color: red  ### styling a header

Same approach may be used to style the main entity’s state – except changing the main icon.
Using the “styles” option is a good choice if styles (colors etc) are static. If they are dynamic (depend on some conditions) then you should either place the whole row inside config-template-card (supports JS) or use card-mod (supports jinjia2).


Colored whole text:
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      :host {
        color: magenta;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: 'mdi:link'
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored row
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Note: the last cyan icon is colored by using "multiple-entity-row::styles" property (not by 'card-mod').

Colored title:
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: orange;
          }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored title
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored state & header:
image

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.cleargrass_1_co2
    style: |
      .state.entity {
        color: magenta;
      }
      .state.entity span {
        color: cyan;
      }
    entities:
      - entity: sun.sun
    name: Colored state
    show_state: true
    state_header: CO2

Colored headers (one color):
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      :host .entity span {
        color: red;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored headers
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored headers (different colors):
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      :host .entities-row div.entity:nth-child(1) span {
        color: red;
      }
      :host .entities-row div.entity:nth-child(3) span {
        color: green;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored headers
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored values (one color):
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      :host .entity {
        color: magenta;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored values
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored values (different colors):
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      :host .entities-row div.entity:nth-child(1)  {
        color: orange;
      }
      :host .entities-row div.entity:nth-child(3)  {
        color: magenta;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored values
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Changing a color for 'secondary_info' for some row:
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              color: red !important;
            }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Changing a color of 'secondary_info' for all rows:
изображение

type: entities
style:
  multiple-entity-row:
    $:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              color: green !important;
            }
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed
  - type: 'custom:multiple-entity-row'
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Different colors for title & "secondary_info":
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $:
          .info.pointer:
            .secondary: |
              ha-relative-time {
                color: red !important;
              }
          .: |
            .info.pointer {
              color: orange;
            }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored icons (one color for all icons):
изображение
Note that the last icon’s color is managed by 'multiple-entity-row::styles' property.

type: entities
entities:
  - type: custom:multiple-entity-row
    style: |
      :host {
        --paper-item-icon-color: red;
      }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        styles:
          --paper-item-icon-color: cyan
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored icons (except one)
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored 1st icon:
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.yandex_time_home_person_ildar
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            color: orange;
          }
    entities:
      - entity: sensor.yandex_time_home_person_ildar
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.yandex_time_home_person_ildar
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored 1st icon
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored secondary icons:
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.yandex_time_home_person_ildar
    card_mod:
      style:
        hui-generic-entity-row: |
          state-badge {
            color: green;
          }
    entities:
      - entity: sensor.yandex_time_home_person_ildar
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.yandex_time_home_person_ildar
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored secondary icons
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored all icons (different colors):
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.yandex_time_home_person_ildar
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            color: orange;
          }
        .: |
          div.entity:nth-child(2) state-badge {
            color: green;
          }
          div.entity:nth-child(4) state-badge {
            color: red;
          }
    entities:
      - entity: sensor.yandex_time_home_person_ildar
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.yandex_time_home_person_ildar
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored all icons
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Wrapped text:
изображение

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: red;
            text-overflow: unset !important;
            white-space: unset !important;
          }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Wrapped Wrapped Wrapped Wrapped Wrapped
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Rotated icons:
изображение

type: vertical-stack
title: Rotate
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.yandex_time_home_person_ildar
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                color: orange;
                transform: rotate(-45deg);
              }
            .: |
              div.entity:nth-child(2) state-badge {
                color: green;
                transform: rotate(180deg);
              }
              div.entity:nth-child(4) state-badge {
                color: red;
                transform: rotate(45deg);
              }
        entities:
          - entity: sensor.yandex_time_home_person_ildar
            attribute: jamsrate
            name: пробки
            unit: ''
          - entity: sensor.service_empty_value
            name: false
            unit: false
            icon: mdi:car
          - entity: sensor.yandex_time_home_person_ildar
            name: на дорогу
            unit: ''
            styles:
              width: 60px
              text-align: center
          - entity: sensor.service_empty_value
            name: false
            unit: false
            icon: mdi:car
            tap_action:
              action: url
              url_path: xxxcc
        name: Rotated icons
        unit: ''
        icon: mdi:car
        toggle: false
        show_state: false
        state_header: ''
        secondary_info: last-changed

Changed font-size:

type: vertical-stack
title: font-size
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host {
            font-size: 8px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Whole row (except headers)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer {
                font-size: 8px;
              }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Title (incl. secondary_info)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host .entity span {
            font-size: 18px
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Headers
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host .entities-row div.entity:nth-child(1) span {
            font-size: 7px;
          }
          :host .entities-row div.entity:nth-child(3) span {
            font-size: 17px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Headers (different)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host .entity {
            font-size: 7px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Values
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host .entities-row div.entity:nth-child(1)  {
            font-size: 7px;
          }
          :host .entities-row div.entity:nth-child(3)  {
            font-size: 17px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Values (different)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        style:
          hui-generic-entity-row:
            $:
              .info.pointer .secondary: |
                ha-relative-time {
                  font-size: 20px;
                }
        entity: sensor.time_home
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Secondary_info
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed

Resizing icons:
изображение

type: vertical-stack
title: Resizing icon
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host {
            --mdc-icon-size: 40px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: All icons
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                --mdc-icon-size: 40px;
              }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Main icon
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row: |
            state-badge {
              --mdc-icon-size: 40px !important;
            }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Seconary icons
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row: |
            div.entity:nth-child(2) state-badge {
              --mdc-icon-size: 40px;
            }
            div.entity:nth-child(4) state-badge {
              --mdc-icon-size: 10px;
            }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Seconary icons (different)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed

Hidden main icon:
image

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
    name: Hidden main icon
    icon: mdi:account
    show_state: false

Info below the row (for example, for headers):
image
Note: states() & any other jinjia2 stuff may be used for content value.

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: Temperatures
    tap_action: none
    show_state: false
    entities:
      - entity: sensor.cleargrass_1_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.cleargrass_2_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.cleargrass_1_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.cleargrass_2_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.non_existant
    card_mod:
      style: |
        hui-generic-entity-row .entities-row div.entity:nth-child(1) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A kitchen";
          white-space: pre;
        }
        hui-generic-entity-row .entities-row div.entity:nth-child(2) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A hall";
          white-space: pre;
        }
        hui-generic-entity-row .entities-row div.entity:nth-child(3) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A bedroom";
          white-space: pre;
        }
        hui-generic-entity-row .entities-row div.entity:nth-child(4) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A balcony";
          white-space: pre;
        }

Small note for the main entity:
image

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    show_state: false
    secondary_info: last-changed
    entities:
      - entity: sun.sun
      - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer .secondary::before {
                content: "{{ 'hello\A ' }}";
                color: red;
                white-space: pre;
            }

Move headers to the bottom:
post
изображение

Replacing a value, math operations:
post


More examples here.

11 Likes

+1 for this. Extensive examples like this is what we need for a lot of the more complex customisations and cards.

Styling 'custom:fold-entity-row':

Colored text (names & values):

How to specify a color for the “head” row & some “item” row:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    head:
      entity: sun.sun
      name: individual color
      style: |
        :host {
          color: red;
        }
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        style: |
          :host {
            color: green;
          }
      - entity: sun.sun
      - entity: sun.sun

How to specify a color for all rows + a different color for some “item” row (note that a chevron button is also colored):
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style: |
      :host {
        color: red;
      }
    head:
      entity: sun.sun
      name: common color
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        style: |
          :host {
            color: green;
          }
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

Colored values:
How to specify a color for the “head” row & some “item” row:
image

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      entity: sun.sun
      name: individual color
      card_mod:
        style:
          hui-generic-entity-row $: |
            .text-content:not(.info) {
              color: red;
            }
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        card_mod:
          style:
            hui-generic-entity-row $: |
              .text-content:not(.info) {
                color: green;
              }
      - entity: sun.sun

How to specify a color for all “item”’ rows:
There are 2 options - by using "#items" & by using "nth-child".
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row: |
              .text-content.pointer {
                color: red;
              }
    head:
      entity: sun.sun
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color
  - type: 'custom:fold-entity-row'
    style:
      'div:nth-child(2)':
        hui-text-entity-row:
          $:
            hui-generic-entity-row: |
              .text-content.pointer {
                color: red;
              }
    head:
      entity: sun.sun
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

How to specify a color for all “item” rows + a different color for some “item” row:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row: |
              .text-content.pointer {
                color: red;
              }
    head:
      entity: sun.sun
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        style:
          hui-generic-entity-row: |
            .text-content.pointer {
              color: green !important;
            }
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

How to specify a color for all rows:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      hui-text-entity-row:
        $:
          hui-generic-entity-row: |
            .text-content.pointer {
              color: red;
            }
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row: |
              .text-content.pointer {
                color: red;
              }
    head:
      entity: sun.sun
      name: common color
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

Colored names:
Note: all code is provided for the case "without 'secondary_info'".
If 'secondary_info' is specified then replace “.info.pointer.text-content” with “.info.pointer”.
According to my tests, you can always use only “.info.pointer”, it will work anyway.

How to specify a color for the “head” row and some “item” row:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    head:
      entity: sun.sun
      name: individual color
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer.text-content {
              color: red;
            }
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer.text-content {
                color: green;
              }
      - entity: sun.sun

How to specify a color for all “item” rows:
There are 2 options - by using "#items" & by using "nth-child".
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content {
                  color: red;
                }
    head:
      entity: sun.sun
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color
  - type: 'custom:fold-entity-row'
    style:
      'div:nth-child(2)':
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content {
                  color: red;
                }
    head:
      entity: sun.sun
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

How to specify a color for all “item” rows + a different color for some “item” row:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content {
                  color: red;
                }
    head:
      entity: sun.sun
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer.text-content {
                color: green !important;
              }
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

How to specify a color for all rows:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      hui-text-entity-row:
        $:
          hui-generic-entity-row:
            $: |
              .info.pointer.text-content {
                color: red;
              }
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content {
                  color: red;
                }
    head:
      entity: sun.sun
      name: common color
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: common color
      - entity: sun.sun
        name: common color

Colored secondary_info:
How to specify a color for the “head” row & some “item” row:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    head:
      entity: sun.sun
      name: individual color
      secondary_info: last-changed
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer .secondary ha-relative-time {
              color: red;
            }
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        secondary_info: last-changed
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer .secondary ha-relative-time {
                color: green;
              }
      - entity: sun.sun

How to specify a color for all “item” rows + a different color for some “item” row:
изображение

type: entities
title: Common color for all items + individual
entities:
  - type: 'custom:fold-entity-row'
    style:
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .info.pointer .secondary ha-relative-time {
                  color: red;
                }
    head:
      entity: sun.sun
      secondary_info: last-changed
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        secondary_info: last-changed
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer .secondary ha-relative-time {
                color: green !important;
              }
      - entity: sun.sun
        name: common color
        secondary_info: last-changed
      - entity: sun.sun
        name: common color
        secondary_info: last-changed

How to specify a color for all rows + a different color for some “item” row:
изображение

type: entities
title: Common color for all rows + individual
entities:
  - type: 'custom:fold-entity-row'
    style:
      hui-text-entity-row:
        $:
          hui-generic-entity-row:
            $: |
              .info.pointer .secondary ha-relative-time {
                color: red;
              }
      '#items':
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .info.pointer .secondary ha-relative-time {
                  color: red;
                }
    head:
      entity: sun.sun
      name: common color
      secondary_info: last-changed
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        secondary_info: last-changed
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer .secondary ha-relative-time {
                color: green !important;
              }
      - entity: sun.sun
        name: common color
        secondary_info: last-changed
      - entity: sun.sun
        name: common color
        secondary_info: last-changed

Colored icons:
How to specify a color for all rows & a different color for some row (“head” or “item” ):
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style: |
      :host {
        --paper-item-icon-color: red;
      }
    head:
      entity: sun.sun
      name: common color
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: individual color
        style: |
          :host {
            --paper-item-icon-color: orange;
          }
      - entity: sun.sun
        name: individual color
        style: |
          :host {
            --paper-item-icon-color: green;
          }
      - entity: sun.sun
        name: common color

Word wrapping a text:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    head:
      entity: sun.sun
      name: Wrapped Wrapped Wrapped Wrapped Wrapped
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer.text-content {
              color: green;
              text-overflow: unset !important;
              white-space: unset !important;
            }
    padding: 15
    open: true
    entities:
      - entity: sun.sun
        name: Wrapped Wrapped Wrapped Wrapped Wrapped
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer.text-content {
                color: red;
                text-overflow: unset !important;
                white-space: unset !important;
              }
      - entity: sun.sun
        name: Not wrapped Not wrapped Not wrapped Not wrapped

Colored chevron button:
изображение

type: entities
entities:
  - type: 'custom:fold-entity-row'
    style:
      ha-icon:
        $: |
          ha-svg-icon {
            color: red;
          }
    head:
      entity: sun.sun
      name: colored button
    padding: 15
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

Chevron button with a border:
image

type: entities
title: chevron with border
entities:
  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#head ha-icon {
          border: 1px solid var(--paper-item-icon-color);
        }
    head:
      type: section
      label: More data
    padding: 15
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

Shifting the chevron button to the right:
By default the button is not alligned to the right text border.
Compare these buttons:
изображение

    type: entities
    entities:
      - type: 'custom:fold-entity-row'
        style: |
          ha-icon {
            width: 24px !important;
          }
          hui-text-entity-row {
            max-width: calc(100% - 24px) !important;
          }
        head:
          entity: sun.sun
        padding: 15
        open: true
        entities:
          - entity: sun.sun
          - entity: sun.sun
      - type: 'custom:fold-entity-row'
        head:
          entity: sun.sun
        padding: 15
        open: true
        entities:
          - entity: sun.sun
          - entity: sun.sun

Update 18.03.21: This seems not to be required anymore - check the GitHub issue.
Was corrected in some version. Now it looks like this - default & styled variants look same:
изображение

How to remove a chevron button for a clickable header:
Usually the items are shown by pressing the chevron button.
If the "clickable: true" property is set, then the items may be displayed by clicking on the header.
Then you can remove the chevron button:

type: entities
title: 'No chevron, clickable header'
entities:
  - sun.sun
  - sun.sun
  - type: 'custom:fold-entity-row'
    head:
      entity: sun.sun
      style: |
        :host {
          font-weight: bold;
        }
    padding: 15
    open: true
    clickable: true
    entities:
      - entity: sun.sun
      - entity: sun.sun
    style:
      ha-icon:
        $: |
          ha-svg-icon {
            display: none;
          }
        .: |
          ha-icon {
            width: 0px !important;
          }
      .: |
        hui-text-entity-row {
          max-width: calc(100%)  !important;
        }

изображение
изображение


More examples are described here.

3 Likes

It will be great if these examples help beginners to learn.


Update:

Animation for Entities card:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

Blinking title:
Note: a margin for the 1st row has to be increased.
11

type: entities
title: Blinking title
icon: mdi:car
entities:
  - entity: sun.sun
  - sun.sun
card_mod:
  style:
    div:nth-child(1):
      hui-text-entity-row:
        $: |
          hui-generic-entity-row {
            margin-top: 10px;
          }
    .: |
      .card-header {
        background-color: red;
        color: white;
        animation: blinking 2s linear alternate infinite;
      }
      @keyframes blinking {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }

Whole card blinking:
hhhhhhhhhhh

type: entities
title: Common style
icon: mdi:car
entities:
  - entity: sensor.cleargrass_1_co2
    name: Common style
  - entity: sensor.cleargrass_1_temperature
    name: Common style
card_mod:
  style: |
    ha-card {
      color: red;
      animation: blinking 2s linear alternate infinite;
    }      
    @keyframes blinking {
      0% {opacity: 0;}
      100% {opacity: 1;}
    }

Blinking rows:
333

type: entities
title: Common style
icon: mdi:car
entities:
  - entity: sensor.cleargrass_1_co2
    name: Common style
  - entity: sensor.cleargrass_1_temperature
    name: Common style
card_mod:
  style: |
    .card-content {
      color: red;
      animation: blinking 0.5s linear alternate infinite;
    }      
    @keyframes blinking {
      0% {opacity: 1;}
      100% {opacity: 0;}
    }

Different elements blinking:
ffffffffff

type: entities
title: Common style
icon: mdi:car
entities:
  - sun.sun
  - sensor.cleargrass_1_co2
  - sun.sun
card_mod:
  style:
    hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: orange;
              animation: blinking 2s linear alternate infinite;
            }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
            .text-content:not(.info) {
              color: red;
              animation: blinking 2s linear alternate infinite;
            }      
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
    hui-sensor-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info.pointer.text-content {
              color: magenta;
              animation: blinking 2s linear alternate infinite;
            }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
    .card-header:
      .name .icon:
        $: |
          ha-svg-icon {
            color: green;
            animation: blinking 2s linear alternate infinite;
          }
          @keyframes blinking {
            0% {opacity: 0;}
            100% {opacity: 1;}
          }
      .: |
        .name {
          color: cyan;
          animation: blinking 2s linear alternate infinite;
        }
        @keyframes blinking {
          0% {opacity: 1;}
          100% {opacity: 0;}
        }

Blinking for rows’ elements, individual style:
xxxxxxxxxxx

type: entities
title: Individual style
icon: mdi:car
entities:
  - entity: sun.sun
    name: Individual style
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: green !important;
              animation:  blink 2s linear alternate infinite;
            }      
            @keyframes blink {
              0% {opacity: 1;}
              100% {opacity: 0;}
            }
            .text-content:not(.info) {
              color: red;
              animation: blinking 2s linear alternate infinite;
            }      
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
  - entity: sensor.cleargrass_1_co2
    name: Individual style
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: red !important;
              animation:  blink 2s linear alternate infinite;
            }      
            @keyframes blink {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
            .info.pointer.text-content {
              color: magenta;
              animation: blinking 4s linear alternate infinite;
            }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }

Animations for icons:

type: entities
entities:
  - entity: sun.sun
    name: rotating
    icon: 'mdi:fan'
    style:
      hui-generic-entity-row:
        $: |
          state-badge  {
            color: orange;
            animation: rotation 0.5s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
  - entity: sun.sun
    name: swinging
    icon: 'mdi:bell'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            color: red;
            animation: wobbling 1s linear infinite alternate;
          }
          @keyframes wobbling {
            0% {
              transform: rotate(-45deg);
            }
            100% {
              transform: rotate(+45deg);
            }
          }
  - entity: sun.sun
    name: coloring
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: coloring 8s linear infinite alternate;
          }
          @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }
  - entity: sun.sun
    name: resizing
    icon: 'mdi:radio-tower'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: resizing 1s linear infinite alternate;
          }
          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }
            25% {
              --mdc-icon-size: 15px;
            }
            50% {
              --mdc-icon-size: 20px;
            }
            75% {
              --mdc-icon-size: 26px;
            }
            100% {
              --mdc-icon-size: 32px;
            }
          }
  - entity: sun.sun
    name: stretching 1
    icon: 'mdi:bus-side'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: stretching 1s linear infinite alternate;
          }
          @keyframes stretching {
            0% {
              transform: scaleX(0.5);
            }
            100% {
              transform: scaleX(2.0);
            }
          }
  - entity: sun.sun
    name: stretching 2
    icon: 'mdi:human-handsup'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: stretching 1s linear infinite alternate;
          }
          @keyframes stretching {
            0% {
              transform: scaleY(0.5);
            }
            100% {
              transform: scaleY(2.0);
            }
          }
  - entity: sun.sun
    name: flipping
    icon: 'mdi:timer-sand'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: flipping 1s linear infinite;
          }
          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }
            100% {
              transform: rotateX(360deg);
            }
          }
  - entity: sun.sun
    name: shifting
    icon: 'mdi:arrow-left-right'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: shifting 1s linear infinite alternate;
          }
          @keyframes shifting {
            0% {
              transform: translate(-5px,0);
            }
            100% {
              transform: translate(5px,0);
            }
          }
  - entity: sun.sun
    name: jumping
    icon: 'mdi:arrow-up-down'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: jumping 1s linear infinite alternate;
          }
          @keyframes jumping {
            0% {
              transform: translate(0,-5px);
            }
            100% {
              transform: translate(0,5px);
            }
          }
  - entity: sun.sun
    name: blinking
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: disappear 1s linear infinite alternate;
          }
          @keyframes disappear {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }

If you need a conditional animation - see these examples for rotation:
a) rotation ON/OFF:

          state-badge  {
            color: orange;
            {% if ..... %}
            animation: rotation 0.5s linear infinite;
            {% endif %}
          }

b) various speed:

          state-badge  {
            color: orange;
            {% set SPEED = .... %}
            animation: rotation {{SPEED}}s linear infinite;
          }

Update (20.05.22):

  1. This animation does not work on iOS 15.4.1, iOS 12.5.5:
          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }

Use this variants instead:

  - entity: sun.sun
    name: resizing (height, width)
    icon: mdi:radio-tower
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            animation: resizing 1s linear infinite alternate;
          }
          @keyframes resizing {
            0% {
              height: 10px;
              width: 10px;
            }
            25% {
              height: 15px;
              width: 15px;
            }
            50% {
              height: 20px;
              width: 20px;
            }
            75% {
              height: 26px;
              width: 26px;
            }
            100% {
              height: 32px;
              width: 32px;
            }
          }
  - entity: sun.sun
    name: resizing (scale)
    icon: mdi:radio-tower
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            animation: resizing 1s linear infinite alternate;
          }
          @keyframes resizing {
            0% {
              transform: scale(0.3,0.3);
            }
            25% {
              transform: scale(0.7,0.7);
            }
            50% {
              transform: scale(1,1);
            }
            75% {
              transform: scale(1.15,1.15);
            }
            100% {
              transform: scale(1.3,1.3);
            }
          }
  1. This animation does not work on iOS 15.4.1, iOS 12.5.5 (causes glitches affecting a whole card):
          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }

No solution for this so far.


More examples are described here.

5 Likes

Hello,

I’m trying to change the size of the text on a light card and I apparently don’t understand enough css to do it. Below is what I have and I’ve tried multiple variants, but I can’t seem to get it to work.

type: light
entity: light.kitchen_lights
style: |
ha-card {
--name-font-size: 10px;
}

How to change a font-size for Entities card:

type: entities
title: Size for title
card_mod:
  style: |
    ha-card .card-header {
      font-size: 35px;
      color: red;
    }
entities:
  - entity: sun.sun
    name: Standard size
    secondary_info: last-changed
  - entity: sun.sun
    name: Size for whole row
    secondary_info: last-changed
    card_mod:
      style: |
        :host {
          font-size: 25px;
          color: red;
        }
  - entity: sun.sun
    name: Size for name & secondary_info
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer {
              font-size: 10px;
              color: red;
            }
  - entity: sun.sun
    name: Size for name & secondary_info (different)
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer: |
              .secondary ha-relative-time {
                color: green;
                font-size: 25px;
              }
            .: |
              .info.pointer {
                color: red;
                font-size: 8px;
              }
  - entity: sun.sun
    name: Size for name only
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer: |
              .secondary ha-relative-time {
                color: orange;
                font-size: var(--mdc-typography-body1-font-size, 1rem);
              }
            .: |
              .info.pointer {
                color: red;
                font-size: 8px;
              }
  - entity: sun.sun
    name: Size for value
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row $: |
          .text-content {
            font-size: 10px;
            color: red;
          }
  - entity: sun.sun
    name: "!!!! Size for value (w/o sec_info) !!!!"
    card_mod:
      style:
        hui-generic-entity-row $: |
          .text-content.pointer:not(.info) {
            font-size: 10px;
            color: red;
          }
  - entity: sun.sun
    name: Size for secondary_info
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer .secondary: |
              ha-relative-time {
                font-size: 20px;
                color: green !important;
              }

Note that for setting a “standard” font size I had to use a "font-size: var(--mdc-typography-body1-font-size, 1rem)" in the "Size for name only" case, I do not think it is good (kind of ‘hard coding’), and may be there is a better solution…

Another option for changing the title’s font-size - using a "--ha-card-header-font-size" variable:
изображение

type: entities
title: 'Style: title font-size'
entities:
  - entity: sun.sun
style: |
  ha-card {
    --ha-card-header-font-size: 35px;
  }

How to change a font-size for a "button" row:
image

type: entities
title: Size for button
entities:
  - type: button
    name: Standard size
    tap_action:
      action: call-service
      service: homeassistant.update_entity
      service_data:
        entity_id: sun.sun
  - type: button
    name: Standard size
    tap_action:
      action: call-service
      service: homeassistant.update_entity
      service_data:
        entity_id: sun.sun
    card_mod:
      style: |
        :host {
          --mdc-typography-button-font-size: 20px;
        }

More examples are described here.

1 Like

Can you use triple backticks instead of single ones?

Sorry, apparently I was not paying close enough attention to that warning that popped up. Here ya go:

type: light
entity: light.kitchen_lights
style: |
  ha-card {
    --name-font-size: 10px;
  }

What I’m actually trying to do is shrink everything on the light card so that it is roughly the size of a custom button card, but I’m unsure if I need to do that piecemeal or if it can be done with an overall piece of code.

Actually, you can try something like this:


Cannot check it with light since I do not have any lights so far.

Is it possible to adjust the card size with card mod? Just installed the card mod but still trying to figure out how to adjust the card size.

Thanks in advance.

Styling "mini-graph-card":

изображение

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 300px !important;
  }

изображение

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 90px !important;
  }

I have a light card that capable of brightness, but I don’t need the control of brightness, how to hide the big circle that adjust brightness in the light card?
image

If you’ll never use it, I think you can remove it via the customization panel by setting the supported stuff to 0.

Sorry I should be more clear, I mean I don’t adjust the brightness for this light in this card. It is in the first page of lovelace ui that I used it to quickly turn stuff on/off. I also have it configured in another page so I can adjustment brightness over there.

round-slider {
  visibility: hidden !important;
}
1 Like

works great! :+1::+1::+1: