Styling hui-element
card:
This post is about using hui-element
card to represent a row inside an Entities card:
- section
- sensor-entity
- number-entity (
slider
or box
)
- toggle-entity
- input-select-entity
- input-text-entity
- weather-entity
- buttons
- conditional row
Here they are (updated 04.03.22 for “chips” buttons and new HA2022.3 design):
Code for the card
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section
- type: custom:hui-element
row_type: sensor-entity
entity: input_number.test_number
name: sensor-entity
- type: custom:hui-element
row_type: number-entity
entity: input_number.test_number
name: number-entity (slider)
- type: custom:hui-element
row_type: number-entity
entity: input_number.test_number_2
name: number-entity (box)
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: toggle-entity
- type: custom:hui-element
row_type: input-select-entity
entity: input_select.test_value
name: input-select-entity
- type: custom:hui-element
row_type: input-text-entity
entity: input_text.test_text
name: input-text-entity
- type: custom:hui-element
row_type: weather-entity
entity: weather.home_met
name: weather-entity
- type: custom:hui-element
row_type: buttons
entities:
- entity: sun.sun
show_name: true
- entity: sun.sun
show_name: true
- entity: sun.sun
show_name: true
- type: custom:hui-element
row_type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
row:
entity: sun.sun
name: conditional
Why using "hui-element" for rows is very useful? Look at some examples if you do not know yet.
- Using a slider or a toggle row inside Picture elements card.
- Using
section
row inside stack-in-card
to separate areas.
- Making a decluttering template for any row with predefined options & styling.
There are 4 methods of styling hui-element
rows:
- Using
:host
- to style a particular row.
- Using long DOM navigation - to style a particular row.
- Using long DOM navigation from the parent Entities card or Picture elements card level - to style a particular row or all rows.
- Using long DOM navigation from the parent
mod-card
level - to style a row inside a decluttering template.
Using :host
- to style a particular row:
Note: the hui-element
card is a kind of transparent
element - all styles go “directly to the row”.
type: entities
entities:
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored row
card_mod:
style: |
:host {
color: red;
}
- type: custom:hui-element
row_type: section
label: section
card_mod:
style: |
:host {
--divider-color: magenta;
}
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: Colored toggle
card_mod:
style: |
:host {
--switch-unchecked-button-color: yellow;
--switch-checked-button-color: red;
}
![image](https://community-assets.home-assistant.io/original/4X/e/3/5/e35e66033bb3caba60d92d2c311d335b8c96659f.png)
Using long DOM navigation - to style a particular row:
Note: the hui-element
card is a kind of transparent
element - all styles go “directly to the row”.
type: entities
entities:
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
card_mod:
style:
hui-generic-entity-row:
$: |
.info {
color: red;
}
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: Colored toggle
card_mod:
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
background-color: yellow !important;
border-color: red !important;
}
- type: custom:hui-element
row_type: section
label: section
card_mod:
style: |
.divider {
background-color: cyan !important;
}
- type: custom:hui-element
row_type: number-entity
entity: input_number.test_number
name: Colored state
card_mod:
style: |
hui-generic-entity-row .flex .state {
color: magenta;
}
![изображение](https://community-assets.home-assistant.io/original/4X/2/b/b/2bb6add882f988c4229a0156b8e42f2d7298ea3e.png)
Using long DOM navigation from the parent Entities card or Picture elements card level - to style a particular row or all rows:
Section:
type: entities
entities:
- entity: sun.sun
- type: custom:hui-element
row_type: section
label: section
- entity: sun.sun
- entity: sun.sun
- type: custom:hui-element
row_type: section
label: section
- entity: sun.sun
- entity: sun.sun
card_mod:
style:
.card-content hui-element:
$: |
.divider {
background-color: cyan !important;
}
![image](https://community-assets.home-assistant.io/original/4X/b/8/2/b824d546379fc02bf31783d2b786bba4fbb55851.png)
Sensor:
type: entities
entities:
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
card_mod:
style:
.card-content hui-element:
$:
hui-generic-entity-row:
$: |
.info {
color: red;
}
![image](https://community-assets.home-assistant.io/original/4X/0/a/3/0a3c691785332f25319a606d5ccf48b209a686e7.png)
Toggle:
type: entities
entities:
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: Colored toggle
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean_2
name: Colored toggle
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean_3
name: Colored toggle
card_mod:
style:
.card-content hui-element:
$:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
background-color: yellow !important;
border-color: red !important;
}
![image](https://community-assets.home-assistant.io/original/4X/2/6/6/266c072b7ff80c93eaf5901798b8b70ae79ee941.png)
Using long DOM navigation from the parent mod-card
level - to style a row inside a decluttering template:
Slider:
Template:
decl_entity_row__slider_xxx:
card:
type: custom:mod-card
card:
type: custom:hui-element
row_type: number-entity
entity: '[[SENSOR]]'
name: '[[VALUE_NAME]]'
card_mod:
style:
hui-element:
$: |
hui-generic-entity-row {
color: [[VALUE_COLOR_TEXT]];
--paper-item-icon-color: [[VALUE_COLOR_ICON]];
}
Using the template:
type: entities
entities:
- type: custom:decluttering-card
template: decl_entity_row__slider_xxx
variables:
- SENSOR: input_number.test_number
- VALUE_NAME: "cyan name, magenta icon"
- VALUE_COLOR_TEXT: cyan
- VALUE_COLOR_ICON: magenta
![изображение](https://community-assets.home-assistant.io/original/4X/6/d/e/6de33f36910eba5bc8164bf4e6388230b9898430.png)
Input-select:
Template:
decl_entity_row__input_select_xxx:
card:
type: custom:mod-card
card:
type: custom:hui-element
row_type: input-select-entity
entity: '[[INPUT_SELECT]]'
name: '[[VALUE_NAME]]'
card_mod:
style:
hui-element:
$:
hui-generic-entity-row:
$: |
state-badge {
color: '[[VALUE_COLOR]]';
}
Using the template:
type: entities
entities:
- type: custom:decluttering-card
template: decl_entity_row__input_select_xxx
variables:
- INPUT_SELECT: input_select.test_value
- VALUE_NAME: xxxxxx
- VALUE_COLOR: magenta
![изображение](https://community-assets.home-assistant.io/original/4X/7/4/c/74c4c455550368e784399d116c4572b4a836493d.png)
More examples are described here.