Yeah, those examples are great, and very helpful, those are the ones i used to get to my first version of the code. postet above. Thanks for putting in the work.
ā¦and you should not use a code for a āxxx-cardā to style a āyyy-cardā.
These cards may have different structure, different CSS properties.
What you can do with some new card is - using Code Inspector, try to use methods which you learned with other cards.
Hello!
I found a lot of good solutions here. I have a problem that I couldnāt figure out. I want to hide this entire column.
I can hide the cards separately by entity status, but I canāt hide the VERTICAL-STACK at the same time.
Please help!
having successfully added scrollbars to many different cards, I now am confronted with a history-graph card and cant make it happenā¦
trying to do:
type: history-graph
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 8px -16px 0px -16px;
}
ha-chart-base canvas {
max-height: 400px;
overflow-y: scroll;
}
but the path to the canvas isnt correct . Ive also tested:
ha-chart-base {
chart-max-height: 400px;
overflow-y: scroll;
}
but no such luck.
Could you please have a look with me where I go wrong? thanks!
btw, tis is part of a bigger panel view, replacing the now deprecated History panel āallā entities
- title: History auto
path: history-auto
icon: mdi:history
panel: true
cards:
- type: entities
title: History include all domains
entities:
- entity: input_number.history_span
- type: custom:config-template-card
entities:
- input_number.history_span
variables:
span: states['input_number.history_span'].state
card:
type: custom:auto-entities
card:
type: history-graph
hours_to_show: ${span}
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 8px -16px 0px -16px;
}
.chartContainer {
max-height: 400px;
overflow-y: scroll;
}
filter:
include:
- domain: "*"
btw, a workaround: using an extra entities card inside the entities card and set the scroll on that section with:
- type: entities
title: History include all domains
entities:
- entity: input_number.history_span
- type: custom:hui-element
card_type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-content {
max-height: 700px;
overflow-y: scroll;
}
entities:
- type: custom:config-template-card
entities:
- input_number.history_span
variables:
span: states['input_number.history_span'].state
card:
type: custom:auto-entities
card:
type: history-graph
hours_to_show: ${span}
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 8px -16px 0px -16px;
}
filter:
include:
- domain: "*"
works ok. Would still love to be able to scroll the history-graph itselfā¦
What you are trying to do is adding a scrollbar to an each graph:
code
type: history-graph
entities:
- entity: sun.sun
- entity: sensor.mijia_300_1_co2
- entity: sensor.ac66u_snmp_24_temp
- entity: sensor.disk_use_percent
- entity: sensor.ac66u_nvram_total
- entity: sensor.xiaomi_cg_1_tvoc
card_mod:
style: |
.content {
max-height: 550px;
overflow-y: scroll;
}
instead of more reasonable adding a scrollbar to the whole stack of graphs:
code
type: history-graph
entities:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.xiaomi_cg_1_tvoc
- entity: sensor.xiaomi_cg_2_tvoc
card_mod:
style:
state-history-charts $:
.entry-container:
state-history-chart-line $ ha-chart-base $: |
.chartContainer {
color: red;
max-height: 150px;
overflow-y: scroll !important;
}
yes, thats what the solution I posted does. its just that I would have wished for a card config without the extra entities card embedded:
Does anyone know of a way to add a class to an element so that the style info can go in the theme?
Specifically, I use two different styles for Paper Buttons Row buttons. Iād like to have the default style, then have a CSS entry for āpaper-button.button-with-backgroundā and then add the class ābutton-with-backgroundā to only the buttons/rows that I want to style that way.
Check āclassā in card-mod-themes.
Hi all, Iām trying to get markdown table to take up the full width of the markdown card.
The table is inside an ha-markdown-element - that is full width. If I manually add width: 100% to the table using element styles in developer tools it works.
I canāt for the life of me work out how to do it with card_mod. Iāve tried a lot of things including the code below.
Can anyone help?
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 50px;
}
ha-markdown:
$: |
ha-markdown-element:first-of-type table {
width: 100% !important;
}
Without test: Fix the indention. ha-markdown has to be same as.:
And secondly first try as open as you can, without the first-something, etc.
Hi Ildar,
another use-case came up where this card would be a perfect (only one I know currently) solution. For this I need to style the card (it already offers a buttonStyle
option to apply CSS to the header/button of the card).
I want the background
to be the same as the default HA theme color. So
- white during the day (light mode) - already works out of the box
- grey during the night (dark mode) - here unfortunately a full black is used. Here you can see the difference:
It should instead be grey as the default card background (see lower part of the screenshot).
ā Is: #111111
ā Should: #1c1c1c (only when dark mode of HA theme is active)
I applied background: default;
but it changes nothing.
- Do I need to add some āif dark mode is active, use #1c1c1c as backgroundā logic magic maybe?
ā Update: I found your great post for dynamic dark/light mode CSS application here. Now I need to know how to address the collapsable-card sectionā¦ -
Attempt for quick solution:
Or can I use something likebackground-color: var(--divider-color)
but instead of--divider-color
or--accent-color
(the only ones I know) there is one I am looking for? What other āāxxxxx-colorā options do exist?
Would you mind having a look at this card (https://github.com/RossMcMillan92/lovelace-collapsable-cards)?
Thanks, Iāve fixed the indentation and tried without the first-of-type and still doesnāt work. Iāve also tried the slightly different structure from this post and nothing.
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 50px;
}
ha-markdown:
$:
ha-markdown-element: |
table {
width: 100% important!;
}
card_mod:
style:
ha-markdown:
$: |
ha-markdown-element table {
width: 50% !important;
}
is working here as expected.
great, thanks.
I think that woks here but am getting odd results with my browser. When I refresh the page itās not right. Then I press edit dashboard and it works, press done and it continues to work until I refresh the page. Maybe some weird caching thing going on.
works as expected on another device - so must be a browser issue
@e-raser Hi!
Post here a working code w/o using a ādark mode supportā to specify a custom background to the header.
Then weāll try to enhance it with a ādark mode supportā.
Also, I see here an issue with this card - not all itās elements follow ādark modeā. Probabaly you should register an issue for this card.
Installed Card Mod with HACS, added this to configuration
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
When I enter this in Studio Code Server, I get Property card_mod not allowed
- type: entities
entities:
- entity: switch.garage_soffit
card_mod:
style: |
:host {
color: red;
}
Doesnāt it let you using card_mod?
Did you actually find a way of doing this?
Im trying to replace the sidebar card from HACS cos it doesnt work in 2022.7