Sorry, away from a PC, will be able to help on a week or two, ping me in a week please.
1 Like
With card-mod 4.0.0 you can set and select the panels to which you set any modifications.
Also, you can select the developer tools and other config dashboards specifically .
Either way would offer options for your requirements
Check what I posted several posts up using panel.viewUrlPath . In the new documentation youāll find all variables available to you
(repost to a more appropriate thread)
Hello, thank you for creating card mod, its mostly been going great for me. There is one thing, though, that Iām struggling to do with themes, and iāve been pulling my hair out trying to figure it out. For context, the HTML of the page looks like this:
<hui-sidebar-view>
<#shadow-root>
<div class="container ">
<div id="main">
<hui-card>
<hui-horizontal-stack-card>
<#shadow-root>
<div id="root" dir="ltr">
<hui-card>
<hui-vertical-stack-card>
...
</hui-vertical-stack-card>
</hui-card>
<hui-card>
<hui-vertical-stack-card>
...
</hui-vertical-stack-card>
</hui-card>
<hui-card>
<mod-card></mod-card>
</hui-card>
</div>
</#shadow-root>
</hui-horizontal-stack-card>
</hui-card>
</div>
<div id="sidebar">
<hui-card>
<hui-vertical-stack-card>
</hui-vertical-stack-card>
</hui-card>
</div>
</div>
</#shadow-root>
</hui-sidebar-view>
(and of course, <#shadow-root></#shadow-root> is not real and just represents a shadow root)
I am trying to apply styles to the hui-vertical-stack-card elements that are under the hui-horizontal-stack-card element. Let me preface this by saying that so far I have managed to successfully select the hui-horizontal-stack-card element using this configuration.yaml:
frontend:
themes:
mytheme:
primary-color: yellow
primary-text-color: white
primary-background-color: "#000000"
card-background-color: "#000000"
card-mod-theme: mytheme
card-mod-card: |
ha-card {
border-radius: 8px;
border: 1px solid grey;
}
card-mod-view-yaml: |
hui-sidebar-view$: |
.container #main hui-horizontal-stack-card {
border: 16px solid yellow !important;
}
I am just using that border style as a test to make sure itās working, and indeed when I use this theme the yellow border appears, and I can see the style applied to the element when I inspect the page
so I would think I could then go on and do what Iām trying to do like this:
...
card-mod-view-yaml: |
hui-sidebar-view$: |
.container #main hui-horizontal-stack-card$: |
hui-vertical-stack-card {
border: 16px solid yellow !important;
}
or maybe like this:
...
card-mod-view-yaml: |
hui-sidebar-view$: |
.container #main hui-horizontal-stack-card$: |
#root hui-card hui-vertical-stack-card {
border: 16px solid yellow !important;
}
but for some reason these do not work. After trying different variations and failing, I tried to simplify by just selecting the root directly underneath the hui-horizontal-stack-cardās shadow root like so:
card-mod-view-yaml: |
hui-sidebar-view$: |
.container #main hui-horizontal-stack-card$: |
#root {
border: 16px solid yellow !important;
}
and this also did not work. No yellow, and when I inspect the page, the styles were not applied.
Iām really not sure why selecting under the first shadow root is working, but using that same syntax for the second one is not working. I have tried every syntax variation I can find, read all the docs, banged my head against the wall, but Iām stumped. Any insights?
Extra note: in the other thread you noted that some of my pipes were placed incorrectly. I have seen different variations of the syntax in different places, but in the official themes wiki I look at this example here:
Google Light Theme:
# Header:
app-header-background-color: "#F8F8F8"
app-header-text-color: "#424242"
# Main Interface Colors
primary-color: "#5F9BEA"
light-primary-color: var(--primary-color)
primary-background-color: "#F8F8F8"
secondary-background-color: var(--primary-background-color)
divider-color: var(--primary-background-color)
# More stuff here that I cut out
card-mod-theme: "Google Light Theme"
# Header
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}
*/
/*More stuff I cut out*/
and I tried to match my syntax to that as closely as possible. Is it different somehow? Or is that not the syntax to use here?
Start with correcting misplaced āpipeā symbols as was suggested in the other thread.
In v4.0.0 beta (latest v4.0.0-beta.5) hui-horizontal-stack-card and hui-vertical-stack-card can be styled directly via card-mod-card(-yaml) theme variable. So your theme config will become directly
card-mod-card: |
ha-card {
border-radius: 8px;
border: 1px solid grey;
}
hui-vertical-stack-card {
border: 16px solid yellow !important;
}
As for the theming and yaml, check out the starting section of theme cookbook which explains this some more. Specifically not sure if .container #main hui-horizontal-stack-card$: | is correct. I did not test but tested the v4 thene as above.
card-mod-card: |
ha-card {
border-radius: 8px;
border: 1px solid grey;
}
hui-vertical-stack-card {
border: 16px solid yellow !important;
}
unfortunately after trying this and restarting, this did not work for me
Start with correcting misplaced āpipeā symbols as was suggested in the other thread.
Did you miss the bottom of the comment (it was not in the original post)? I was saying I tried to follow the syntax in the doc, so i wasnt sure what exactly made that pipe misplaced. Though I probably asked in a way that was overly verbose 
I think its clear that i have some fundamental misunderstanding of the syntax for themes, so i spent some hours going back over everything again. And after jumping between readmes and forum posts and wikis and github issues, I think my understanding is a little better now. I figured this should work:
card-mod-view-yaml: |
hui-sidebar-view $ .container #main hui-horizontal-stack-card $: |
#root {
border: 16px solid yellow !important;
}
but it didnt. so i tried wrapping it in quotes like so:
card-mod-view-yaml: |
"hui-sidebar-view $ .container #main hui-horizontal-stack-card $": |
#root {
border: 16px solid yellow !important;
}
and it worked! Thanks all, I appreciate your helping me in your spare time
1 Like
For those with similar issues where things may be 50/50 i realized i could just use both methods in my theme settings and it got me back to 100%
ex:
card-mod-card: |
ha-card.x-ui {
border-style: none
background-color: var(--primary-background-color);
box-shadow: var(--my-card-shadow);
}
:host(.x-ui) ha-card {
border-style: none
background-color: var(--primary-background-color);
box-shadow: var(--my-card-shadow);
}
1 Like
Good point. I will update the Breaking change issue with this note. Thanks.
1 Like
How can i change the slider height to 20 px for all hui-tile-cards in my theme.
This is what inspector shows me. The height is in control-slider-thickness defined in variable --feature-height
I was told by @dcapslock in
- Hide (empty) calendar sidebar Ā· Issue #1091 Ā· thomasloven/hass-browser_mod Ā· GitHub and
- Allow custom css per user/browser Ā· Issue #1092 Ā· thomasloven/hass-browser_mod Ā· GitHub
that i am able to inject css/hide elements on homeassistant internal/non-customizable pages like
via card-mod now
A explanation of where i can find the input field to enter that css would be appreciated
(I need the element ONLY be hidden for a specific user/browser)
(i am on card-mod v4.0.0-beta.4 and hass core-2025.10.4)
Hi,
Yes, not a Browser Mod feature. It can be card-mod. I was of the thought Calendar is a config panel but it is not so v4 does not yet support.
I suggest you put in a feature request to card-mod to support the Calender panel. It can be supported like Developer Tools, but will need to be added in a future release.
Thanks
Darryn
Are you saying both variants work in 4.0?
The first code is using in 3.x to address a ha-card with āx-uiā class.
Earlier we were told that in 4.0 this method stops working and we should use the second method.
@dcapslock can you clarify?
bit surprised about what youre saying there, to my understanding, 4.0.0 uses
card-mod-card-yaml: |
.: |
:host(.class-header-icon) ha-card .card-header .icon {
padding-left: 0;
padding-right: 4px;
/* color: pink; */
}
:host(.class-header-margin-no-color) ha-card .card-header {
font-weight: 400;
font-size: 20px;
padding: 4px 12px;
margin: 0 0 16px 0px;
}
where before this was used:
card-mod-card-yaml: |
.: |
ha-card.class-header-icon) .card-header .icon {
padding-left: 0;
padding-right: 4px;
/* color: pink; */
}
ha-card(.class-header-margin-no-color) .card-header {
font-weight: 400;
font-size: 20px;
padding: 4px 12px;
margin: 0 0 16px 0px;
}
But, testing this again, I just found that we can also take that ha-card out completely:
card-mod-card-yaml: |
.: |
:host(.class-header-icon) .card-header .icon {
padding-left: 0;
padding-right: 4px;
/* color: pink; */
}
:host(.class-header-margin-no-color) .card-header {
font-weight: 400;
font-size: 20px;
padding: 4px 12px;
margin: 0 0 16px 0px;
}
which makes that even shorter
not sure what 50/50 scenario you are referring to, but seems that should not be necessary at all?
The thing is that if a class is added to āha-cardā (for simplicity - added by HA, not by a user or card-mod, check standard classes for history-graph, entities card, ā¦), then a notation āhost(.some-class) ha-cardā cannot be correct, not to mention that āha-card.some-classā and āhost(.some-class) ha-cardā cannot give same.
So, I am confused.
Both may be needed for different reasons. v4 doco now includes application information I included in the forum on where v4 does application. lovelace-card-mod/README-application.md at v4.0 Ā· thomasloven/lovelace-card-mod Ā· GitHub
For cards contained in hui-card with class set in card-mod config, style via :host is required as any application via ha-card is not done as application via hui-card is preferred.
:host(.x-ui) ha-card {
border-style: none
background-color: var(--primary-background-color);
box-shadow: var(--my-card-shadow);
}
For custom cards not using hui-card and perhaps some edge case not known where ha-card is not in the place expected when under hui-card, card-mod will be applied on ha-card including application of class to ha-card. So in this case the below is used.
ha-card.x-ui {
border-style: none
background-color: var(--primary-background-color);
box-shadow: var(--my-card-shadow);
}
So if a user wishes to style both standard Frontend cards and custom cards using the same class, having both is valid.
EDIT: I the doco I have specific examples with other methods of styling.
We usually refer to styling ha-card as often we use CSS vars. However, specifying child classes directly will work unless then are in a shadowRoot.
1 Like
I am away from a PC, cannot attach a screenshot. With a standard card like Entities card, a Code Inspector shows a class like ātype-entitiesā assigned to ha-card. And this stock card has āhui-cardā.
So, addressing with āha-card.type-entitiesā seems to be correct? And using a syntax like āhost(.x-ui) ha-cardā is rather strange here, imho, since the class belongs to ha-card, not to some upper element before ha-card.
You are correct with a class applied to ha-card. When patching via hui-card the class is applied to the card (e.g. tile card), which is the difference. v4 applies the class this way for cards contained in hui-cards as it is the known element and card-mod does not need to wait for, nor assume, ha-card.
Sorry, what do you mean here? What is the āpatchingā?
Which I learned right out of the gate with the new version 
1 Like