If you are still interested - styling height for MDC input helpers.
1 Like
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.
Oh, great)) sharing goodness & knowledge is one of best activities)))
1 Like
Is it possible to change secondary info to whatever I want it to say with Card-Mod? instead of being restricted to name, state, last updated, etc.
–secondary-text-name for example. is there coding to be able to do this?
Does anyone know how to use the visibility and before/after CSS to replace information on a card?
Im tryign to change secondary info to say something custom on a mushroom light card
.text span {
visibility:hidden;
}
.text:before {
content: 'after';
}
1st post → link at the bottom → link to “after/before”
It does not have examples for mushrooms but might give you ideas.
Just for a light card in general.
. The secondary information is limited to a few choices, and I jsut want it to alwsy say a custom word. Can you tell me how or if I can do that using this?
I just started using Card-mod and I’m verry happy with it.
Now i come to a situation, where I stuck in the middle of nowhere:
In the picture you can see the green padding-top and padding bottom. I try to modify the padding-bottom.
But whatever I put in the code, it has no effect. Here is my code:
`
`
type: custom:atomic-calendar-revive
style: |
ha-card {
background: none;
box-shadow: none;
}
div.headerName {
letter-spacing: 0.112em !important;
box-shadow: none;
font-size: 2.55em;
}
div.headerDate {
letter-spacing: 0.1em !important;
box-shadow: none;
font-size: 5.55em;
line-height: 1.2;
font-weight: bold;
}
div.cal-eventContainer {
letter-spacing: 0.1em !important;
box-shadow: none;
font-weight: normal;
font-size: 2.55em;
letter-spacing: 0.02em !important;
line-height: 1.2;
padding-bottom: 0px;
}
# the following code is not working
ha-card:
$:
div:
$:
table:
$:
tbody:
$:
tr:
$:
td {
padding-bottom: 100px;
}
``
I tried with the card-mod-helper as well:
"#view>hui-view>hui-panel-view$hui-vertical-stack-card$#root>atomic-calendar-revive$ha-card>div>table>tbody>tr:nth-child(1)>td:nth-child(2)"
But no success.
Any ideas? Thanks!
Styling statistics-graph card
What is changed:
- Header: text’s color, font-size, padding-bottom.
- Legend: margin-top, text’s color, font-size, bullets’ color.
- Card’s background.
- type: statistics-graph
chart_type: line
period: 5minute
days_to_show: 90
stat_types:
- mean
- min
- max
entities:
- sensor.xiaomi_cg_1_temperature
title: Statistics
card_mod:
style:
$: |
.card-header {
color: red !important;
font-size: 38px !important;
padding-bottom: 0px !important;
}
.content statistics-chart $ ha-chart-base $: |
.chartLegend li:nth-child(1) .label {
color: red;
font-size: 8px;
}
.chartLegend li:nth-child(1) .bullet {
background-color: yellow !important;
height: 8px;
width: 8px;
}
.chartLegend li:nth-child(2) .label {
color: white;
font-size: 12px;
}
.chartLegend li:nth-child(2) .bullet {
background-color: green !important;
height: 12px;
width: 12px;
}
.chartLegend li:nth-child(3) .label {
color: orange;
font-size: 18px;
}
.chartLegend li:nth-child(3) .bullet {
background-color: magenta !important;
height: 18px;
width: 18px;
}
.chartLegend ul {
margin-top: 0px !important;
}
.: |
ha-card {
background-color: lightgreen;
}
How to hide a legend (not needed since hide_legend option was added):
chart_type: line
period: 5minute
days_to_show: 90
type: statistics-graph
entities:
- sensor.xiaomi_cg_1_temperature
stat_types:
- mean
- min
- max
title: Statistics
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend {
display: none;
}
More examples are described here.
Assuming your pasted code has come out faithfully, I’m not sure your indentation is 100% correct. You should also be using the card_mod key as standard practice by now.
However, it seems that this particular setting needs the !important rule to make it stick. Try this to see if it works for you:
type: custom:atomic-calendar-revive
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
div.headerName {
letter-spacing: 0.112em !important;
box-shadow: none;
font-size: 2.55em;
}
div.headerDate {
letter-spacing: 0.1em !important;
box-shadow: none;
font-size: 5.55em;
line-height: 1.2;
font-weight: bold;
}
div.cal-eventContainer {
letter-spacing: 0.1em !important;
box-shadow: none;
font-weight: normal;
font-size: 2.55em;
letter-spacing: 0.02em !important;
line-height: 1.2;
padding-bottom: 0px !important;
}
div.cal-eventContainer table tbody tr td {
padding-top: 10px !important;
}
Thanks a lot! Now its working!
1 Like