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.
7 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:
type: entities
entities:
- entity: input_number.battery_level_check
name: Hidden icon
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
Hidden state:
type: entities
entities:
- entity: input_number.battery_level_check
name: Hidden state
style: |
hui-generic-entity-row .flex .state {
display: none;
}
Hidden name:
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:
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:
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.
4 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:
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:
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:
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:
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:
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:
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;
}
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:
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):
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):
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):
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:
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:
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:
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:
Notes:
-
state-color: falseoption 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:
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:
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":
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
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:
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.
9 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:
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: |
.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.
15 Likes
+1 for this. Extensive examples like this is what we need for a lot of the more complex customisations and cards.
Styling 'custom:fold-entity-row':
Colored text (names & values):
How to specify a color for the “head” row & some “item” row:
- type: entities
entities:
- type: custom:fold-entity-row
head:
entity: sun.sun
name: individual color
style: |
:host {
color: red;
}
padding: 15
open: true
entities:
- entity: sun.sun
name: individual color
style: |
:host {
color: green;
}
- entity: sun.sun
- entity: sun.sun
How to specify a color for all rows + a different color for some “item” row (note that a chevron button is also colored):
type: entities
entities:
- type: 'custom:fold-entity-row'
style: |
:host {
color: red;
}
head:
entity: sun.sun
name: common color
padding: 15
open: true
entities:
- entity: sun.sun
name: individual color
style: |
:host {
color: green;
}
- entity: sun.sun
name: common color
- entity: sun.sun
name: common color
Colored names:
Note: for styling values, icons, secondary_info etc - ref. a post for Entities card for a proper path.
How to specify a color for the “head” row & some “item” row:
- type: entities
entities:
- type: custom:fold-entity-row
head:
entity: sun.sun
name: individual color
card_mod:
style:
hui-generic-entity-row $: |
.info {
color: red;
}
padding: 15
open: true
entities:
- entity: sun.sun
name: individual color
card_mod:
style:
hui-generic-entity-row $: |
.info {
color: green;
}
- entity: sun.sun
How to specify a color for all rows separately:
- type: entities
entities:
- type: custom:fold-entity-row
card_mod:
style:
div#head :first-child:
$ hui-generic-entity-row $: |
.info {
color: red;
}
div#items :first-child:
$ hui-generic-entity-row $: |
.info {
color: cyan;
}
head:
entity: sun.sun
padding: 15
open: true
entities:
- entity: sun.sun
name: common color
- entity: zone.home
name: common color
- entity: sensor.processor_use
card_mod:
style:
hui-generic-entity-row $: |
.info {
color: magenta !important;
}
- entity: input_boolean.test_boolean
name: common color
Colored chevron button:
type: entities
entities:
- type: 'custom:fold-entity-row'
style:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
head:
entity: sun.sun
name: colored button
padding: 15
open: true
entities:
- entity: sun.sun
- entity: sun.sun
Chevron button with a border:
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
this styling seem to be not required anymore
Shifting the chevron button to the right:
By default the button is not alligned to the right text border.
Compare these buttons:
type: entities
entities:
- type: 'custom:fold-entity-row'
style: |
ha-icon {
width: 24px !important;
}
hui-text-entity-row {
max-width: calc(100% - 24px) !important;
}
head:
entity: sun.sun
padding: 15
open: true
entities:
- entity: sun.sun
- entity: sun.sun
- type: 'custom:fold-entity-row'
head:
entity: sun.sun
padding: 15
open: true
entities:
- entity: sun.sun
- entity: sun.sun
Update 18.03.21: This seems not to be required anymore - check the GitHub issue.
Was corrected in some version. Now it looks like this - default & styled variants look same:
How to remove a chevron button for a clickable header:
Usually the items are shown by pressing the chevron button.
If the "clickable: true" property is set, then the items may be displayed by clicking on the header.
Then you can remove the chevron button:
- type: entities
entities:
- sun.sun
- sun.sun
- type: custom:fold-entity-row
head:
entity: sun.sun
style: |
:host {
font-weight: bold;
}
padding: 15
open: true
clickable: true
entities:
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
div#head ha-icon {
display: none;
}
div#head :first-child {
max-width: unset;
}
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.
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:
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:
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:
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:
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):
- 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.
- 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.
12 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:
type: entities
title: Size for button
entities:
- type: button
name: Standard size
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
- type: button
name: Standard size
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
card_mod:
style: |
:host {
--mdc-typography-button-font-size: 20px;
}
More examples are described here.
1 Like
Can you use triple backticks instead of single ones?
Sorry, apparently I was not paying close enough attention to that warning that popped up. Here ya go:
type: light
entity: light.kitchen_lights
style: |
ha-card {
--name-font-size: 10px;
}
What I’m actually trying to do is shrink everything on the light card so that it is roughly the size of a custom button card, but I’m unsure if I need to do that piecemeal or if it can be done with an overall piece of code.
Actually, you can try something like this:
Cannot check it with light since I do not have any lights so far.
Is it possible to adjust the card size with card mod? Just installed the card mod but still trying to figure out how to adjust the card size.
Thanks in advance.
Styling "mini-graph-card":
type: entities
entities:
- entity: sun.sun
title: height
style: |
ha-card {
height: 300px !important;
}
type: entities
entities:
- entity: sun.sun
title: height
style: |
ha-card {
height: 90px !important;
}