Then I would suggest to jump over to the card-mod themes topic/thread.
@Bourner Imho this is rather rare case, I would suggest to ask this question in a thread dedicated to that auto-generated dashboard.
This case I cannot simulate; adding the Area card manually does not seem to help, I cannot see the “area-button” selector you mentioned.
Hence, do not think that moving the question to card-mod-theme thread may help.
Its not the default HA card for areas. its something from dwains dashboard.
I already asked the developer but didn’t get an answer so I thought this is the correct place.
So in general how would you style a div that has no ha-card element with card-mod themes?
In case of using cards w/o ha-card in a normal dashboard - place the card into mod-card (as it was already advised to you).
But since you have no control on your cards - cannot advise anything then…
Imho this auto-generated solutions may cause more problems than solutions where you have a full control.
Ok still thanks for your info. You could try Dwains Dashboard. Really nice and easy to install. I don’t have any trouble with this I just want to edit the theme so it looks a bit better.
How to make MDC controls input_number (“box” mode), input_select, input_text & input_datetime look less different from other entity rows:
MDC controls added in HA 2022.3 have a different look in comparison to other Lovelace entity rows:
1.Different row’s height:
2.Different right padding for a value & UoM:
3.Different horizontal space between a value & UoM (see the picture above).
This post contains styles for these controls to make them look more like other entity rows (if possible).
Warning: different browsers may display input_number rows differently; here pictures from Chrome are provided by default; pictures from Firefox are provided where differences are critical; as for Safari (MacOS, iOS) - sorry, you should compare it & get thrilled by yourself…
Styling a height:
Create a new view with a “panel mode”:
title: mdc_height
path: mdc_height
panel: true
badges: []
cards:
- type: horizontal-stack
cards:
- &ref_scale_card
type: entities
title: ...
entities:
- &ref_row_sun
entity: sun.sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
##############################################################################
- type: entities
title: default
entities:
- *ref_row_sun
- type: section
- entity: sun.sun
secondary_info: last-changed
- type: section
- entity: sensor.processor_use
name: sensor
- type: section
- entity: sensor.processor_use
name: sensor
secondary_info: last-changed
- type: section
- entity: input_number.test_number
name: slider
- type: section
- entity: input_number.test_number
name: slider
secondary_info: last-changed
- type: section
- entity: input_boolean.test_boolean
name: checkbox
- type: section
- entity: input_boolean.test_boolean
name: checkbox
secondary_info: last-changed
- type: section
- entity: input_number.test_number_2
name: default
- type: section
- entity: input_number.test_number_2
name: default
secondary_info: last-changed
- type: section
- entity: input_select.test_value
name: default
- type: section
- entity: input_text.test_text
name: default
- type: section
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_time
name: default
secondary_info: last-changed
- type: section
- entity: input_datetime.test_date
name: default
- type: section
- entity: input_datetime.test_date
name: default
secondary_info: last-changed
- type: section
##################################################################################
- type: entities
title: custom
entities:
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- entity: input_number.test_number_2
name: custom height
card_mod: &ref_card_mod_input_number
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- type: section
- entity: input_number.test_number_2
name: custom height
secondary_info: last-changed
card_mod: *ref_card_mod_input_number
- type: section
- entity: input_select.test_value
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-select {
height: 40px;
}
- type: section
- entity: input_select.test_value
name: custom height
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
- type: section
- entity: input_text.test_text
name: custom height
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
- type: section
- entity: input_datetime.test_datetime
name: custom height
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $: &ref_style_height_datetime__time_input
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
- type: section
- entity: input_datetime.test_datetime
name: custom height
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $: *ref_style_height_datetime__time_input
- type: section
- entity: input_datetime.test_time
name: custom height
card_mod: &ref_card_mod_time
style:
ha-time-input $ ha-base-time-input $: *ref_style_height_datetime__time_input
- type: section
- entity: input_datetime.test_time
name: custom height
card_mod: *ref_card_mod_time
secondary_info: last-changed
- type: section
- entity: input_datetime.test_date
name: custom height
card_mod: &ref_card_mod_date
style:
ha-date-input $ ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- type: section
- entity: input_datetime.test_date
name: custom height
card_mod: *ref_card_mod_date
secondary_info: last-changed
- type: section
##################################################################################
- *ref_scale_card
The card has 4 columns:
– 1st & 4th - contain “sun” entity rows and used as a “scale”;
– 2nd - contains entity rows for different domains (with & w/o secondary_info) + rows for input_number (“box mode”), input_select, input_text & input_datetime;
– 3rd - contains “sun” entity rows and customized rows for input_number (“box mode”), input_select, input_text & input_datetime.
What we can see here:
1.Rows for input_number (“box mode”), input_select, input_text & input_datetime have a bigger height than other rows. This may be fixed by customization - see a code above.
2.All other entity rows for different domains have same height.
Notes:
1.There are 2 customized rows for input_select:
– with a displayed name;
– w/o a displayed name.
2.Basic styles (incl. height) for input_number (“box mode”), input_select, input_text & input_datetime are described here:
– input_number
– input_select
– input_text
– input_datetime - part 1, part 2
3.These test entities are used for this demo:
– input_boolean.test_boolean - any helper;
– input_number.test_number - any helper in a “slider” mode;
– input_number.test_number_2 - any helper in a “box” mode;
– input_select.test_value - any helper;
– input_text.test_text - any helper;
– input_datetime - any 3 helpers for “datetime”, “date” & “time”;
– sensor.processor_use - any sensor (better with UoM) (here I am using one from a “sysmonitor” platform).
(continuation in the next post)
3 Likes
(continuation of this post)
Additional styling:
Create a new view with a “panel mode”:
title: mdc_height_transp
path: mdc_height_transp
badges: []
cards:
- type: entities
entities:
- entity: input_number.test_number_2
name: default
- type: section
- entity: input_number.test_number_2
name: compact + no right padding
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
}
- entity: input_number.test_number_2
name: + transparent
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + underline
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border on hover + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border-radius: 4px !important;
border: 1px solid transparent;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + shifted to right
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
margin-right: -16px;
}
- type: section
- &ref_sensor_row
entity: sensor.processor_use
name: sensor
#########################################################################################
- type: section
label: with UoM
- entity: input_number.test_value_uom
name: compact
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- entity: input_number.test_value_uom
name: + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_value_uom
name: compact + no right padding
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
}
- entity: input_number.test_value_uom
name: compact + no UoM-paddings
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + no right padding
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + underline
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + border + no underline + custom UoM-paddings
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
font-size: 10px;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 8px;
}
- type: section
- *ref_sensor_row
######################################################################################################################
- type: entities
entities:
- entity: input_select.test_value
name: default
- type: section
- entity: input_select.test_value
name: compact
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
- entity: input_select.test_value
name: compact + transparent
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + underline
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border on hover + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid transparent;
}
.mdc-select__anchor:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
######################################################################################################################
- type: entities
entities:
- entity: input_text.test_text
name: default
- type: section
- entity: input_text.test_text
name: compact
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
- entity: input_text.test_text
name: compact + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + underline
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border on hover + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid transparent;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- type: entities
entities:
- entity: input_number.test_number_2
name: default
- type: section
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
The card has 4 columns:
– 4th - contains “sun” entity rows and used as a “scale”;
– 1st - contains rows for input_number (“box mode”);
– 2nd - contains rows for input_select;
– 3rd - contains rows for input_text.
Note: the card does not contain rows for input_datetime - just because my screen may show 4 columns maximum (3 for helpers, 1 for a “scale”); examples for input_datetime will be considered later.
What we can see here:
1.All rows have same height (except 1st rows in each column which are input_number, input_select & input_text rows with a default height) - since every input_number, input_select & input_text has a customized height (see “Styling a height” topic above).
2.All other input_number, input_select & input_text rows have custom styles as described below.
3.Regarding the right padding for a value:
Chrome:
Only the last row for input_number w/o UoM has a same right padding as a conventional sensor row:
This right offset is used for a “up/down” control:
Unfortunately this looks totally differently on MacOS & iOS - compare it by yourself…
Alternatively - use a style to display a field’s boundaries since the right boundary has the same right padding as a conventional sensor row:
You can use styles Nos 1, 4, 6.
Firefox:
Since the “up/down” control is always displayed - choose any style (Nos 1…8).
4.Regarding the right padding for a UoM, horizontal spacing between a value & UoM:
Chrome:
You can use styles Nos 5…8.
Firefox:
Same recommendation - use styles Nos 5…8 if you don’t hate these wide fields, otherwise try to decrease a field’s width - or do not use Firefox…
Custom styles for input_number w/o UoM:
1.Custom height + removed right padding.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
8.Same as (2) + field shifted to right.
Styles for input_number with UoM:
1.Custom height.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (1) + removed right padding.
4.Same as (1) + removed paddings for UoM.
5.Same as (4) + removed right padding.
6.Same as (5) + transparent (removed underline, transparent background).
7.Same as (6) + underline.
8.Same as (5) + border + custom paddings for UoM.
Styles for input_select:
1.Custom height, compacted name (label) and value.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
Same for input_text:
Notes:
1.This style is used to wrap long names for input_number rows and may be omitted:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
2.These test entities are used for this demo:
– input_number.test_number_2 - any helper in a “box” mode;
– input_number.test_value_uom - any helper in a “box” mode with UoM;
– input_select.test_value - any helper;
– input_text.test_text - any helper;
– sensor.processor_use - any sensor (better with UoM) (here I am using one from a “sysmonitor” platform).
Chosen styles may be specified in card-mod-theme, check the example below:
card-mod-row-yaml: |
hui-generic-entity-row:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__input {
{% if config is defined %}
{% if config.entity is defined %}
{% if config.entity.startswith('input_text.') %}
align-self: end;
{% endif %}
{% endif %}
{% endif %}
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
--mdc-select-fill-color: transparent;
}
ha-textfield {
height: 40px;
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 8px;
--mdc-text-field-fill-color: transparent;
}
(continuation in this post)
5 Likes
Hello, I would appreciate some help please, I’ve tried everything I could think of and can’t get this to work.
I am using Mushroom, specifically the title-card. I would like to decrease the space between cards. Using the inspector, I can see that what’s determining the space is:
--title-padding: var(--mush-title-padding, 24px 12px 16px);
This falls within:
<mushroom-title-card dark-mode="">
And there is the #shadow-toot (open) element above.
How would I go about changing those values?
1 Like
(continuation of this post)
Similarly - input_datetime rows may be added to the test card as a separate column (5 columns does not fit in my screen):
- type: entities
entities:
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_datetime
name: compact
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: input_datetime.test_datetime
name: compact + transparent
card_mod:
style:
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
- entity: input_datetime.test_datetime
name: compact + transparent + underline
card_mod:
style:
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
- entity: input_datetime.test_datetime
name: compact + transparent + border
card_mod:
style:
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-time-input {
height: 38px;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
- entity: input_datetime.test_datetime
name: compact + transparent + no ripple
card_mod:
style:
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
- entity: input_datetime.test_datetime
name: compact + transp. + border + no ripple
card_mod:
style:
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-time-input {
height: 38px;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
- entity: input_datetime.test_datetime
name: compact + transp. + border on hover + no ripple
card_mod:
style:
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid transparent;
border-radius: 4px !important;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-time-input {
height: 38px;
border: 1px solid transparent;
border-radius: 4px !important;
}
ha-time-input:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
- sun.sun
- type: section
Styles for input_datetime rows:
1.Custom height, compacted name (label) and value.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
Notes:
1.For this demo you need any input_datetime helper for “datetime”.
2.Possible styles for input_datetime are provided here - part 1, part 2.
3.This demo does not contain examples for “time” & “date” helpers.
4.Results for “date” & “time” will be similar; the only exception - do not add a “align-self: end;” style since it is supposed to be used for “datetime” only.
Chosen styles may be specified in card-mod-theme, check the example below (note - there is a conditional " align-self: end" style):
card-mod-row-yaml: |
hui-generic-entity-row:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__input {
{% if config is defined %}
{% if config.entity is defined %}
{% if state_attr(config.entity,'has_time') %}
align-self: end;
{% endif %}
{% endif %}
{% endif %}
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
display: flex;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-date-input {
height: 40px;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
flex-grow: 10;
}
ha-time-input {
height: 38px;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
Result with this theme (combined with a similar theme for input_number, input_select, input_text):
4 Likes
Hello, thanks for this powerful tool.
Unfortunately, for me card-mod is a little bit unreliable. I use two Raspi 3B+ with displays for my smart home. The lovelace ui is displayed with chromium. The card-mod modifications are not always shown. I can reproduce this with my desktop computer using chrome. If I reload the page with F5, every now and then the mod is not applied. I added an example here.
The date and time string should be showed with bold font. As you can see, in the working case card-mod is part of the source code. After pressing F5 some times, the font is normal and the card-mod has disappeared from the source code.
What can I do?
Post a code for the mod which is unstable.
1 Like
Styling an "input_datetime" row (part 1) (part 2 is here)
Notes:
1.There are 3 types of input_datetime entity:
– date & time;
– date;
– time.
This tutorial contains examples for each type.
2.A user may use either “12H (AM/PM)” or “24H” time format. Both cases are considered.
3.Screenshots are made in Chrome.
Colored name (time, date):
Two methods are available:
– using a short “:host” navigation;
– using a detailed DOM navigation.
Note: these styles do not affect on “secondary-info”.
code
- type: entities
entities:
- entity: input_datetime.test_time
name: method 1
card_mod: &ref_host
style: |
:host {
color: red;
}
- entity: input_datetime.test_date
name: method 1
card_mod: *ref_host
- entity: input_datetime.test_date
name: method 1
secondary_info: last-changed
card_mod: *ref_host
- type: section
- entity: input_datetime.test_time
name: method 2
card_mod: &ref_dom
style:
hui-generic-entity-row $: |
.info {
color: red;
}
- entity: input_datetime.test_date
name: method 2
card_mod: *ref_dom
- entity: input_datetime.test_date
name: method 2
secondary_info: last-changed
card_mod: *ref_dom
- type: section
- entity: input_datetime.test_time
name: default
- entity: input_datetime.test_date
name: default
How to style several rows:
Note that a common style may be overwritten for some particular entity.
code
- type: entities
card_mod:
style:
.card-content:
div:
hui-input-datetime-entity-row $ hui-generic-entity-row $: |
.info {
color: orange;
}
entities:
- entity: input_datetime.test_time
name: Can't overwrite
style: &ref_cannot_be_overwritten|
:host {
color: red !important;
}
- entity: input_datetime.test_time
name: Overwritten style
card_mod: &ref_overwritten
style:
hui-generic-entity-row $: |
.info {
color: red !important;
}
- entity: input_datetime.test_time
name: common style
- entity: input_datetime.test_time
name: common style
- type: section
- entity: input_datetime.test_date
name: Can't overwrite
style: *ref_cannot_be_overwritten
- entity: input_datetime.test_date
name: Overwritten style
card_mod: *ref_overwritten
- entity: input_datetime.test_date
name: common style
- entity: input_datetime.test_date
name: common style
Colored name (datetime):
Two methods are available:
– using a CSS property with a detailed DOM navigation;
– using a CSS variable.
Notes:
1.The 1st method - allows to change a color permanently (whether the input field is selected or not).
2.The 2nd method - the name’s color changes if an input field is selected (from “--mdc-text-field-label-ink-color” to “--mdc-theme-primary”).
3.A popup window to select a date is not shown on a video.
code
- type: entities
entities:
- entity: input_datetime.test_datetime
name: Colored name (method 1)
card_mod:
style:
hui-generic-entity-row ha-date-input $:
ha-textfield $: |
span#label {
color: red;
}
- entity: input_datetime.test_datetime
name: Colored name (method 2)
card_mod:
style:
hui-generic-entity-row ha-date-input $:
ha-textfield $: |
span#label {
--mdc-text-field-label-ink-color: magenta;
--mdc-theme-primary: orange;
}
- entity: input_datetime.test_datetime
name: default
How to style several rows:
Note that a common style may be overwritten for some particular entity.
code
- type: entities
card_mod:
style:
.card-content:
div:
hui-input-datetime-entity-row $ hui-generic-entity-row ha-date-input $:
ha-textfield $: |
span#label {
--mdc-text-field-label-ink-color: magenta;
--mdc-theme-primary: orange;
}
entities:
- entity: input_datetime.test_datetime
name: Cannot be overwritten
card_mod:
style: |
:host {
--mdc-text-field-label-ink-color: cyan;
--mdc-theme-primary: green;
}
- entity: input_datetime.test_datetime
name: Overwritten style
card_mod:
style:
hui-generic-entity-row ha-date-input $:
ha-textfield $: |
span#label {
color: red;
}
- entity: input_datetime.test_datetime
name: Colored name (common)
Colored secondary_info (time, date):
code
- type: entities
entities:
- entity: input_datetime.test_time
name: Colored secondary_info
secondary_info: last-changed
card_mod: &ref_colored
style:
hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: orange !important;
}
- entity: input_datetime.test_time
name: Different colors
secondary_info: last-changed
card_mod: &ref_different
style:
hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: orange !important;
}
.info {
color: red;
}
- entity: input_datetime.test_time
secondary_info: last-changed
name: default
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_date
name: Colored secondary_info
secondary_info: last-changed
card_mod: *ref_colored
- entity: input_datetime.test_date
name: Different colors
secondary_info: last-changed
card_mod: *ref_different
- entity: input_datetime.test_date
secondary_info: last-changed
name: default
- entity: input_datetime.test_date
name: default
How to style several rows:
Note that a common style may be overwritten for some particular entity.
code
- type: entities
card_mod:
style:
.card-content:
div:
hui-input-datetime-entity-row $ hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: cyan !important;
}
entities:
- entity: input_datetime.test_time
secondary_info: last-changed
name: common style
- entity: input_datetime.test_time
name: overwritten style
secondary_info: last-changed
card_mod: &ref_overwritten
style:
hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: orange !important;
}
- entity: input_datetime.test_time
secondary_info: last-changed
name: common style
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_date
secondary_info: last-changed
name: common style
- entity: input_datetime.test_date
name: overwritten style
secondary_info: last-changed
card_mod: *ref_overwritten
- entity: input_datetime.test_date
secondary_info: last-changed
name: common style
- entity: input_datetime.test_date
name: default
Colored main icon:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.
code
- type: entities
entities:
- entity: input_datetime.test_time
name: method 1
card_mod: &ref_colored_1
style: |
:host {
--paper-item-icon-color: red;
}
- entity: input_datetime.test_time
name: method 2
card_mod: &ref_colored_2
style:
hui-generic-entity-row $: |
state-badge {
color: red;
}
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_datetime
name: method 1
card_mod: *ref_colored_1
- entity: input_datetime.test_datetime
name: method 2
card_mod: *ref_colored_2
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_date
name: method 1
card_mod: *ref_colored_1
- entity: input_datetime.test_date
name: method 2
card_mod: *ref_colored_2
- entity: input_datetime.test_date
name: default
How to style several rows:
Note that a common style may be overwritten for some particular entity.
code
- type: entities
card_mod:
style: |
ha-card {
--paper-item-icon-color: cyan;
}
entities:
- entity: input_datetime.test_time
name: overwritten style
card_mod: &ref_overwritten
style: |
:host {
--paper-item-icon-color: red;
}
- &ref_row_time
entity: input_datetime.test_time
name: common style
- *ref_row_time
- type: section
- entity: input_datetime.test_datetime
name: overwritten style
card_mod: *ref_overwritten
- &ref_row_datetime
entity: input_datetime.test_datetime
name: common style
- *ref_row_datetime
- type: section
- entity: input_datetime.test_date
name: overwritten style
card_mod: *ref_overwritten
- &ref_row_date
entity: input_datetime.test_date
name: common style
- *ref_row_date
Some other styles for the main icon - resized icon, hidden icon:
code
- type: entities
entities:
- entity: input_datetime.test_time
name: resized icon
card_mod: &ref_card_mod_resize_host
style: |
:host {
--mdc-icon-size: 40px;
}
- entity: input_datetime.test_time
name: hidden icon
card_mod: &ref_card_mod_hide_icon
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: section
- entity: input_datetime.test_datetime
name: resized all icons
card_mod: *ref_card_mod_resize_host
- entity: input_datetime.test_datetime
name: resized main icon
card_mod: &ref_card_mod_resize_main_icon
style:
hui-generic-entity-row $: |
state-badge {
--mdc-icon-size: 40px;
}
- entity: input_datetime.test_datetime
name: hidden main icon
card_mod: *ref_card_mod_hide_icon
- type: section
- entity: input_datetime.test_date
name: resized all icons
card_mod: *ref_card_mod_resize_host
- entity: input_datetime.test_date
name: resized main icon
card_mod: *ref_card_mod_resize_main_icon
- entity: input_datetime.test_date
name: hidden main icon
card_mod: *ref_card_mod_hide_icon
Colored value:
Two methods are available:
– using a “:host” navigation;
– using a detailed DOM navigation.
Notes:
1.The 1st method - may be used to define a same color for all “text” fields (date, time) and another color for a “select” field (“AM/PM”).
2.The 2nd method - may be used to define colors individually for all “text” fields (date, time) and another color for a “select” field (“AM/PM”).
code
- type: entities
entities:
- entity: input_datetime.test_time
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-ink-color: red;
--mdc-select-ink-color: cyan;
}
- entity: input_datetime.test_time
name: method 2
card_mod:
style:
ha-time-input $ ha-base-time-input $: |
ha-textfield:nth-of-type(1) {
--mdc-text-field-ink-color: red;
}
ha-textfield:nth-of-type(2) {
--mdc-text-field-ink-color: orange;
}
ha-select {
--mdc-select-ink-color: cyan;
}
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_datetime
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-ink-color: red;
--mdc-select-ink-color: cyan;
}
- entity: input_datetime.test_datetime
name: method 2
card_mod:
style:
ha-date-input $: |
ha-textfield {
--mdc-text-field-ink-color: red;
}
ha-time-input $ ha-base-time-input $: |
ha-textfield:nth-of-type(1) {
--mdc-text-field-ink-color: red;
}
ha-textfield:nth-of-type(2) {
--mdc-text-field-ink-color: orange;
}
ha-select {
--mdc-select-ink-color: cyan;
}
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_date
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-ink-color: red;
}
- entity: input_datetime.test_date
name: method 2
card_mod:
style:
ha-date-input $: |
ha-textfield {
--mdc-text-field-ink-color: red;
}
- entity: input_datetime.test_date
name: default
Colored field’s background:
code
- type: entities
entities:
- entity: input_datetime.test_time
name: colored background
card_mod:
style: |
:host {
--mdc-text-field-fill-color: lightgreen;
--mdc-select-fill-color: magenta;
}
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_datetime
name: colored background
card_mod:
style: |
:host {
--mdc-text-field-fill-color: lightgreen;
--mdc-select-fill-color: magenta;
}
- entity: input_datetime.test_datetime
name: colored background
card_mod:
style: |
ha-date-input {
--mdc-text-field-fill-color: orange;
}
ha-time-input {
--mdc-text-field-fill-color: cyan;
--mdc-select-fill-color: magenta;
}
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_date
name: colored background
card_mod:
style: |
:host {
--mdc-text-field-fill-color: lightgreen;
}
- entity: input_datetime.test_date
name: default
Colored underline:
The underline had 3 possible states:
– a default (static) state;
– the input field is hovered by a mouse;
– the input field is selected by a mouse.
There are CSS variables for each state.
In the example below:
– the 1st row is modded by using these CSS variables;
– the 2nd row is modded by changing CSS properties with a detailed DOM navigation;
– the 3rd row has transparent underlines.
code
- type: entities
entities:
- entity: input_datetime.test_time
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-idle-line-color: red;
--mdc-text-field-hover-line-color: cyan;
--mdc-select-idle-line-color: red;
--mdc-select-hover-line-color: cyan;
--mdc-theme-primary: magenta;
}
- entity: input_datetime.test_time
name: method 2
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: &ref_style_underline_time |
.mdc-line-ripple::before {
border-bottom-color: red !important;
}
.mdc-line-ripple::after {
border-bottom-color: magenta !important;
}
ha-select $: *ref_style_underline_time
- entity: input_datetime.test_time
name: no underline
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: &ref_style_no_underline_time |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
ha-select $: *ref_style_no_underline_time
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_datetime
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-idle-line-color: red;
--mdc-text-field-hover-line-color: cyan;
--mdc-select-idle-line-color: red;
--mdc-select-hover-line-color: cyan;
--mdc-theme-primary: magenta;
}
- entity: input_datetime.test_datetime
name: method 2
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: &ref_style_underline_datetime |
.mdc-line-ripple::before {
border-bottom-color: red !important;
}
.mdc-line-ripple::after {
border-bottom-color: magenta !important;
}
ha-select $: *ref_style_underline_datetime
ha-date-input $ ha-textfield $: *ref_style_underline_datetime
- entity: input_datetime.test_datetime
name: no underline
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: &ref_style_no_underline_datetime |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
ha-select $: *ref_style_no_underline_datetime
ha-date-input $ ha-textfield $: *ref_style_no_underline_datetime
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_date
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-idle-line-color: red;
--mdc-text-field-hover-line-color: cyan;
--mdc-theme-primary: magenta;
}
- entity: input_datetime.test_date
name: method 2
card_mod:
style:
ha-date-input $ ha-textfield $: |
.mdc-line-ripple::before {
border-bottom-color: red !important;
}
.mdc-line-ripple::after {
border-bottom-color: magenta !important;
}
- entity: input_datetime.test_date
name: no underline
card_mod:
style:
ha-date-input $ ha-textfield $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
- entity: input_datetime.test_date
name: default
More examples here.
3 Likes
Styling an "input_datetime" row (part 2) (part 1 is here)
Styling “calendar” icon:
code
- type: entities
entities:
- entity: input_datetime.test_datetime
name: colored (method 1)
card_mod: &ref_card_mod_colored_1
style: |
ha-date-input {
--secondary-text-color: cyan;
}
- entity: input_datetime.test_datetime
name: colored (method 2)
card_mod: &ref_card_mod_colored_2
style:
ha-date-input $: |
ha-svg-icon {
color: red !important;
}
- entity: input_datetime.test_datetime
name: resized
card_mod: &ref_card_mod_resized
style:
ha-date-input $: |
ha-svg-icon {
--mdc-icon-size: 40px;
}
- entity: input_datetime.test_datetime
name: hidden
card_mod: &ref_card_mod_hidden
style:
ha-date-input $: |
ha-svg-icon {
display: none;
}
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_date
name: colored (method 1)
card_mod: *ref_card_mod_colored_1
- entity: input_datetime.test_date
name: colored (method 2)
card_mod: *ref_card_mod_colored_2
- entity: input_datetime.test_date
name: resized
card_mod: *ref_card_mod_resized
- entity: input_datetime.test_date
name: hidden
card_mod: *ref_card_mod_hidden
- entity: input_datetime.test_date
name: default
Colored “expand” button:
code
- type: entities
entities:
- entity: input_datetime.test_time
name: colored button
card_mod: &ref_card_mod_colored_expand_button
style:
ha-time-input $ ha-base-time-input $ ha-select $: |
.mdc-select__dropdown-icon {
--mdc-select-dropdown-icon-color: cyan;
--mdc-theme-primary: magenta;
}
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_datetime
name: colored button
card_mod: *ref_card_mod_colored_expand_button
- entity: input_datetime.test_datetime
name: default
Alignment of input fields:
Dependingly on a current local settings (“12H AM/PM” or “24H” time format), the input_datetime row is displayed differently.
Two methods may be used - see a difference between them:
code
- type: entities
entities:
- entity: input_datetime.test_datetime
name: method 1
card_mod:
style: |
ha-date-input {
margin-left: auto !important;
}
- entity: input_datetime.test_datetime
name: method 2
card_mod:
style:
ha-date-input $: |
ha-textfield {
display: flex;
}
.: |
ha-date-input {
flex-grow: 10;
}
- entity: input_datetime.test_datetime
name: default
Wrapping a long name:
code
- type: entities
entities:
- entity: input_datetime.test_time
name: &ref_long_name long long long long long long long long long long
secondary_info: last-changed
card_mod: &ref_card_mod_wrapping_text
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
- entity: input_datetime.test_time
name: *ref_long_name
card_mod: *ref_card_mod_wrapping_text
- entity: input_datetime.test_time
secondary_info: last-changed
name: *ref_long_name
- entity: input_datetime.test_time
name: *ref_long_name
- type: section
- entity: input_datetime.test_date
name: *ref_long_name
secondary_info: last-changed
card_mod: *ref_card_mod_wrapping_text
- entity: input_datetime.test_date
name: *ref_long_name
card_mod: *ref_card_mod_wrapping_text
- entity: input_datetime.test_date
secondary_info: last-changed
name: *ref_long_name
- entity: input_datetime.test_date
name: *ref_long_name
Changing a row’s height (time, date):
code
- type: entities
entities:
- entity: input_datetime.test_time
name: custom height
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_date
name: custom height
card_mod:
style:
ha-date-input $ ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- entity: input_datetime.test_date
name: default
Making the name hidden or more compact (datetime):
Since the row has a bigger height than other entity rows, we may want to make a row more compact.
First, we need to customize the row’s height.
Next, there are 2 options for a name & a value:
– remove the name;
– place the name and the value closer to each other.
code
- type: entities
entities:
- entity: input_datetime.test_datetime
name: custom height
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: input_datetime.test_datetime
name: custom
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: input_datetime.test_datetime
name: default
How to disable a row:
Two methods are available:
– the row is displayed as disabled;
– the row only has a read-only input field.
code
- type: entities
entities:
- entity: input_boolean.test_boolean
name: Lock input_datetime
- entity: input_datetime.test_time
name: disabled
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--mdc-select-ink-color: var(--disabled-text-color);
--mdc-select-idle-line-color: var(--disabled-text-color);
--mdc-select-dropdown-icon-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
- entity: input_datetime.test_time
name: read-only
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
{% endif %}
}
- type: section
- entity: input_datetime.test_datetime
name: disabled
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
--mdc-text-field-label-ink-color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--mdc-select-ink-color: var(--disabled-text-color);
--mdc-select-idle-line-color: var(--disabled-text-color);
--mdc-select-dropdown-icon-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
--secondary-text-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
- entity: input_datetime.test_datetime
name: read-only
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
{% endif %}
}
- type: section
- entity: input_datetime.test_date
name: disabled
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
--mdc-text-field-label-ink-color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
--secondary-text-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
- entity: input_datetime.test_date
name: read-only
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
{% endif %}
}
Short list of CSS variables available for “textfield” & “select” controls:
More examples here.
3 Likes
Both of my mods are affected:
type: entity
entity: sensor.date_time
name: Datum & Uhrzeit
icon: calendar-clock
card_mod: null
style: |
ha-card {
font-weight: bold;
}
type: entity
entity: sensor.abfallnaechster
icon: mdi:trash-can
name: Nächste Abfuhrtermin
card_mod: null
style: |
ha-card {
{% if is_state(config.entity, "Morgen") %}
color: orange;
{% elif is_state(config.entity, "Heute") %}
color: red;
font-weight: bold;
--mdc-icon-size: 50px;
{% endif %}
}
.header .icon {
{% if is_state(config.entity, "Morgen") %}
color: orange;
{% elif is_state(config.entity, "Heute") %}
color: red;
{% endif %}
}
First of all have a look here
card_mod: null
style: |
and do it as expected:
card_mod:
style: |
Tried it in the code editor, but “null” is automatically added after saving:
Because “style” keyword is wrongly indented.
I suggest you to specify this style to a particular element instead of the whole card (anyway currently it does not affect all elements, only some of them).
Check 1st post → link at the bottom → styles for Entity card.
BTW, your code works stable in my setup:
– replaced your sensor with some input_boolean;
– used a “if … else …” construction instead of your “if … elif …”.
Just in case - clean a browser’s cache, check if the latest card-mod is installed.
You rock, @Ildar_Gabdullin – thanks!
I went with your compact version for input_datetime.
I removed the align-self: end bit, because it seems to do something weird in my case, because the vertical alignment ends up misaligned. Doesn’t matter though, because it looks fine.
Here are the details nonetheless.
Without:
With:
My current code:
- type: entities
title: Schedule
show_header_toggle: false
entities:
- entity: input_datetime.wake_up_time
name: Wake-up Time
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: input_datetime.vacation_start
name: Vacation Start
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: input_datetime.vacation_end
name: Vacation End
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
- entity: binary_sensor.workday
name: Workday Today
- entity: binary_sensor.workday_tomorrow
name: Workday Tomorrow
There are 3 types of “input_datetime” - “datetime”, “date” & “time”.
That code is supposed to be used ONLY with “datetime” type - check this theme:
.mdc-text-field__input {
{% if config is defined %}
{% if config.entity is defined %}
{% if state_attr(config.entity,'has_time') %}
align-self: end;
{% endif %}
{% endif %}
{% endif %}
}
This post is dedicated to a “same height” issue only, it has a code for all three types - “date”, “time” & “datetime”. (initially I was going to describe everything in this post only but failed due to “not more than XXXX chars” limitation and then had to split it to 3 posts)
This post is dedicated to different modded looks for “datetime” type only; for “date” & “time” it will work with ONLY one exception for “align-self: end”.
Full list of styles - part 1, part 2.