Custom CSS on Lovelace

Configuration
1

Oh hi!

I’ve been looking around the forums for an answer and haven’t been able to find one…
I’m simply trying to inject custom CSS on my Dashboards and I’m struggling to figure out how.

I’ve found the mode:yaml config trick but losing the ability to use the UI Editor because I want to inject a few CSS lines just sounds too ridiculous to be true…

I have found the /config/lovelace/resources UI section to add my CSS resource but although the files loads in (I see it in Chrome’s dev tools), CSS selectors aren’t affecting anything other that the body tag.

What am I missing?

Thanks

1 Like
2

Card Mod may do what you want.

2 Likes
3

Very interesting, thank you for that!

Got that going, I was able to change CSS on specific cards but wasn’t able to apply my style to a Grid type. This can’t be done according to the documentation…

If anyone knows another path, please let me know!

Thank you!

4

You may create a file in /www folder like /config/www/css/my.css and add it under /settings/lovelace-dashboards/resources in HA. Use Ressourcetyp “Stylesheet” in the dialog.

This will load your css into the browser as part of the webinterface. But i found it very difficult to make use of it.

2 Likes
5

Let’s assume my css file is in:/config/www/custom.css

What to type here? What’s the correct path?

immagine

6

Use: /local/custom.css

See: Registering resources | Home Assistant Developer Docs

1 Like