Debugging why card-mod isn't working

Configuration Frontend
1

Heya :wave:,

I was hoping someone can help. I can’t get even the most basic card-mod to work on a dashboard, and I am not sure how to debug it.

Here are the deets:

This is my HA configuration:

  • Core: 2025.1.2
  • Supervision: 2024.12.3
  • Operating System: 14.1
  • Frontend: 20250109.0

I have the following card-mod configuration, installed using HACS:

  • card-mod 3.4.4
  • Installed in Dashboard Resources as: /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524344

For performance, I also configured it in the frontend for preloading using configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

I have restarted my HA Green device. I can see in the browser console that it is successfully loading. It says “CARD-MOD 3.4.4 IS INSTALLED” in the console window when I load a dashboard.

I have completely flushed my browser cache, and attempted to run this in both public and private mode browsing.

To my understanding, with this configuration, I should be able to use the card-mod module.

Here is my basic dashboard to test it:

views:
  - title: Home
    sections:
      - type: grid
        cards:
          - type: markdown
            content: Hello World!
            card-mod:
              style: |
                ha-card {
                  background: transparent;
                  text-align: center;
                  font-weight: bold;
                }

However, this is not seeming to render properly in the browser, even in the shadow DOM. The goal is to remove the borders of a ha-card, remove the background color regardless of the theme, and center the text the the viewport.

This is what I see:

ScreenShot 2025-01-11 at 10.50.13
ScreenShot 2025-01-11 at 10.50.13400×860 5.48 KB

What exactly am I missing that is preventing this markdown card from altering it’s styling using card-mod?

Appreciate any help that can be provided. I’m sure it’s going to be something simple, but I am not sure how to debug this. I was going to open an issue on GitHub to ask the author, but after seeing the tone in Issue #332 it sounds like it might be better to ask someone in the community,

Thanks for reading this far. Any ideas how to debug this?

2

I beg your pardon, which particular comment in this issue has the “tone” you mentioned? )

Try with an example provided in the Docs by the author.
If it works - then probably your code is wrong.
In short - the keyword is “card_mod”, not “card-mod”. Also, for some cards attributes like “font-weight” may not cause a desired effect if applied to “ha-card”.

Suggest to ask any card-mod-related questions in the main card-mod thread. Although you may not like a “tone” there as well (((. Sorry for being blunt - but the plugin’s author is known for his supporting & accuracy.

P.S. Do not use card-mod github for asking questions, it is for reporting bugs & proposing FRs.

3

It’s clear a lot of people have opened issues that frustrated Thomas enough to make that specific issue. I don’t blame him, its a thankless job to build OSS and give it to the community.

The problem is, all the articles, blogs, and videos have conflicting advice which is probably a catalyst to comments like:

You know… as it says in the readme.
…which you claim to have re-read when you check the box at the bottom of the issue template:

It’s really there to avoid wasting both of our time :wink:

I’ve followed that guidance, but still missing something. A basic card styling won’t work… even as simple as…

card-mod:
  style: |
    ha-card { background: red; }

It’s going to be something super simple and braindead easy that I missed… but it’s eluding me. Nowhere in the DOM do I see my changes being reflected. It’s like card-mod isn’t even loading to inject it, or it’s loading too late in the process. But I do see card-mod code loded when inspecting the rendered HTML:

ScreenShot 2025-01-11 at 11.30.46
ScreenShot 2025-01-11 at 11.30.461003×729 161 KB

So I’m at a loss as to what the next steps are. Any ideas?

4

Do not get surprised, tons of users create issues on github out of nothing because they do not read Docs or do not try harder. This is a small part of major trend on this planet.

As for code inspector - I will provide you a small explanation soon.

5

There it was. Told you it was braindead stupid… card-mod vs card_mod.

ScreenShot 2025-01-11 at 11.41.06
ScreenShot 2025-01-11 at 11.41.06411×866 5.38 KB

Thanks for the quick reply.

6

This is an example with Code inspector:

image
image1560×815 72.1 KB

type: markdown
title: xxx
content: |-
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
  xxxxxxxxxx
card_mod:
  style:
    $: |
      .card-header {
        background: red;
      }
    .: |
      ha-card {
        background: cyan;
        overflow: clip;
      }

This is the main card-mod thread for asking questions.

1 Like