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:
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
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: |
.entities-row .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:
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):
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:
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.