🔹 Card-mod - Add css styles to any lovelace card

Ildar_Gabdullin · October 31, 2025, 11:19pm

Another workaround (using it myself) - add a picture elements card as a custom card (use hui-element wrapper), make this added PE card of same size as the parent PE card (consider as an additional layer), then add a list of elements into child PE card. Then card-mod styling for each element may be defined on an element level, you can use include or secret to repeat same style.

dcapslock · November 1, 2025, 12:37am

The issue is testing as fixed in Card-mod 4.0.0-beta.1 and greater.

maisun · November 1, 2025, 9:34am

Thank you for the suggestion! For now to keep the simplicity I decided to keep my current approach to use !include_dir_merge_list to merge all yamls under the folder for a flattened list of elements. Looks like it’s the only way to merge lists without introducing additional wrapper.
The drawback is that all my yamls should only contain elements shown in picture element card, so I had to create anchors in real element not a template element as otherwise it creates missing entity configuration error.
Another problem with my approach is the real element used as template contains all keys, and when merged I see lots of duplicate key errors in log. Everything still works though so I just turned off logging for this warning.
I wish there is a better way of templating PE card.

backslash-enn · November 1, 2025, 8:26pm

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?

Ildar_Gabdullin · November 1, 2025, 10:44pm

Better to ask these questions on the card/mod theme thread, here it is an off topic. Note that some “pipe” symbols in your code are misplaced.

backslash-enn · November 2, 2025, 2:49am

ah gotcha, didnt know there was a separate thread for themes. will repost there

HappyCadaver · November 2, 2025, 8:30pm

Just realised that I’m using card-mod 3.5.0 which was later retracted, is there a danger to continuing with it until card-mod 4.0.0 is released?

I’m using card-mod 4.0.0-beta.5 on my HAOS 2025.11.0b1 instance and thought I was applying Marius’ badge examples there, when I realised I was modding the wrong instance I got confused because they shouldn’t work. Which is when I checked what I had installed.

dcapslock · November 2, 2025, 8:34pm

Lots of things may not work with 3.5.0, especially with custom cards or places where ha-card is not the first child of the shadowRoot of the card. This is what v4 addresses.

HappyCadaver · November 2, 2025, 9:42pm

Thanks, I think I’m good to leave my production instance as is until Wednesday then as I have not modded any custom cards and everything else has been working since installing 3.5.0.

dcapslock · November 2, 2025, 9:54pm

Card-mod 4.0.0-beta.6

Card-mod 4.0.0-beta.6 available for testing. One fix for an issue introduced during beta, and one polishing up params provided by card-mod during application on dialogs.

Since 4.0.0-beta.6

fix issue introduced in 4.0.0-beta.4 meaning no classes applied when classes specified as a yaml array
strip HTMLElement and functions from dialog params leaving only scalar params stopping recursive issues when using JSON.stringify on params.

Mariusthvdb · November 3, 2025, 7:11am

ok ignore what I said above about being incorrect.

there are several ways to implement those yaml anchors, and though on first look their output may be the same, the underlying structure isnt…

since I am mostly merging anchors, I simply always use the merge operator <<:

but check Thomas Lovén - YAML for Non-programmers, and he also indents under the direct anchor definition…

Ildar_Gabdullin · November 3, 2025, 11:02am

This article contains a basic description of anchors, and I have not found the exactly same case we are discussing - an entry inside a list.

bokkoman · November 5, 2025, 2:48pm

I try to apply a card_mod style to a card that has another card.
Code snippet that doesn’t work:

      - type: custom:config-template-card
        entities:
          - input_text.birthdays_calendar_filter
          - input_select.calendar_view
        card:
          type: custom:week-planner-card
          calendars:
            - entity: calendar.name
          days: 28
          startingDay: today
          startingDayOffset: 0
          hideWeekend: false
          noCardBackground: false
          compact: false
          weather:
            showCondition: true
            showTemperature: true
            showLowTemperature: true
            useTwiceDaily: false
            entity: weather.forecast_thuis
          locale: en
          showLocation: false
          hidePastEvents: false
          hideDaysWithoutEvents: false
          hideTodayWithoutEvents: false
          combineSimilarEvents: false
          showLegend: false
          showNavigation: false
          grid_options:
            columns: full
          card_mod:
            style: |
              .today .number {
                background-color: teal;
                }

Removing the top card makes it work:

        - type: custom:week-planner-card
          calendars:
            - entity: calendar.name
          days: 28
          startingDay: today
          startingDayOffset: 0
          hideWeekend: false
          noCardBackground: false
          compact: false
          weather:
            showCondition: true
            showTemperature: true
            showLowTemperature: true
            useTwiceDaily: false
            entity: weather.forecast_thuis
          locale: en
          showLocation: false
          hidePastEvents: false
          hideDaysWithoutEvents: false
          hideTodayWithoutEvents: false
          combineSimilarEvents: false
          showLegend: false
          showNavigation: false
          grid_options:
            columns: full
          card_mod:
            style: |
              .today .number {
                background-color: teal;
                }

