Styling Glance card:
Colored icons:
Only left items (which are not togglable):
![image](https://community-assets.home-assistant.io/original/3X/6/1/61b6cf78a07295148db86a444a8ee4e5cb5feade.png)
type: picture-glance
title: left
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style:
.box div:nth-child(2) .wrapper:
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: cyan;
}
Different colors for items:
![image](https://community-assets.home-assistant.io/original/3X/0/9/09a61202d7f78e1b100532bbc64794505e3a2c24.png)
Note: white color = default style for on
, --disabled-color
- for off
.
type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: orange;
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: cyan;
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: yellow;
}
.box div:nth-child(3):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: lightgreen;
}
Different colors for items + changed default colors:
![image](https://community-assets.home-assistant.io/original/3X/b/f/bfdba0ab04504eaba7ae6649d68d7c97bad2583d.png)
Default colors are defined by these variables:
--ha-picture-icon-button-on-color
;
--ha-picture-icon-button-color
.
type: picture-glance
title: +vars
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: orange;
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: cyan;
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: yellow;
}
.box div:nth-child(3):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: lightgreen;
}
.: |
ha-card {
--ha-picture-icon-button-on-color: black;
--ha-picture-icon-button-color: brown;
}
Different default colors for items:
![image](https://community-assets.home-assistant.io/original/3X/f/e/fe108ac020207032292cfd66883682d88256be98.png)
type: picture-glance
title: vars
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
.box div:nth-child(2) div:nth-child(2) {
--ha-picture-icon-button-on-color: cyan;
--ha-picture-icon-button-color: brown;
}
.box div:nth-child(2) div:nth-child(3) {
--ha-picture-icon-button-on-color: black;
--ha-picture-icon-button-color: green;
}
.box div:nth-child(3) div:nth-child(1) {
--ha-picture-icon-button-on-color: red;
--ha-picture-icon-button-color: black;
}
.box div:nth-child(3) div:nth-child(2) {
--ha-picture-icon-button-on-color: black;
--ha-picture-icon-button-color: pink;
}
.box div:nth-child(3) div:nth-child(4) {
--ha-picture-icon-button-on-color: lightgreen;
--ha-picture-icon-button-color: yellow;
}
Resized icons:
For all items:
![image](https://community-assets.home-assistant.io/original/3X/0/a/0aa8a7974a5ee46cc29c33237c86261b4c5d0bb5.png)
type: picture-glance
title: all
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
ha-card {
--mdc-icon-size: 40px;
}
For left items:
![image](https://community-assets.home-assistant.io/original/3X/5/d/5d83e51ec71be102f774b84efccc11c7c8ef464e.png)
type: picture-glance
title: left
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style:
.box .wrapper:
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
vertical-align: super;
}
.: |
.box div:nth-child(2) .wrapper {
--mdc-icon-size: 40px;
}
Different sizes for items:
![image](https://community-assets.home-assistant.io/original/3X/0/f/0f6b6d47e441b370d75d1c7844d10f30ece0b47b.png)
type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style:
.box .wrapper:
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
vertical-align: super;
}
.: |
ha-svg-icon {
vertical-align: super;
}
.: |
.box div:nth-child(2) div:nth-child(2) {
--mdc-icon-size: 10px;
}
.box div:nth-child(2) div:nth-child(3) {
--mdc-icon-size: 50px;
}
.box div:nth-child(3) div:nth-child(1) {
--mdc-icon-size: 35px;
}
Colored title:
![image](https://community-assets.home-assistant.io/original/3X/5/f/5f5a7f41c4035cc2819a22fff9c63ee07ae4494d.png)
type: picture-glance
title: Title
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
.box .title {
color: orange;
}
How to limit an area for the title:
By default the long title occupies all available area and icons are shifted to the right, causing some items not to be displayed:
![image](https://community-assets.home-assistant.io/original/3X/6/8/68bf164d83f739d7daaa2b720c5dd791e915d3c4.png)
To prevent this you may limit an area available for the title.
But in this case the title will be clipped.
This styling makes a better look:
![image](https://community-assets.home-assistant.io/original/3X/7/3/73a5623cded95dd6747fc452191657fa253b04c0.png)
type: picture-glance
title: Title long long long long long
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
.box .title {
text-overflow: unset;
white-space: normal;
max-width: 130px;
font-size: 13px;
line-height: 1.2;
align-self: center;
}
Rotating icons:
Only right items:
![pg1](https://community-assets.home-assistant.io/original/4X/e/7/e/e7efc12fde1b6b278d1e30011098e600b5668833.gif)
type: picture-glance
title: right
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
style:
.box div:nth-child(3):
.wrapper:
ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: rotation 0.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Some items:
![pg2](https://community-assets.home-assistant.io/original/4X/0/0/2/0022f323bf0463a5d207d66a4ed9277d00adee98.gif)
type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
style:
.box div:nth-child(2):
div:nth-of-type(2) ha-icon-button ha-state-icon $: |
ha-svg-icon {
animation: rotation 0.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
div:nth-of-type(3) ha-icon-button ha-state-icon $: |
ha-svg-icon {
animation: rotation 5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.box div:nth-child(3):
div:nth-of-type(1) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: rotation 5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
div:nth-of-type(2) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(359deg);
}
100% {
transform: rotate(0deg);
}
}
Note that the āsunā icon is not centered - IMHO it happens because the icon ITSELF not centered properly.
Update: should be fixed in a future MDI release.
Some more animations:
![pg3](https://community-assets.home-assistant.io/original/4X/9/5/b/95b5747268c159f4f14b6108b250350468ea96db.gif)
type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
icon: mdi:bell
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
card_mod:
style:
.box div:nth-child(2):
div:nth-of-type(1) ha-icon-button ha-state-icon $: |
ha-svg-icon {
animation: jumping 1s linear infinite alternate;
}
@keyframes jumping {
0% {
margin-top: -20px;
}
100% {
margin-top: 6px;
}
div:nth-of-type(2) ha-icon-button ha-state-icon $: |
ha-svg-icon {
animation: coloring 1s linear infinite;
}
@keyframes coloring {
0% {
color: blue;
}
100% {
color: red;
}
}
div:nth-of-type(3) ha-icon-button ha-state-icon $: |
ha-svg-icon {
animation: resizing 1s linear infinite;
}
@keyframes resizing {
0% {
--mdc-icon-size: 8px;
}
25% {
--mdc-icon-size: 12px;
}
50% {
--mdc-icon-size: 16px;
}
75% {
--mdc-icon-size: 20px;
}
100% {
--mdc-icon-size: 24px;
}
}
div:nth-of-type(4) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: wobbling 1s linear infinite alternate;
}
@keyframes wobbling {
0% {
transform: rotate(-45deg);
}
100% {
transform: rotate(+45deg);
}
.box div:nth-child(3):
div:nth-of-type(1) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: stretching_x 1s linear infinite alternate;
}
@keyframes stretching_x {
0% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(2.0);
}
}
div:nth-of-type(2) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: stretching_y 1s linear infinite alternate;
}
@keyframes stretching_y {
0% {
transform: scaleY(0.5);
}
100% {
transform: scaleY(2.0);
}
div:nth-of-type(3) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: flipping 1s linear infinite;
}
@keyframes flipping {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(359deg);
}
}
div:nth-of-type(4) ha-icon-button ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: disappearing 1s linear infinite alternate;
}
@keyframes disappearing {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Colored state:
All states:
![image](https://community-assets.home-assistant.io/original/3X/d/1/d1a93de542a8219332d3cf9b4db8acdd230ecb04.png)
type: picture-glance
title: all
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style:
.box .row: |
.wrapper .state {
color: orange;
}
Some state:
![image](https://community-assets.home-assistant.io/original/3X/1/6/1616fceac66bc732c6cbdae1180012c8e7685291.png)
type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
.box .row div:nth-child(3) .state {
color: red;
}
.box .row div:nth-child(4) .state {
color: black;
}
Overwritten style:
![image](https://community-assets.home-assistant.io/original/3X/5/1/51539a11e677d035547a3604a37459b7e35bb5f8.png)
type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style:
.box .row: |
.wrapper .state {
color: orange;
}
div:nth-child(3) .state {
color: red !important;
}
How to display long states:
Here is how states are displayed by default:
![image](https://community-assets.home-assistant.io/original/3X/8/3/8319e32339bcdc755b1da35cba02d6be8dc74003.png)
To make states visible:
- increase a width for items;
- decrease a font-size.
![image](https://community-assets.home-assistant.io/original/3X/2/7/279014caf6a89bf4007d48b62d1c82f5d00ad8dd.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style:
.box .row: |
.wrapper {
width: 70px !important;
}
.wrapper ha-icon-button {
align-self: center;
}
.wrapper .state {
font-size: 9px;
}
Long states may be displayed as 2 lines. For this enable word-wrapping for a text.
Note that the whole row is automatically increased.
![image](https://community-assets.home-assistant.io/original/3X/5/e/5e0c7e261d6084aa68439c06e03ac63066e7487e.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style:
.box .row: |
.wrapper {
width: 50px !important;
}
.wrapper ha-icon-button {
align-self: center;
}
.wrapper .state {
text-overflow: unset;
white-space: normal;
font-size: 9px;
}
How to change a style for some item:
![image](https://community-assets.home-assistant.io/original/3X/a/f/aff04af1e9ad8e029050cce5da53042a75eb6e87.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style:
.box .row: |
div:nth-child(3) {
width: 70px !important;
}
.wrapper ha-icon-button {
align-self: center;
}
div:nth-child(3) .state {
font-size: 9px;
}
or this:
![image](https://community-assets.home-assistant.io/original/3X/7/a/7ac55dd190b4403a41fce6b4c08eb5ee614235bc.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style:
.box .row: |
div:nth-child(3) {
width: 50px !important;
}
.wrapper ha-icon-button {
align-self: center;
}
div:nth-child(3) .state {
text-overflow: unset;
white-space: normal;
font-size: 9px;
}
How to display states for resized icons:
If icons are resized, then states may be misplaced:
![image](https://community-assets.home-assistant.io/original/3X/8/c/8c1cf141566151253757ecae89f4e6351abe5854.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
ha-card {
--mdc-icon-size: 80px;
}
If a width for items is increased, then it is clear that states are misaligned too (not aligned with respect to icons):
![image](https://community-assets.home-assistant.io/original/3X/e/3/e30984a2c505c84f2a9c2b058a80d124f98ef673.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
ha-card {
--mdc-icon-size: 80px;
}
ha-card .box .row div {
width: 100px !important;
}
How to solve it:
![image](https://community-assets.home-assistant.io/original/3X/f/e/fe5ba674de7ff0aa351865bfb6b67c847c26d78b.png)
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
ha-card .box .row .wrapper ha-icon-button {
--mdc-icon-button-size: 80px !important;
}
ha-card {
--mdc-icon-size: 80px;
}
ha-card .box .row .wrapper {
align-items: center !important;
}
ha-card .box .row div {
width: 100px !important;
}
How to align text vertically for the title (+ resizing the footer):
If states are displayed, then the title may be not aligned vertically:
![image](https://community-assets.home-assistant.io/original/3X/8/a/8acabd37c98517490863b60836d77bae5560d609.png)
To align it vertically, set the "line-height"
property = height of the footer (should be measured via Inspector):
type: picture-glance
title: vertical align
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
.box .title {
line-height: 52px;
}
![image](https://community-assets.home-assistant.io/original/3X/1/1/11945c6fc9796814d25a50545f925ebb5644556f.png)
Also, it is possible to specify the height of the footer explicitly:
![image](https://community-assets.home-assistant.io/original/3X/c/b/cbfdc5a381c28129df77ac4be6f25ac47224b816.png)
type: picture-glance
title: vertical align
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
ha-card .box {
height: 80px;
}
ha-card .box .title {
line-height: 80px;
}
Changed background for the bottom row:
![image](https://community-assets.home-assistant.io/original/3X/d/0/d0430f0001b8ef241964b14d90154b56248e78f6.png)
type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
ha-card .box {
background-color: rgba(0,255,0,0.5);
}
Styling an image:
This section describes how to make the image to fit the defined cardās size.
By default the cardās size depends on the imageās size:
![image](https://community-assets.home-assistant.io/original/3X/2/4/241c9edec0b8e58a912602493e5795aaa9622485.png)
type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
If the cardās size is defined then the imageās size do not change automatically:
![image](https://community-assets.home-assistant.io/original/3X/1/b/1b85baefabd73604a28f1197885dd66aead86071.png)
type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style: |
ha-card {
height: 300px !important;
}
Here is how to fix it:
![image](https://community-assets.home-assistant.io/original/3X/e/5/e51284e4eb91941a46391da9f9bebd9b03713587.png)
type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style:
hui-image:
$: |
div {
height: inherit;
}
div img {
height: inherit;
}
.: |
hui-image {
height: 100%;
}
.: |
ha-card {
height: 300px !important;
}
Without a bottom row:
![image](https://community-assets.home-assistant.io/original/3X/3/e/3efc29b684c0aa2528650fc793a2d5d8200737dd.png)
Note: this will work if the bottom rowās height is 40px (+8px for padding); otherwise use an approprite value in formula instead of ā48pxā.
type: picture-glance
title: Kitchen
image: /local/images/blue_low_2.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style:
hui-image:
$: |
div {
display: inline;
}
div img {
height: 100%;
}
.: |
hui-image {
height: calc(100% - 48px);
}
.: |
ha-card {
height: 300px !important;
}
More examples are described here.