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

.content {
  margin-top: -48px;
}
1 Like

You can also try using card-mod to change the color of the icon.

I changed to -24px which works good on my card, thanks for the help.

I’m using for the first time this mod, and for me it’s the first time that I’m using the CSS (sorry if this is a trivial question).
I have a picture-entity used to show an image (Octoprint mpeg image).
The problem is that the camera is rotated of 180 degree, for this reason I need to rotate the image in the Home Assistant.
I’m able to apply the rotation directly in the picture-entity in this way:

   aspect_ratio: 50%
   camera_image: camera.octoprint
   #camera_view: live
   image: 'http://octopi.local/webcam/?action=snapshot'
   show_name: false
   show_state: false
   type: picture-entity
   style: |
     ha-card {
       transform: rotate(180deg);
     }

When I try to open the ha-dialog to show the live image (I think it’s a ‘more-info’ panel) the image shown is correctly in live but with the original rotation.

How I can rotate also the image shown in this panel?

I am still a beginner and when I started learning card-mod for me it was not easy since I was not able to find a full info for all the possible cards))).
Let me post sometimes little instructions for different cards.

First, it will be an Entity card:

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

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

type: entity
entity: sensor.cleargrass_1_co2
style: |
  .header .name {
    color: green;
  }
  ha-card {
    color: red;
  }
  .info .measurement {
    color: orange;
  }
  .header .icon {
      color: cyan;
  }

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

type: entity
entity: binary_sensor.service_on_value
style: |
  .header .name {
    color: green;
  }
  ha-card {
    color: red;
  }
  .header .icon {
      color: cyan;
  }

As for the icon - it will be always cyan, for ON & OFF.
Here is an example for OFF (device_class: connectivity):
изображение

The code below changes the icon’s color dependently on the sensor’s state (here & below - styling for text is removed) - if the sensor is ON, then the icon is yellow (standard theme’s active color):

type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
  .header .icon {
  {% if is_state(config.entity,'on') %}
    color: var(--paper-item-icon-active-color);
  {% else %}  
    color: var(--state-icon-color);
  {% endif %}  
  }

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

Also we can change the “active” & “inactive” colors:

type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
  .header .icon {
  {% if is_state(config.entity,'on') %}
    color: red;
  {% else %}  
    color: brown;
  {% endif %}  
  }

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

Changing a font-size & icon’s size:
изображение

type: entity
entity: sensor.cleargrass_1_co2
style: |
  .header .name {
    color: green;
    font-size: 10px;
  }
  .info .value {
    color: blue;
    font-size: 8px;
  }
  .info .measurement {
    color: orange;
    font-size: 30px;
  }
  .header .icon {
    color: cyan;
  }
  ha-card {
    --mdc-icon-size: 60px;
  }

Changing a background:

type: vertical-stack
cards:
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      ha-card {
        background-color: orange;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      .info {
        background-color: orange;
        padding-top: 16px !important;
      }
      ha-card {
        overflow: hidden;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      .header {
        background-color: orange;
      }
      .info {
        padding-top: 16px !important;
      }
      ha-card {
        overflow: hidden;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      ha-card {
        background-image: url("/local/images/blue_low_2.jpg");
        background-size: 100% 100%;
        height: 250px !important;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      .info {
        padding-top: 16px !important;
        background-image: url("/local/images/Stan_small.png");
        background-repeat: no-repeat;
        background-position: right;
      }
      ha-card {
        overflow: hidden;
      }

More examples are described here.

8 Likes

Styling a slider entity inside Entities card:

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

Colored icon (2 options):
изображение

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Сolor icon
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: red;
        }
  - entity: input_number.battery_level_check
    name: Сolor icon (#2)
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: orange;
            }

Colored text: (without “secondary_info”)
изображение

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Сolor all text
    style: |
      :host {
        color: red;
      }
  - entity: input_number.battery_level_check
    name: Color value's name
    style:
      hui-generic-entity-row:
        $: |
          .info.text-content {
            color: green;
          }
  - entity: input_number.battery_level_check
    name: Color value
    style: |
      hui-generic-entity-row .flex .state {
        color: magenta;
      }

Word wrapped text: (without “secondary_info”)
изображение

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

All styles described above: (without “secondary_info”)
изображение

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Wrapped Wrapped Wrapped Wrapped Wrapped
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: orange;
            }
            .info {
              color: red;
              text-overflow: unset !important;
              white-space: unset !important;
            }
          .: |
            .flex .state {
              color: magenta;
            }

Common style for all sliders: (without “secondary_info”)
изображение

type: entities
title: Common
card_mod:
  style:
    hui-input-number-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: orange;
            }
            .info {
              color: red;
              text-overflow: unset !important;
              white-space: unset !important;
            }
          .: |
            .flex .state {
              color: magenta;
            }
entities:
  - entity: input_number.battery_level_check
    name: Slider Slider Slider Slider Slider
  - sun.sun
  - entity: input_number.battery_level_check
    name: Cannot ovewrite style Cannot ovewrite style Cannot ovewrite style
    card_mod:
      style: |
        :host {
          color: green !important;
        }

Note that a style for the 2nd slider cannot be overwritten individually.


If “secondary_info” is specified then a code changes a little - I have to use ".info" instead of ".info.text-content":
изображение

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Color value's name
    secondary_info: last-changed
    style:
      hui-generic-entity-row:
        $: |
          .info {
            color: green;
          }

But according to my tests in all the cases described above it is possible to always use ".info" - it seems to work anyway.

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

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Сolor secondary
    secondary_info: last-changed
    style:
      hui-generic-entity-row:
        $: |
          .info .secondary ha-relative-time {
            color: orange;
          }

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

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Different colors
    secondary_info: last-changed
    style:
      hui-generic-entity-row:
        $:
          .info: |
            .secondary ha-relative-time {
              color: orange;
            }
          .: |
            .info {
              color: green;
            }

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

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Сolored slider
    style:
      hui-generic-entity-row: |
        .flex ha-slider {
          --paper-slider-active-color: orange;
          --paper-slider-knob-color: green;
          --paper-slider-container-color: cyan;
        }

Hiding elements:
Hidden icon:
image

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Hidden icon
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }

