Try to add a version number to the layout-card resource.
- url: /hacsfiles/lovelace-layout-card/layout-card.js?v=2
type: module
Update: resetting the cache once again AND force stopping the app before fixed it. Red screen gone, Lovelace GUI back to normal.
I recently came across a post where users show what kinds of entities their setup consists of. I found this interesting, especially that you can just group on the state object without the need to go to the DB. The markdown table is neat but I wanted something that looked prettier. Card-mod to the rescue! Iām using theme variables where possible.
- type: markdown
content: >
Domain | Count
:---|---:
{% for domain in states | groupby('domain') %}
{% set name = domain[0].replace('_', ' ') | title %}
**{{ name }}** | {{ states[domain[0]] | count }}
{# leave blank line below otherwise table won't render #}
{% endfor %}
**Total** | {{ states | count }}
card_mod:
style:
ha-markdown:
$:
ha-markdown-element: |
table {
border-spacing: 0;
width: 100%;
padding: 8px;
border-radius: var(--ha-card-border-radius);
}
th {
background-color: var(--state-icon-color);
color: white;
padding: 4px;
}
th:first-child {
border-top-left-radius: var(--ha-card-border-radius);
}
th:last-child {
border-top-right-radius: var(--ha-card-border-radius);
}
td {
padding: 4px;
}
tr:nth-child(even) {
background-color: var(--table-row-background-color);
}
Improvements on my use of CSS here are welcome.
6 Likes
Anyone able to change the tab icon size on the header, please?
I tried the below, without any success:
card-mod-root-yaml: |
.: |
ha-svg-icon {
height: 32px !important;
width: 32px !important;
}
Edit:
Managed this way:
card-mod-root-yaml: |
.: |
ha-tabs {
--mdc-icon-size: 28px;
}
Trying to figure out how to adding padding-right to slider-entity-row element in a horizontal-stack:
- type: conditional
conditions:
- entity: media_player.htd_outside_couch
state: "on"
card:
type: horizontal-stack
cards:
- type: entities
style: |
ha-card {margin-top: -15px; }
entities:
- type: custom:multiple-entity-row
style:
hui-generic-entity-row:
$: |
state-badge { display: none !important; }
entity: media_player.htd_outside_couch
show_state: false
secondary_info:
attribute: source
- type: custom:slider-entity-row
entity: media_player.htd_outside_couch
full_row: true
style:
slider-entity-row:
$: |
span { padding-right: 25px !important; }
What I have above isnāt working w/ the span { padding-rightā¦}
Developer View:
This is probably not card-mod related but is it possible to use an node anchor and override/merge some values of the anchor or pass a variable to the anchor?
Something like that one below?
style:
.: |
ha-card {
background:
{% set temp = states('entity.state') | float %}
{% if 0 < temp < 24 %}
linear-gradient(var(--card-temperature-cold), var(--sidebar-background-color));
{% elif 24 <= temp < 26 %}
linear-gradient(var(--sidebar-background-color), var(--sidebar-background-color));
{% elif 26 <= temp < 28 %}
linear-gradient(var(--card-temperature-warm), var(--sidebar-background-color));
{% elif temp >= 28 %}
linear-gradient(var(--card-temperature-hot), var(--sidebar-background-color));
{% else %}
Off
{% endif %};
}
<< : *room_card
and the anchor is something like the following
room_card:
style: &room_card
.: |
ha-card {
margin: -5px 14px 25px 14px;
padding: 0px !important;
}
Any ideas if this is possible?
Thatās a problem with the YAML spec itself.
Thereās one feature Iāve been missing since custom-header was deprecated. I would like to change the lovelace tab icons depending on a jinja template. I have spent hours looking for a code sample and trying to achieve it myself, but with no luck. Is it possible with card-mod themes? Has anyone done it and can share a code snippet? Thanks!
Does anyone know how to remove the margin from #root within a grid layout? Iāve tried injecting card-mod in multiple areas/ways and I canāt seem to target this.
Iām getting 4px left/right which isnāt particularly noticeable on desktop but when shrunk to mobile it is.
Any help would be awesome!
Thanks
Check some of the example themes on the wiki and see if any target it, and donāt forget !important.
1 Like
Hey guys, I made a site to help with card-mod selectors, mainly for themes but can be used to understand the structure of cards too 
https://matt8707.github.io/card-mod-helper/
12 Likes
Iām trying to edit grid-card titles by using card-mod in theme.yaml. So far I tried this:
card-mod-view-yaml: |
"#view>hui-view>hui-panel-view$hui-vertical-stack-card$#root>layout-card$grid-layout$#root>auto-entities>hui-grid-card$h1": |
.card-header {
color: var(--ha-card-header-color, --primary-text-color);
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
font-weight: normal;
margin-block: 0px;
letter-spacing: -0.012em;
line-height: 32px;
display: block;
padding: 0px 0px 0px !important;
}
For now I changed the padding only. I notice is half works. The styles only show it when I change tabs and then go back to the tab where the grid-card is. So on opening the tab for the first time there is no change, than opening a different tab and going back shows the style from theme. Am I doing something wrong or is this a card_mod bug?
Iām trying to hide the header after Kiosk mode no longer works on my older generation ipad on 2021.6. Seems pretty straightforward, but cannot get it to work. I added this to my theme:
card-mod-theme: neon
#Header
card-mod-root: |
app-header {
display: none;
}
Iāve cleared the cache, restarted HA, and tried the reload theme service all without any luckā¦ Also tried card-mod-root-yaml:
UPDATE: Switching the theme and then switching back seems to have done the trickā¦
Hi, after the last updates of HA, the styles for the more-info dialogs do not work as they used to.
card-mod-more-info-yaml: |
only applies to the browser modās popups and not to lovelaceās more-info dialogs.
Any ideas will be appreciated, thanks
2 Likes
Guys what code do you use to hide the sidebar? Iāve tried everything I could but still nothingā¦
Card-mod only works on <ha-card> tags.
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g.
conditional,entity_filter,vertical-stack,horizontal-stack,grid.
Thereās an option for that on your profile. Just click on the icon with your initials in the sidebar, youāll find it there.
Wondering if anyone can help me with my theme, as I cannot for the life of me get it to apply a text style.
Below is my structure, and I am wanting to apply a style to the h1 tag inside of the shadow-root inside the hui-grid-card
In my themes.yaml I am using the card-mod-view-yaml option like so:
card-mod-view-yaml: >
"grid-layout$":
hui-grid-card:
$: |
h1 {
line-height: 0 !important;
padding: 1vw 0 0vw 0 !important;
font-weight: 500 !important;
color: red !important;
}
From what I can tell, this should be working:
card-mod-view-yaml styles inside of hui-view
grid-layout$ styles inside of the grid-layout shadow-root
hui-grid-card goes into the hui-grid-card
$: goes into the first shadow-root
h1 applies the style to the h1 tag
Clearly though this isnāt working as you can see that āOfficeā below has left padding, normal font-weight and is not red. The card-header class is applied by the layout-card, however my styles arenāt even being applied, let alone being overridden (which shouldnāt matter due to !important)
Have you used this link (a few posts above you) by any chance? š¹ Card-mod - Super-charge your themes! - #846 by Mattias_Persson
I used that once and got the exact code line which worked moddig titles of a grid card (tho it had some other issues) the code itself was proven correct.
Iām not entirely sure how to translate the result to the structure in YAML as I want it for all the H1 tags in that format. I think itās correct
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > hui-grid-card:nth-child(2)").shadowRoot.querySelector("h1")
to
"#view>hui-view>grid-layout$#root>hui-grid-card:nth-child(2)$h1"
to this
card-mod-view-yaml: >
"grid-layout$":
hui-grid-card:
$: |
h1 {
line-height: 0 !important;
padding: 1vw 0 0vw 0 !important;
font-weight: 500 !important;
color: red !important;
}
Interestingly though, Iām actually modifying @Mattias_Persson theme and having the issue. Perhaps Iāve misunderstood how the themeing works, but if I do this instead, it works:
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
min-height: 100vh;
}
grid-layout:
$: |
#root {
margin: 0 !important;
}
"grid-layout$":
hui-grid-card:
$: |
h1 {
line-height: 0 !important;
padding: 1vw 0 0vw 0 !important;
font-weight: 500 !important;
color: red !important;
}
The actual grid-layout element is the same, the only difference is the configuration above it, and its not nested so im unsure as to why this would make it work 