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

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: |
      .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: |
      .entities-row div.entity:nth-child(1) span {
        color: red;
      }
      .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: |
      .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: |
      .entities-row div.entity:nth-child(1)  {
        color: orange;
      }
      .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: |
          .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: |
          .entities-row div.entity:nth-child(1) span {
            font-size: 7px;
          }
          .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: |
          .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: |
          .entities-row div.entity:nth-child(1)  {
            font-size: 7px;
          }
          .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 & MacOS:
          @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);
            }
          }

Animation using custom properties is promised to be added in Safari 16.

  1. This animation glitches on iOS 15.4.1, iOS 12.5.5 & MacOS (glitches affecting a whole card):
          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }

No solution for this so far.
The animation may work OK but also may cause glitches. This is Apple, sorry.


More examples are described here.

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

Hi , i am using homekit button , but when i use different cards
if i put :host nothing happens.
i am trying to change the background and increase fonts , but no luck.
Any idea ?

                      - card: 'custom:upcoming-media-card'
                        wider: true
                        higher: true
                        widerSize: 2
                        higherSize: 2
                        noPadding: true
                        cardOptions:
                            entity: sensor.recently_added_movies
                            icon: 'mdi:kodi'
                            name: New movies
                            image_style: fanart   
                          
                        cardStyle: |
                          ha-card {
                              padding: 5px!important;
                              display: flex!important;
                              flex-direction: column!important;
                              background: transparent!important;
                              box-shadow: none!important;
                              border-radius:0!important;
                              background: var( --ha-card-background, #fff0 );
                          }                                
                          .rece_line0_fanart {
                              font-size: 25px;
                          }      

Why do you think it’s cardStyle? It’s documented that you use style, not cardStyle.