Whoooa amazing!!! You are a true Hero! It works perfectly 
Now, as i want to learn it, im gonna go through all Lines and check all of them for their function… Thank you so much again, highly appreciate your help! 
1 Like
I don’t fancy the date and time picker changes from a few releases ago: They’re too high for my taste, so I’m trying to change it. I don’t know if there are theme variables for this (I failed to find any), so I’ve been experimenting with card mod.
I can’t figure out the CSS selector chain to achieve this. I even forced some changes by using the * selector for all elements and setting some property values with !important just to get some kind of effect for testing purposes. I went through the CSS selector docs and combinator docs to see if there’s anything I could use.
I don’t think what I want to do is possible, but perhaps someone here knows (could find anything on the large card mod threads either) how to achieve this.
Here is a screenshot with the styles applied manually. The hour and minute elements must be styled separately from the AM/PM picker: I couldn’t get a parent element styled to do both in one go.
My card config, with one of many variations that I’ve tried:
- type: entities
title: Schedule
show_header_toggle: false
entities:
- entity: input_datetime.wake_up_time
name: Wake-up Time
card_mod:
style:
hui-input-datetime-entity-row:
$:
hui-generic-entity-row:
ha-time-input:
$:
ha-base-time-input:
$: |
.value {
height: 3em
}
- entity: input_datetime.vacation_start
name: Vacation Start
- entity: input_datetime.vacation_end
name: Vacation End
- entity: binary_sensor.workday
name: Workday Today
- entity: binary_sensor.workday_tomorrow
name: Workday Tomorrow
Hi guys,
I am using dwains dashboard v3 and the cyberpunk 2077 theme.
It looks great together but dwains area cards are not labeled as ha-card.
They only have a div class and I can’t find out how to apply this to other “cards”.
This is html
Card mod should be added at <div class=“flex justify-between h-44 p-3 area-button” … >
An this is the yaml code which is added right now. ha-card should be changed to .area-button.
But just this isn’t doing it. I think I am missing something. maybe a class before the area button.
card-mod-card: |
ha-card {
border-radius: 1px;
clip-path: polygon(
0% 0%,
40px 0%,
45px 4px,
100% 4px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0% 100%
);
}
I am thankful for any help!
I’m pretty sure this isn’t correct for starters, or at least it doesn’t look like anything I’ve done with card-mod. But I don’t use Dwain’s Dashboard, so I might be completely off the mark here. Or maybe you are using a very old version of the card?
Check the card-mod documentation, but I would expect it to start like this:
card_mod:
style: |
...<etc>
EDIT: on second thoughts, you might be trying to follow the guidance on styling cards without an <ha-card> element. But even that would look something like this (shamelessly copied from the documentation):
type: custom:mod-card
card:
type: vertical-stack # for example
...
card_mod:
style: |
...<etc>
Do not think it’s required.
The OP should find out how to style these Area cards first, then he could add the code into theme’s file - if he really needs it.
Yes it’s a theme. The code I put in my text is from cyberpunk theme. https://github.com/flejz/hass-cyberpunk-2077-theme
And this works for all ha-card elements.
When I try to add the same code on .area-button in developer tools it works. But I don’t get it to work when I change the theme yaml file. Thatswhy I posted here.
I need assistance with putting this code into the theme file.
card-mod-card: |
.area-button {
border-radius: 1px;
clip-path: polygon(
0% 0%,
40px 0%,
45px 4px,
100% 4px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0% 100%
);
}
This is what I tried but I did nothing for me.
Already told you:
Place your card on some view, then try to style it with a default theme first.
OK once again. I want to style some cards of dwains dashboard. Dwains Lovelace Dashboard | An fully auto generating Home Assistant UI dashboard for desktop, tablet and mobile by Dwains for desktop, tablet, mobile
I can’t place the card anywhere because its an auto generating dashboard which generates these area cards from home assistant areas.
I already know the styling and it worked from google chrome developer tools. but I don’t know how to do it with card mod.
When I add this code
card-mod-card: |
.area-button {
border-radius: 1px;
clip-path: polygon(
0% 0%,
40px 0%,
45px 4px,
100% 4px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0% 100%
);
}
to chrome dev tools the cards have a different look. But when I add this code into my theme file nothing happens. I tried different syntax to show anything from card mod theme but nothing worked for me so I’m here for help.
I want the code above to be in "<card-mod slot=“none” but for now there is no card mod slot on these area cards. So how Im gonna add this card mod slot?
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)
4 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):
3 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?
