You should have asked in the main card-mod thread, this one is for themes. And that thread has examples for tabbed-card.
Same remark as above.
I want to apply it globally though?
Then first solve it for ONE card, then start making it global.
It works for fine ‘ONE’ card, the code is directly pasted from the page you mentioned:
Anyhow, I’ll figure it out myself.
I have not mentioned mushroom thread, I mentioned card-mod thread. And the code definitely has a syntax error (missing pipe) and cannot work even for one card.
and again I am stuck… consider:
card-mod-view-yaml: |
:first-child $:
hui-view-header:
$: |
.layout {
gap: 8px !important;
--spacing: 8px !important;
}
.badges.scroll {
mask-image: linear-gradient(
90deg,
transparent 0%,
black 1.5%,
black 98.5%,
transparent 100%
) !important;
}
which adjusts the gap within the Header between the markdown card and badges I use. Also this softens the mask-image a bit, as it is too fuzzy for me in HA default theme.
I now want to also remove the badge-padding from the hui-view-header (I just dont like all of that padding in the modern HA frontend), which I can do in Inspector:
I am really sorry, but can not find the correct element… before (see also somewhere above) we could do this:
card-mod-view-yaml: |
:first-child $:
hui-view-badges $: |
/* mobile-specific styles */
@media (max-width: 768px) {
.badges {
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
flex-wrap: nowrap !important;
justify-content: space-evenly !important;
}
.badges > * {
min-width: fit-content;
}
}
but that element wont go if I use it so set the --badge-padding…
Could anyone please have a look?
I want to get to:
in stead of the current
update
cheking the source for that styling
shows what to do:
card-mod-view-yaml: |
:first-child $:
hui-view-header:
$: |
.layout {
gap: 8px !important;
--spacing: 8px !important;
}
.badges.scroll {
mask-image: linear-gradient(
90deg,
transparent 0%,
black 1.5%,
black 98.5%,
transparent 100%
) !important;
}
.badges-scroll hui-view-badges {
--badge-padding: 0px !important;
}
can even play around with that some more, to make it just touch the mask-image:
.badges-scroll hui-view-badges {
--badge-padding: 4px !important;
}
and get:
Exists an easy way to get this:
card_mod:
style:
hui-card-features $:
hui-card-feature:nth-child(2) $:
hui-climate-fan-modes-card-feature $:
ha-control-select$: |
#option-1>div>ha-attribute-icon {
--card-mod-icon: mdi:fan-speed-3
}
#option-2>div>ha-attribute-icon {
--card-mod-icon: mdi:fan-speed-2
}
#option-3>div>ha-attribute-icon {
--card-mod-icon: mdi:fan-speed-1
}
#option-4>div>ha-attribute-icon {
--card-mod-icon: mdi:fan-auto
}
Without digging in to the web navigator developer tools? Sometimes it’s too triki.
I would like to change the selectionbar icon color while selected.
When I changed --ha-tab-active-text-color in developer tools, it worked, nonetheless I am not able identify the right format and place in card-mod-root-yaml in theme to have it working.
CSS magicians any advice pls?
check my gist at card-mod-themes · GitHub
unfortunately we need to use the theme variable --sl-color-primary-600
I did FR to change that, but no response so far
update
we can now use --ha-tab-active-text-color in 2025.10. also note I had to add the height, because of the dynamic icon-size
/* Set the color of the currently selected tab.
Set size of the currently selected tab icon*/
ha-tab-group-tab[aria-selected=true] {
--ha-tab-active-text-color: var(--ha-color-primary-50);
border: 1px solid var(--primary-color);
/*background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 50%);*/
--mdc-icon-size: {{states('input_number.active_icon_size')|int(24)}}px;
height: calc(var(--header-height) - 2px);
display: flex;
}
1 Like
Thanks a lot. It works. 
1 Like
Thank You Sir!..
This works for me to use flightradar map in main
And the cards in sidebar…
Somehow it does exact what i was looking for!
(got both scrollbars on pc tho) that’s no problem
on tablet it shows just perfect!
Kuddo’s!
1 Like
revisiting my theme mods, I realize I dont explicitly set the active tab indicator, but have it follow the default setting to adjust to the color of the tab.
Id love to be able to set it though, I my themes,
it is the border-bottom-color, but I cant find the right path. please check if you can and help me out?
edit
nevermind, I must have had a brain flush…
app-header-selection-bar-color: var(--primary-color)
helps out 
ugly tiny gap there bottom right…
1 Like
Just found this merged PR on adding an extra toolbar, which for me would be very undesirable.
Ive commented, but as said it has been merged, so probably nothing we can do but hope this will be pulled preferably before beta.
or, and that is reason to post it here, prepare for the worst and start looking into how we can mod that extra bar out again
Searching for what I want wasn’t productive so I wonder if it’s possible.
Customization of Light Card in a theme.
I have it working per card, wanting to implement it in a theme. Card-mod per card is:
card_mod:
style:
round-slider$: |
.slider {
stroke-width: 15px !important;
--round-slider-path-color: slategrey !important;
}
.handle {
stroke-width: 30px !important;
}
.: |
ha-card #info{
font-size: 40px !important;
margin-top: -85px; !important;
}
I tried various things like
generic:
card-mod-theme: generic
card-mod-card: |
round-slider$: |
.slider {
stroke-width: 15px !important;
--round-slider-path-color: slategrey !important;
}
without success.
Tested the theme file is loaded fine, Developer tools > Actions > Reload themes complaints with correct file name on error.
Your are mixing CSS declaration and YAML. If you use card-mod-card: then the entry needs to be CSS string (can be multiline). If you want to use yaml then use card-mod-card-yaml
So (untested) your theme entry should be more like
generic:
card-mod-theme: generic
card-mod-card-yaml: |
round-slider$: |
.slider {
stroke-width: 15px !important;
--round-slider-path-color: slategrey !important;
}
1 Like
My bad, missed card-mod-<thing>-yaml in the docs.
Thanks, again!
1 Like
You missed a pipe
card-mod-card-yaml: |
generic:
card-mod-theme: generic
card-mod-card-yaml: |
round-slider$: |
.slider {
stroke-width: 15px !important;
--round-slider-path-color: slategrey !important;
}
2 Likes
Hello, is there any simple way to synchronize the keyframes animation stage among elements? Something like starting a new animation with a keyframe % offset taken from already running animation offset or even delaying a new animation startup?
Hello,
The play action button in an entities card has a blue background ever since I upgraded to 2025.9. Can someone tell me how to remove it? Can’t figure it out in card mod
type: entities
entities:
- type: call-service
name: PLEX
icon: mdi:plex
action_name: Play Movie
service: script.plex_stream_alayna_2
card_mod:
style: |
ha-card {
--card-mod-icon-color: grey;
--card-mod-button: grey;
padding: 0px 10px 0px 0px;
margin: -30px 0px -10px 0px;
}
:host {
color: red;
--mdc-theme-primary: gray;
}