Card-mod correctly installed? - How can i see it?

[zhas]

Hello,

i have some problem with the card-mod and maybe I can find some help here. Thanks a lot in advance!
I tried to install card-mod, not via HACS, but “directly”.
I followed this guide: Lovelace Plugins · thomasloven/hass-config Wiki · GitHub

I didn’t have any trouble during the guide/ installation. But when i want to test it, it doesnt work. I cant change the colour of the text of any card or anything else i try from examples fro the internet.

This is shown correctly, what i thought would be an indication that card-mod is installed correctly:
Dashboard → Recources: URL: /local/card-mod.js Typ: JavaScript-Modul (can’t upload the screenshot because i only can upload one picture as new member?!)

I tried it in different cards, for example I tried to change the text colour:
/CANT UPLOAD THE IMAGE RIGHT NOW/
(can’t upload the screenshot because i only can upload one picture as new member?!)

I get an “error” and the text colour doesn’t change.

I read that it doesn’t work for every card, for example not in grids etc. But it doesn’t work anywhere.

(Also i read somewhere that some symbol should appear next to “graphical editor” or “code editor”, but this didnt appear in my ha, so i think ive done something wrong.)

To be honest i put the “github-installation” in more than one directory to make sure that this wasn’t/ isn’t the problem.

What could I try to make it work?

Thanks a lot!

[zhas]

Picture of Recources → URL:

[zhas]

Picture of trying to change the text colour:

[Ildar_Gabdullin]

The last card-mod code is wrong. Check with simple examples provided b card-mod docs in GitHub.

[zhas]

Thanks a lot for your answer!
I thought this was the easiest code i could try .

It says to add this code to the bottom.
I can’t find my error in the syntax. What did I do wrong?
Thanks a lot again!

EDIT: Of course I also tried it with “ha-card”, like in the example. Didn’t work either.

[Ildar_Gabdullin]

Styles must be applied in accordance with a structure of the card. Use Code Inspector.

[zhas]

Does this help?:

Still not sure what to do to solve the problem.
Thanks for the help again!

[Ildar_Gabdullin]

My advice about Code Inspector was mainly for you - you should use Code Inspector to define a proper style.
Go to card-mod Docs in GitHub, it will help you to use card-mod.

Of course, you may choose a different way: ask someone for a ready code whenever you need it, or just copy-paste ready card-mod code. But you probably need to learn and understand it, don’t you?

[Edwin_D]

But looking at the red error at the top, it seems the browser is refusing to load the card_mod.js module. Are you using very strict security settings or antivirus settings? Card mod is injecting styling into an existing page, so it is doing things that could also be used for nefarious purposes or interpreted as malign.

[zhas]

Thank you! It’s really not because i want to go the easy was! I really hink i have some problems with the installation i can’t fix by myself by googling. I tried everything i find in forums etc.

[zhas]

Thanks! I turned everything off, also the windows firewall to test it. But still this errors:

[zhas]

I now reinstalled the card modd, but still the same problem :-/
Maybesomeone still has an idea. Thanks again!

[eltonio79 (Marcin Brodowski)]

Hey,

I have exactly the same problem. It is rather not related to browser as it happens on 3 computers and in mobile app…

I tried HACS installation, adding manually in resources section:

lovelace:
  mode: yaml
  resources:
    - url: /root/config/www/card-mod.js
      type: module

and adding using custom_module_url:

frontend:
  extra_module_url:
    - /root/config/www/card-mod.js

and unfortunatelly I still can’t deal with this issue:

This is my entities card content:

type: entities
entities:
  - entity: group.gniazda_parter_wewnetrzne
    card_mod:
      style: |
        :host {
          color: Cyan;
          font-weight: bold;
          }

I am using HA in version 2024.2.1 and the latest version of “cardmod.js” (from “lovelace-card-mod/card-mod.js at 4de5148a02d748d400bb4599c17020ca951bb64f · thomasloven/lovelace-card-mod · GitHub”).

Does anyone have any suspicions as to the cause of this problem?

[Ildar_Gabdullin]

What is /root ?

[eltonio79 (Marcin Brodowski)]

@ Ildar_Gabdullin
Good question! It pointed me to use this configuration instead:

lovelace:
  mode: yaml
  resources:
    - url: /local/card-mod.js
      type: module

And it is solved

Thank you for your quick suggestion.

[marsmaennchen]

Same problem in my system. Did you include the

lovelace:
  mode: yaml
  resources:
    - url: /local/card-mod.js
      type: module

into the configuration.yaml?
And please dont say something stupid like “LoOk In ThE DoKuMeNtAtIoN,DoNt Go EaSy WaY,…”
Guys like us already searched in every doc we can find, and tryout everything we think that works. Then we click on doc links like this:

to get output like this:

So maybe you can help me and @zhas ?