Here’s a screenshot of the dev console:

Ildar_Gabdullin · November 5, 2025, 11:38pm

Check examples for config-template-card:
1st post - fantastic link - config-template-card
Your code SEEMS to be ok.
What card-mod version do you have?

dcapslock · November 6, 2025, 8:32am

Verions 3.4.6 Released

Only fix in 3.4.6 is for issue with Home Assistant 2025.11.0 and entities rows. No other changes are in 3.4.6.

If you have updgraded to Home Assistant 2025.11.0 you can use 3.4.6. If you have time please try v4 beta and provide feedback. Thank you.

olympia · November 6, 2025, 9:44am

First of all, thanks for the fixes in the 3.4.x series — much appreciated.

I’m also seeing what looks like a regression (or a change in layout behavior) where negative margin-top no longer has any effect in 2025.11.0. Example snippet:

> - type: markdown
>   content: "{{ states('sensor.sprinkler_cycle_last_started_hr') }}"
>   card_mod:
>     style: |
>       ha-card {
>         background: none;
>         box-shadow: none;
>         border-width: 0;
>         margin-top: -90px;
>         --primary-text-color: rgb(180,180,180);
>         font-size: 13px !important;
>       }

On 2025.11.0 the card doesn’t move upward anymore.

Things I tried already:

margin-top: -90px !important;
Targeting :host instead of ha-card
Targeting .card-content inside ha-card

However, it appears that position: relative; top: -90px; or transform: translateY(-90px); still work. Shall I just switch to those instead of margin-top?

Regarding v4, will I need to re-write all the dashboard I made that extensively use card-mod or it should be backward compatible?

dcapslock · November 6, 2025, 10:30am

Scrollbars in 2025.11

A quick note that if you are seeing scrollbars in Frontend after upgrading to 2025.11, I am finding various Frontend changes which are lablled along the lines of Fix height and constrain to grid for xxxx. So if scrollbars and plauging you, then look in the DOM for overflow-y on an element. Confirmed so far is entities and the #states div.

EDIT: Also ha-card in Markdown (hui-markdown-card) also has overflow-y: auto. It may not be apparant as you may not see scrollbars until you try and move the Markdown content. This relates to negative margin seemingly not working.

dcapslock · November 6, 2025, 11:11am

You can try first setting overflow-y: hidden and see. You may wish to apply this anyhow. No reaosn not to use your alternatives to adjust. The only possible difference, as well as positioning, maybe it transitions are done on transform, so you might see some animation. Note sure as I have not tested.

To date, the known Breaking Change is listed in the release notes, written up in an Issue, and delailed patching and application information available. @Mariusthvdb has been very busy testing alphas and betas of v4 () so we believe we have covered most of what you need to know in the pinned issue and information linked above.

From those who tried v4 to investigate their 2025.11 issues, my view is that 2025.11 has caused more card-mod issues than v4 beta, but with the Breaking Change for v4 well known and documented, unlike what we have to chase with Frontend sometimes.

So in summary, v4 changes should be minimal, and if you are needing to adjust a lot of stuff for 2025.11, then do any v4 card-mod changes at the same time.

dcapslock · November 6, 2025, 11:32am

I have taken a look and what you are seeing stems from the fact that week-planner-card does not have a _config variable for card-mod to query when it looks up the DOM tree from ha-card. This is same as for the recently popular ring-tile-card.

card-mod does keep trying to look for an element that has the config related to the ha-card it patches from (in v4 this starts with hui-card by preference). When used in standard Frontend way a parent card in the DOM will be hui-card which has copy of config to manage things like visibility. card-mod finds this config and all is well.

A lot of custom cards do not wrap with hui-card and as such, card-mod search expires and there is no config found. This is what you are seeing. Usual workaround is to wrap in a card that uses hui-card. e.g. a stack card or grid - when containing a single card the output is the same, but card-mod can find the copy of config that hui-card contains.

Extra Reading: card-mod and config

Unlike a standard custom card which knows its own config, card-mod needs to acquire the config from where it does has injected code, which for most of what we mod, is ha-card and now hui-card in v4. Standard Frontend cards reliably have their config in the variable config or _config which is what card-mod looks for. If a custom card does not config, then you run into the issue you are seeing.

olympia · November 6, 2025, 3:16pm

Thank you for the pointer!
It seems like overflow-y: hidden solves the “scrollbar” issue, but not the issue with the negative margin not being applied. However, based on your pointer I went further and it looks like overflow: visible solves it, by setting this, negative margin works again.

However, not directly belongs to this thread, but have anyone noticed that the card preview in HA 2025.11 doesn’t take conditions into account and shows all the elements even when conditions are not met?