Huhā¦ a lot of explanationā¦ i donāt understand 100%, but i understand basics ā¦ iāll do some checking and testingā¦ thanks!
So, if i understand correctly: extra_urlā¦ didnāt cause my error message? Funny thing: when i saw that message i immediately did clear cache and restarterd HA but error popped up again. It went away after i removed extra_url, restarted HA and cleared cache again.
Why then it popped up in the first place? And there were 6 of them (for each of my wall tablets).
Two things here.
Yes.
As per earlier response.
Tip: As per readme if you use extra_module_url and dashboard resource url then make sure to update extra_module_url when you update card_mod, then restart Home Assistant.
Well, since iām not a ārealā programmer i admit that iām a bit lost here now with all these new termsā¦ i guess i donāt use CAST devices (donāt have google cast or similar)ā¦ all my dashboards are standard ālovelace dashboardsā, created via UI, and i do use HACS, i always install all from HACS, never manually, so resources are definitely stated there.
So i guess iāll leave as is at this point, since at this moment it appears that all is working. if i find something not working iāll deal with thatā¦
Thanks for your time and work!!!
Heyā¦i see thereās new āClear Home Assistant Frontend application cacheā function available in this version! Great work, thanks, it will come extremely handy!
A (not so important) question, though: can this action be triggered from one device for another device, or for more of them at once (say with a script) or itās doable just on device i tap on the button?
What I mean: i have multiple tablets across my home, which are pretty much locked (for convenience, not against users). I use fully kiosk on them and when i want to CC i use rest commands to remotely clear cache on all of them with a single script. This way i donāt have to wonder around a house and do CC on one-by-one. Would a similar be possible with this new function?
No, card-mod action can only be run by fire-dom-event as card-mod is all Frontend with no service integreations. However, Browser Mod refresh service can do what you wish.
Pre 2026.2.0 I was setting summery and area cards borders separately using the below configuration and then assigning the classes to their respective card types.
card-mod-card-yaml: |
.: |
:host(.summary-card-style) div.background {
border-radius: 50%;
}
:host(.area-card-style) div.background {
border-radius: 30px 30px 30px 15px;
border-color: rgba(255, 255, 255, 0.1);
border-style: solid;
}
As of 2026.2.0 this no longer works due to the background of tile cards getting nested inside a <ha-tile-container> > #shadow-root. I figured out how to access the background with the below configuration, but I can not for the life of me figure out how to assign a class to itā¦ is it even possible? The card mod theme wiki doesnāt seem to cover class assignments to shadowDOM navigation.
card-mod-card-yaml: |
ha-tile-container $: |
div.background {
border-radius: 30px 30px 30px 15px;
border-color: rgba(255, 255, 255, 0.1);
border-style: solid;
}
I appreciate any insight into this, thanks.
Itās not possible to assign a class with a style. This is only possible for config of the card.
What you can try is to assign CSS vars in your :host(.summary-card-style) rule and then use those vars in div.background in your config for ha-tile-container $:.
Iām confused by this as it seems to suggest that my first example wouldnāt work, yet it does. Am I misunderstanding you? Elsewise Iāll play around with your suggestionā¦ if I understand it correctly that is.
Eureka! Thanks @dcapslock for the pointers. The tricky part with these 2 cards is that they are for the most part identical, so how do you get 2 different borders into a shadowroot where the navigation is identical? Variable fallbacks.
card-mod-card-yaml: |
ha-tile-container $: |
div.background {
border-style: var(--summary-border-style, var(--area-border-style));
border-color: var(--summary-border-color, var(--area-border-color));
border-radius: var(--summary-border-radius, var(--area-border-radius));
}
.: |
:host(.area-card-style) {
--area-border-color: rgba(255, 255, 255, 0.1);
--area-border-style: solid;
--area-border-radius: 30px 30px 30px 15px;
}
:host(.summary-card-style) {
--summary-border-color: rgb(0, 0, 255);
--summary-border-style: solid;
--summary-border-radius: 50%;
}
somehow the backdrop filter is behaving erratically recently, suspect it was introduced in the new HA 2026.x release, but not sure
Could anyone here using Safari on a Mac confirm?
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px) !important;
-webkit-backdrop-filter: blur(17px) !important;
}
It seems to not happen in Chrome, and its a bit hard to see in the sceenvid (real view is way more expressive), but thereās a certain kaleidoscopic effect on the elements, where before, a calm and clean blur was rendered only
as a fyi for this thread, we can now use a theme variable directly to make the backdrop happen,
so I commented this
# don't use this, (kaleidoscope effect!) but use
# ha-dialog-scrim-backdrop-filter: blur(17px) in regular theme
# $: |
# .mdc-dialog {
# /*backdrop-filter: blur(17px) !important;
# -webkit-backdrop-filter: blur(17px) !important;*/
# }
and use a straightforward regular theme setting.
All kaleidoscoping is gone.
new feature was introduced in the latest 2026.2 change
A ::before element was introduced so we now can just use --ha-dialog-scrim-backdrop-filter, so either ha-dialog-scrim-backdrop-filter in theme or --ha-dialog-scrim-backdrop-filter in specific card-mod via theme.
thanks @dcapslock for pointing me to the PR
From your description I assumed you meant something like this:
my-theme:
--ha-dialog-scrim-backdrop-filter: blur(50px)
But that is now working for me, does it still need to be under a card-mod-theme key then?
Disclaimer: blur(50px) is extreme and only used to ensure Iām seeing a difference.
Take out those 2 ā in front of the ha for use in a regular theme.
I have noticed some errors in Chrome console:
You are doing it wrong!
card-mod.js?v4.0.0:1 mod-card should NEVER be used with a card that already has a ha-card element, such as tile
Looking at my code base, I use mod-card with picture element card, vertical-stack and tile card. Am I in trouble? Iām not very good at UI customization and Iām just afraid of changing things that are already working.
I always paste this card-mod code under my card code to apply a custom look. How can I apply this to all my cards so I donāt need to paste it under every new card? I saw something about your own theme and card mod but donāt understand it. This is the code:
card_mod:
style: |
ha-card {
background: none;
border-radius: 28px;
overflow: hidden;
backdrop-filter:
blur(3px)
saturate(120%)
url("#liquid-glass-filter");
-webkit-backdrop-filter:
blur(3px)
saturate(120%)
url("#liquid-glass-filter");
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.35),
inset 0 2px 4px rgba(0,0,0,0.15),
0 2px 6px rgba(0,0,0,0.45);
}
Still no joy 
Show us what you did
I did thisā¦
stephard-view-800x1340-3and2:
ha-view-sections-column-max-width: 300px #default 500px
ha-view-sections-column-min-width: 200px #default 320px
ha-view-sections-column-gap: 16px #default 32px
ha-view-sections-row-gap: 8px
ha-section-grid-column-gap: 8px
ha-section-grid-row-gap: 4px #default 8px
ha-dialog-scrim-backdrop-filter: blur(50px)
card-mod-theme: stephard-view-800x1340-3and2
# etc...
Yeah that should do it.
( you did reload themes did you ā¦.?)
And update to 2026.2.x
And take out any setting from card-mod theme below that
To be sure , make a new theme with only that backdrop and test it
Over my cold dead body LOL.
That was the question I needed, thought about it and suddenly realised that this is a dashboard/view specific theme that Iāve bee adding it to and browser-mod popups are not subject to that. Moved it to my general theme and it works a charm, thanks for hanging in there with me.