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?
(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):
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.
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”.
- 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:
- 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.
- 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.
- 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):
- 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:
- 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.
- 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:
- 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:
- 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”).
- 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:
- 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.
- 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.
Styling an "input_datetime" row (part 2) (part 1 is here)
Styling “calendar” icon:
- 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:
- 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:
- 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:
- 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):
- 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.
- 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.
- 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.
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.
Thanks, I’ll have another good read through it all again tomorrow with a clear head. I see what you mean though.
Thanks for your help.
Changing the code (using .info .value instead of ha-card) didn’t improve the F5-reliability.
But I have figured out something. The card-mod documentation recommends to add the following snippet in configuration.yaml to improve the performance:
frontend:
extra_module_url:
- /config/www/community/lovelace-card-mod/card-mod.js
If I remove this code, everything works reliable, even on every F5 refresh.
I myself not sure about this “extra_module_url”; check this issue.
Also, you should probably create a new issue for your problem
And is this really your local path, where HA is able to find the js-file?
Hi,
I was wondering if it is possible to change the background of this page https://omatnaytot.hsl.fi/view?cont=I+s7VFLd12Bg6yHSQkWwAQ== using card-mod and webpage-card?
At least you should start with trying it by yourself and then post a code for your attempt.
IMHO this should NOT be possible with iframe due to security reasons.
Just want to thank you again. I implemented this now and it works perfectly for my needs.