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!

14 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.