Hidden state:
image

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Hidden state
    style: |
      hui-generic-entity-row .flex .state {
        display: none;
      }

Hidden name:
image

type: entities
entities:
  - entity: input_number.battery_level_check
    name: Hidden name
    style:
      hui-generic-entity-row:
        $: |
          .info {
            display: none;
          }
        .: |
          ha-slider {
            max-width: unset !important;
          }

Minimal view:
image

type: entities
entities:
  - entity: input_number.battery_level_check
    style:
      hui-generic-entity-row:
        $: |
          .info {
            display: none;
          }
          state-badge {
            display: none;
          }
        .: |
          ha-slider {
            max-width: unset !important;
          }
          .flex .state {
            display: none;
          }

Adjusting a slider’s width:
изображение
изображение

type: entities
entities:
  - entity: input_number.test_number
    name: slider's width
  - entity: input_number.battery_level_check
    name: value
    card_mod:
      style: |
        ha-slider {
          {% set WIDTH = states("input_number.test_number")|int(0) %}
          width: {{WIDTH}}px !important;
          max-width: unset !important;
        }

Disabled slider:
image

type: entities
title: Locked slider
entities:
  - entity: input_boolean.test_boolean
    name: Lock the slider
  - entity: input_number.test_number
    tap_action:
      action: none
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
            --paper-slider-active-color: var(--disabled-text-color);
            --paper-slider-knob-color: var(--disabled-text-color);
            --paper-slider-container-color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
            color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
        }

More examples are described here.

6 Likes

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: |
  .card-content {
    background-image: url("/local/images/blue_low_2.jpg");
    background-size: 100% 100%;
  }
  ha-card {
    overflow: hidden;
  }

For a header area only:
image

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

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

Adding a scrollbar:
image

type: entities
entities:
  - sun.sun
  - sun.sun
  - sun.sun
  - sun.sun
  - sun.sun
  - sun.sun
  - sun.sun
  - sun.sun
  - sun.sun
card_mod:
  style: |
    .card-content {
      overflow-y: scroll;
      max-height: 280px;
    }
    ha-card {
      overflow: clip;
    }

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

Note: when a “button” row has an “entity” option specified - there is a difference in part of styling an icon, check here.


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-simple-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-simple-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

Also check here for an alternative solution:
image


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.

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

If secondary_info is not some relative time:
post
image

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.

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

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

      - type: entities
        entities:
          - type: custom:fold-entity-row
            card_mod:
              style: |
                :host {
                  color: red;
                }
            head:
              entity: sun.sun
              name: common (:host, card level)
            padding: 15
            open: true
            entities:
              - entity: sun.sun
                name: individual (:host)
                card_mod:
                  style: |
                    :host {
                      color: lightgreen;
                    }
              - entity: sun.sun
                name: common (:host, card level)
              - entity: sun.sun
                name: common (:host, card level)

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

      - type: entities
        entities:
          - type: custom:fold-entity-row
            card_mod:
              style:
                div#head :first-child $ hui-generic-entity-row $: |
                  .info {
                    color: red;
                  }
                div#items div:not(#measure):
                  ':first-child $ hui-generic-entity-row $': |
                    .info {
                      color: cyan;
                    }
            head:
              entity: sun.sun
              name: individual (DOM, card level, for head)
            padding: 15
            open: true
            entities:
              - entity: sun.sun
                name: common (DOM, card level, for items)
              - entity: zone.home
                name: common (DOM, card level, for items)
              - entity: sensor.processor_use
                name: individual color (DOM)
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      .info {
                        color: magenta !important;
                      }
              - entity: input_boolean.test_boolean
                name: common (DOM, card level, for items)

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

type: entities
entities:
  - type: 'custom:fold-entity-row'
    card_mod:
      style: |
        div#head ha-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

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
        entities:
          - sun.sun
          - type: custom:fold-entity-row
            head:
              entity: sun.sun
              card_mod:
                style: |
                  :host {
                    font-weight: bold;
                  }
              tap_action:
                action: fire-dom-event
                fold_row: true
            padding: 15
            open: true
            entities:
              - entity: sun.sun
              - entity: sun.sun
            card_mod:
              style: |
                div#head ha-icon {
                  display: none;
                }
                div#head :first-child {
                  max-width: unset;
                }

image

image


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

Update 18.04.23: flipping is OK on iOS 15.7.3 (Companion App)


More examples are described here.

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

2 Likes

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