Styling custom:numberbox-card
:
code
type: entities
entities:
- type: section
label: colored icon (2 options)
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
state-badge {
color: cyan;
}
- type: section
label: colored text
- type: custom:numberbox-card
entity: input_number.test_parrots
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left {
color: red;
}
.grid-content.grid-right {
color: magenta;
}
.grid-content.grid-left .secondary {
color: cyan;
}
- type: custom:numberbox-card
entity: input_number.test_parrots
secondary_info: default color
card_mod:
style: |
.grid-content.grid-left {
color: red;
}
.grid-content.grid-left .secondary {
color: initial;
}
- type: section
label: colored buttons, value & unit
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padr {
color: red;
}
.body .padl {
color: cyan;
}
.body .cur-num {
color: orange;
}
- type: section
label: colored value & opaque unit (diff.colors)
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .cur-num {
color: orange;
}
.body .cur-unit {
color: cyan;
opacity: 1;
}
- type: section
label: spacings
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padr {
padding-right: 32px;
}
.body .padl {
padding-left: 32px;
}
.body .cur-unit {
margin-left: 32px;
}
- type: section
label: Full width
- type: custom:numberbox-card
entity: input_number.test_parrots
icon: false
name: false
card_mod:
style: |
.body .cur-box {
display: grid;
grid-template-columns: 1fr 10fr 1fr;
place-items: center;
}
- type: section
label: Bordered row
- type: custom:numberbox-card
entity: input_number.test_parrots
name: Bordered row
border: true
card_mod:
style: |
:host {
--ha-card-box-shadow: 5px 5px 8px red, 10px 10px 8px green, 5px 5px 8px blue;
}
Changed āon-editā color:
![zserfvt](https://community-assets.home-assistant.io/original/4X/c/c/8/cc891a25a9dc5610eedb2af67e6580e21f69e6dd.gif)
Summary
type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .cur-num {
color: cyan;
}
.body .upd {
color: magenta;
}
.body .cur-unit {
color: red;
}
Vertically aligned buttons:
![image](https://community-assets.home-assistant.io/original/4X/1/9/3/193fc6b9f8255e4e4c6c7c3630b46ef7e522b85b.png)
code
type: horizontal-stack
title: 1 column
cards:
- type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
name: false
icon: false
card_mod:
style: |
.body .cur-box {
display: grid;
place-items: start;
}
.body .padr {
padding-left: 0px;
}
.body .padl {
padding-left: 0px;
}
- type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
name: false
icon: false
card_mod:
style: |
.body .cur-box {
display: grid;
place-items: center;
}
- type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
name: false
icon: false
card_mod:
style: |
.body .cur-box {
display: grid;
place-items: end;
}
.body .padr {
padding-right: 0px;
}
.body .padl {
padding-right: 0px;
}
Vertical spacing for buttons:
![image](https://community-assets.home-assistant.io/original/4X/0/b/0/0b07802a57fbc199c3a57712b4d47e2ec777ff4a.png)
code
type: horizontal-stack
title: 1 column, vertical spacing
cards:
- type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
name: false
icon: false
card_mod:
style: |
.body .cur-box {
display: grid;
place-items: center;
}
- type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
name: false
icon: false
card_mod:
style: |
.body .cur-box {
display: grid;
place-items: center;
}
.body .padl {
padding-bottom: 0px;
}
.body .padr {
padding-top: 0px;
}
- type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_parrots
name: false
icon: false
card_mod:
style: |
.body .cur-box {
display: grid;
place-items: center;
}
.body .padl {
padding-bottom: 32px;
}
.body .padr {
padding-top: 32px;
}
Horizontal alignment for buttons & values:
![image](https://community-assets.home-assistant.io/original/4X/8/2/a/82a475076c0b39f5c1c2e846103257836d4df9c6.png)
code
type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_number
name: Threshold 1
- type: custom:numberbox-card
entity: input_number.test_number_2
name: Threshold 2
- type: custom:numberbox-card
entity: input_number.test_number_3
name: Threshold 3
card_mod:
style:
numberbox-card:
$: |
ha-card .body .cur-num-box {
display: grid;
width: 50px;
text-align: center;
}
Custom secondary_info
:
Update 03.01.22: since ver. 3.2 it is possible to specify a plain text for secondary_info
, so this trick is not required any more - at least for making a custom secondary_info
. Note that conditional content in "secondary-info"
is still possible only by using card-mod & ā:beforeā method.
![image](https://community-assets.home-assistant.io/original/4X/2/e/3/2e33d8816ecfde6554dca551bfada683dc86d2a7.png)
code
type: entities
entities:
- type: custom:numberbox-card
entity: input_number.wait_period_before_alarm_1_xiaomi_roborock_s50_mop_check
name: Threshold 1
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left .info .secondary ha-relative-time {
color: transparent;
}
.grid-content.grid-left .info .secondary::before {
color: orange;
content: "Warning";
}
- type: custom:numberbox-card
entity: input_number.wait_period_before_alarm_2_xiaomi_roborock_s50_mop_check
name: Threshold 2
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left .info .secondary ha-relative-time {
color: transparent;
}
.grid-content.grid-left .info .secondary::before {
color: red;
content: "Critical\A Danger";
white-space: pre;
}
How to disable buttons:
![image](https://community-assets.home-assistant.io/original/4X/1/1/6/116117add61094be120286721c8171793c2b4dcc.png)
code
type: entities
title: Locked control
entities:
- entity: input_boolean.test_boolean
name: Lock input_number
- type: custom:numberbox-card
entity: input_number.test_parrots
tap_action: none
card_mod:
style: |
.body .padl {
{% if is_state('input_boolean.test_boolean','on') %}
color: var(--disabled-text-color);
{% endif %}
}
.body .padr {
{% if is_state('input_boolean.test_boolean','on') %}
color: var(--disabled-text-color);
{% endif %}
}
:host {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
{% endif %}
}
How to disable whole row (a case with a toggle button):
![image](https://community-assets.home-assistant.io/original/4X/b/2/6/b26ddac563a167cc0970db7c6d0d64bbf878439a.png)
![image](https://community-assets.home-assistant.io/original/4X/8/5/c/85c77ebef3aa12e4ce31d5b5199ffb75cf423283.png)
code
- type: custom:numberbox-card
entity: input_number.test_parrots
toggle_entity: input_boolean.test_boolean_2
card_mod:
style:
ha-entity-toggle $:
ha-switch $: |
.mdc-switch .mdc-switch__thumb input {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
{% endif %}
}
.: |
ha-switch {
{% if is_state('input_boolean.test_boolean','on') %}
--switch-unchecked-button-color: var(--disabled-text-color);
--switch-checked-button-color: var(--disabled-text-color);
{% endif %}
}
.: |
.padl {
{% if is_state('input_boolean.test_boolean','on') %}
color: var(--disabled-text-color);
{% endif %}
}
.padr {
{% if is_state('input_boolean.test_boolean','on') %}
color: var(--disabled-text-color);
{% endif %}
}
:host {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
{% endif %}
}
.grid-content {
{% if is_state('input_boolean.test_boolean','on') %}
color: var(--disabled-text-color);
{% endif %}
}
Colored background:
By default the background is not transparent.
There are a few ways to make it transparent as well as to change a color:
code
type: entities
title: background
card_mod:
style: |
ha-card {
background: orange;
}
entities:
- type: section
label: default
- entity: sun.sun
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
label: colored background
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
ha-card {
background: pink;
}
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.grid {
background: pink;
}
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
:host {
--ha-card-background: pink;
}
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
ha-card {
--ha-card-background: pink;
}
- type: section
label: transparent background
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
ha-card {
background: transparent;
}
Changing a size of āplusā & āminusā icons:
May be achieved by specifying an "--mdc-icon-size"
variable.
To decrease the size for both icons:
![image](https://community-assets.home-assistant.io/original/4X/7/0/9/70966a3a8f104912053db7b3b5f03272a759eec7.png)
code
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body {
--mdc-icon-size: 10px;
}
To decrease the size for one icon only:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/0/d/e/0de661485449433e770f1cf76ed20e953eb2a6c0.png)
code
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padr {
--mdc-icon-size: 8px;
}
To increase the size a user must be aware of top & bottom padding - otherwise the row may be higher than other rows; the rowās height should not be higher than 40px - i.e the iconsā height should not be higher than 40px.
Check this example:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/b/0/d/b0d6dde631010cea0901caa2e84d6574b50d5433.png)
code
type: horizontal-stack
cards:
- type: entities
entities:
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padr {
--mdc-icon-size: 8px;
}
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padl {
--mdc-icon-size: 8px;
}
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padl {
--mdc-icon-size: 40px;
}
- type: section
- type: entities
entities:
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
Here is how to fix the rowās height by setting zero "padding-top"
& "padding-bottom"
:
![ŠøŠ·Š¾Š±ŃŠ°Š¶ŠµŠ½ŠøŠµ](https://community-assets.home-assistant.io/original/4X/f/a/5/fa576016d6aa88853b61bbb8a97042f1cab3012b.png)
code
type: horizontal-stack
cards:
- type: entities
entities:
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padr {
--mdc-icon-size: 8px;
}
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padl {
--mdc-icon-size: 8px;
}
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padl {
--mdc-icon-size: 40px;
padding-top: 0px;
padding-bottom: 0px;
}
- type: section
- type: entities
entities:
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
- type: custom:numberbox-card
entity: input_number.test_parrots
- type: section
Another solution (simpler & more elegant) was provided by the author of this card here:
scale both icons:
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body ha-icon {
transform: scale(2);
}
scale one icon:
- type: custom:numberbox-card
entity: input_number.test_parrots
card_mod:
style: |
.body .padl {
transform: scale(2);
}
This method does not require changing paddings!
More examples are described here.