When I downloaded card_mod from HACS, I got this message:
“After the download completes, since you are not using Lovelace in storage mode you need to manually add the resource with these settings:”
What is Lovelace in Storage Mode?
How do I install card-mod.js as a module?
Using the UI Lovelace editors instead of defining all your Lovelace in yaml files.
Follow the instructions:
Thanks.
I haven’t used yaml files for my front-end for a long time. Is it possible that this:
default_config:
in my config.yaml could be confusing hacs?
I’ve installed a few things using HACS, but I have no hacsfiles folder. I did find that HACS deposited the file in:
config/www/community/lovelace-card-mod/card-mod.js
Putting this into my config.yaml does nothing. Is the path wrong?
frontend:
extra_module_url:
- /config/www/community/lovelace-card-mod/card-mod.js
I also tried
- local/community/lovelace-card-mod/card-mod.js
and
- www/community/lovelace-card-mod/card-mod.js
None worked, and there were no errors in the logs.
I am running
Version core: 2022.2.9
Installation Type: Home Assistant OS
Assistance would be appreciated.
It’s a shortcut. /hacsfiles points to config/www/community/
Good.
You have to configure cards to use card_mod.
Also did you restart Home Assistant after making the changes to configuration.yaml?
Thanks for the quick reply.
I have a card (Watchman) that has this at the bottom:
card_mod:
style:
ha-markdown:
$: |
ha-markdown-element:first-of-type hr{
border-color: #303030;
}
I would expect that the card border should be blue if card-mod is working.
Yes, every time I made a change, I did a “check config” then restart.
Update- I found this in my configuration.yal file:
lovelace:
mode: yaml
I wonder if this is leftover from earlier configurations? Delete it?
Yes, if you don’t have anything in lovelace.yaml (or don’t have the file at all).
It is not indented correctly. Try:
card_mod:
style:
ha-markdown:
$: |
ha-markdown-element:first-of-type hr{
border-color: #303030;
}
One last question, please.
My ui-lovelace.yaml was my old “Overview” tab, but I have migrated most of its functions and tabs to the Lovelace UI menu. So, I removed ui-lovelace.yaml and deleted the lovelace: mode lines in configuration.yaml.
After reboot, I still have an “Overview” with everything I had defined in ui-lovelace.yaml.
Why?
(It isn’t a cache or browser memory, I tried another browser and it’s still there.)
Go to Configuration / Dashboards. Set another dashboard as your default. You should then be able to delete the Overview dashboard.
But, why is it even there since I deleted the yaml file that defined the content?
Update on my original question.
I still can’t get card-mod to do anything. I found the js file in
config/www/community/lovelace-card-mod/card-mod.js
And I recall that www is local in HA, so I tried
frontend:
extra_module_url:
- local/community/lovelace-card-mod/card-mod.js
Is this still the wrong path?
Because you can’t delete the default dashboard.
You are using storage mode now. You don’t have to worry about this. You don’t need to add anything to your configuration.yaml file. Check the Configuration / Dashboard / Resources tab and make sure card_mod is listed there as a javascript module and you are good to go.
Done. It’s there.
I’ll look into the card-mod syntax.
UPDATE:
Another DOH’ moment. The card was in a vertical stack. I tried card-mod in a card not in a stack and it works great.
Your assistance has been great. As you can tell I have struggled with Lovelace in yaml for a while, and the UI editor has been so much easier. Thanks again.
I have been struggling with card-mod error on one I imported. Card-mod was not installed, so I tried to follow this to install it. I first tried the yaml then found these later posts. I added the line in my pic, but yours has extra text after .js …where did that come from?? Can you help me understand what the hacstag is?? My install is a NUC, latest HA.
@tom_l, are you the author of card-mod? Someone on Github said that you are and I’m trying to check if that’s true.
Different Tom L. Thomas Loven,
