New Lovelace CSS Reference Repo

Share your Projects! Themes
1

After several weeks of trial and error, looking through posts, combing through themes, etc, I was tired of manually trying to find references to customizable elements of the Lovelace theme so I decided that I would create a list of known elements, put it in a GitHub repo, and let others add to it. That way, others could find it and find the specific element(s) they want to theme. I’ve started with a very basic shell of items in a markdown file.

The repo is https://github.com/chipriley/lovelace-css-values.

Once I have some folks that are interested in adding/reviewing PRs, I’ll start adding folks to the reviewer permissions on the repo.

I’m hoping that this little list will be a central place to reference these items and will help push along the development of themes for Lovelace. Please spread the word and contribute, too!

Thanks!

17 Likes
2

Thank for very much for putting this together. I’ve been searching for a list like this!

1 Like
3

Awesome. Now we just need people to add to it!

4

Great idea! Will there be a way to contribute without diving deep in (just send you things we found)? Don’t have the time at the moment/ don’t need another thing giving me options to procrastinate :smiley:

5

Just create an issue on the repo requesting an add to the file and I’ll get it added. Sorry, I was on vacation and just getting back to things. Thanks!

6

Okay, did this. Hope the repo will grow!

7

So I started theming again and created my first ever pull request. :smiley: Only included 2 things now to make sure I did everything right?

8

@Chipriley, just created issue to your repo with quite few updates I identified during recent theming work…

1 Like
9

Possibly these links may help:

lovelace cards

partial list of variables used

https://www.webcomponents.org/element/@polymer/paper-item#properties

1 Like
10

someone else provided some updates to the original github… but in a different format:

11

Hello everyone,
might someone know what the equivalent of ha-card-box-shadow (in themes) is for stack cards?

      ha-card-box-shadow: 0 0 10px 5px black
      stack-card-margin: 0
      stack-card-box-shadow: 0 0 10px 5px black

ha-card-box-shadow works.
stack-card-margin works.
stack-card-box-shadow does not work :frowning:

My vertical stacks show box-shadow for the contained cards but not the vertical stack card itself.

12

Does anyone know what variable can be used to chage the Zone Radius Color in the Hass themes? I see that usually the color from --accent-color variable is being used to colorize Zone Radius Color, but is there any way to make it different from --accent-color? Thank you.