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:
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;
}
More examples are described here.