It is not doing anything here. It would with the mod above from Darryn, but without as general variable, it is not here.
And I would wonder if it would, because it is not used in the dom at any place for this title here. Are you on any beta version of HA in this test? Iām testing on 11.3
yes I am running 2025.12.0b8 now
(note if you get borders on your markdown, use the same var I set above, borders were added by default in 2025.12) see 2025.12 Markdown changes, and how to mitigate
Can you show the dom part of that title, where the variable is used/assigned, so that I can compare?
Iām lost. As said, the variable is not used for this title here. It is fixed black. Whyever.
I dont know why it was changed, there were a lot of changes, and many had to be reverted, because of untested/unforeseen complications.
if youād test run this beta, you could give that as feedback before the beta is moved to release tonight.
there is still time
and no I cant show it because somehow it isnt thereā¦
First I would evaluate if something has changed. Because of this my ask above. Can you show a screenshot of the dom part of that title, where the variable is used/assigned, so that I can compare?
I still have a question : where the style has to be put in the theme file ?
In car-mod-card:
card-mod-card: |
:host(.class-clock) ha-card {
background-color: red !important;
border-radius: 20px !important;
}
or in car-mod-card-yaml:
card-mod-card-yaml: |
.: |
:host(.class-clock) ha-card {
background-color: red !important;
border-radius: 20px !important;
}
Rgds.
card-mod-card when only one style.
card-mod-card-yaml when you have multiple yaml selectors for card-mod. In this example, with only self yaml selector, card-mod-card-yaml is not required.
Thanks for the answer.
Rgds.
btw, I should have been a more to the pointā¦
the syntax used in those classes can be both ways:
:host(.class-clock) ha-card {
background-color: red !important;
border-radius: 20px !important;
}
:host(.type-clock) ha-card {
background-color: red !important;
border-radius: 20px !important;
}
the made up manual (.class-clock) modification is one you can used on selected entities of your choice. By using the method I showed earlier:
card_mod:
class: class-clock
the (.type-clock) is automatically applied to all type clock cards you might have, and doesnt require setting a card_mod on the card at all.
so both have their strengths.
Manual selection and be specific
Auto application and be generic
it is up to you and your needs
this is the generic mod ā¦ 
also applies to the type:clock in the header
Perhaps it is inherited.
And this way? What is displayed there?
And then hover and jump to the defintion.
so found another challenge with my themes:
card-mod-root-yaml: |
.: |
{# center the view tabs when in potrait mode to make 1 column visually #}
@media (orientation: portrait) or (max-width: 850px) {
.toolbar ha-tab-group {
display: flex;
justify-content: center;
}
}
no longer works in the sense that it wont scroll the views in the dashboard anymore if there are more than a few, wider than the view.
taking out the display: flex; makes all views scroll again, but alas, also stops centering the views above my single column views.
I suppose this might be a styling challenge, and not an issue (read bug)
would appreciate a second pari of eyes, and maybe a hint how to fix this.
thanks for having a look
You can set the justification of the tabs in the tabs part exposed by ha-tab-group
card-mod-root-yaml: |
.: |
{# center the view tabs when in potrait mode to make 1 column visually #}
@media (orientation: portrait) or (max-width: 850px) {
.toolbar ha-tab-group::part(tabs) {
justify-content: center;
}
}
Thanks also for the complement.
I stil have a problem using theme, maybe due to the fact that the clock card is encasulated in a streamline-card.
I make some tests today.
Rgds
Hi,
How do I convert ha-card.e10_graph.flex.type-custom-mini-graph-card in a theme to the new style?
The code currently looks like this:
card-mod-card: |
ha-card.e10_graph.flex.type-custom-mini-graph-card {
...
}
e10_graph is the class applied via card-mod in the dashboard card.
Iāve tried a few variations, such as:
:host(.e10_graph) ha-card .flex .type-custom-mini-graph-card
and
:host(.e10_graph.flex) ha-card .type-custom-mini-graph-card
but nothing seems to work. I also set prepend: true for the Mini Graph Card, but that didnāt change anything either.
Any ideas?
Sharing a theme config (v4) which makes sure that styled cards to not display, or even custom cards that donāt support preview properly (e.g. current official auto-entities with no entities and show_empty: false) will always show at least one row high in sections dasboard.
Add the following to your theme
card-mod-grid-section-yaml: |
hui-card-edit-mode $: |
.card-wrapper {
min-height: var(--row-height);
}
No more ghost hidden cards in edit mode. 
Read this thread comment for more info on why.
Try :host(.type-custom-mini-graph-card) ha-card.e10_graph.flex. I am assuming that the Mini Graph Card is placing its classes on ha-card. card_mod will now place .type-custom-mini-graph-card on the card itself.
If you need more assistance, please share a minimal config or DOM tree from Browser dveloper mode.
can confirm that to work as hoped for, thank you very much!
Thank you for the reply!
In the end, the solution was very simple:
:host(.e10_graph) .flex
You just have to remove ha-card and type-custom-mini-graph-card. 
If someone wants to style the card directly without using a theme and a class, itās a little different. This works for me:
:host(.type-custom-mini-graph-card) .flex
And prepend can be false in both cases.
I still have to get used to v4
adding the border radius in Inspector works,
as does this in the theme mods:
ha-more-info-info $ more-info-content $:
more-info-alarm_control_panel $:
ha-state-control-alarm_control_panel-modes $: |
ha-control-select {
--control-select-border-radius: 0 !important;
}
edited from a typoā¦
add the thickness:
ha-more-info-info $ more-info-content $:
more-info-alarm_control_panel $:
ha-state-control-alarm_control_panel-modes $: |
ha-control-select {
--control-select-border-radius: 0 !important;
--control-select-thickness: 85px !important;
}
finally, use the same thickness on all squared more-infos, and the HA Frontend built-in border-radius-square
ha-more-info-info $ more-info-content $:
more-info-alarm_control_panel $:
ha-state-control-alarm_control_panel-modes $: |
ha-control-select {
--control-select-border-radius: var(--border-radius-square) !important;
--control-select-thickness: var(--more-info-control-thickness) !important;
}
edit
just was confronted with the reason I didnt use border-radius-square once againā¦
itās not supported on all Frontend stock varsā¦ which is plain silly of course.
ha-card-border-radius: 0px #var(--border-radius-square)
ha-dialog-border-radius: 0px #var(--border-radius-square)
ha-card-features-border-radius: 0px #var(--border-radius-square)
ha-button-border-radius: 0px #var(--border-radius-square)
popup-border-radius: 0px #var(--border-radius-square)
all cant be set with it (and now I leave that commented in my theme so I dont forget)
reason: border-radius-square is set to 0, and not 0px
I did chat about that with the Frontend devs when that var was introduced, but they simply take the pov that 0 is default in CSS and 0px would be incorrect.
Their own Frontend proves differently however.
for users that like to see what I did on the more-info dialogs I created a separate post here.
keeps the topics tidy, and easier to find