Clear Theme

Nitram · March 29, 2019, 10:17pm

jerrychong25 · April 9, 2019, 7:44am

Hi,

I have tried to modify the background image to my own image.

It works perfectly on PC Chrome browser, but not good in mobile app Chrome browser whereby the background image is scaled bigger and become not nice.

So how to solve this issue in order one background image works perfectly on both PC Chrome browser and mobile app Chrome browser?

Thanks.

abies · April 9, 2019, 8:18am

Thank you very much, very nice looking UI

dextm80 · April 12, 2019, 9:39am

same problem here:
no background showing

title: Casa
views:

title: Home
background: var(–background-image)
icon: mdi:home-circle
cards:

ecc ecc

tefinger · April 15, 2019, 6:24pm

I added the fonts variables as described above to my theme and the font as a resource to Lovelace but the fonts on the cards do not change. They are still using Robot … All other fonts in HA changed to the theme defined font. Any ideas what’s wrong? Using HA 0.91.2

Nitram · April 16, 2019, 6:21am

@jerrychong25 these are the settings in my Lovelace:

background: top / cover no-repeat url('/local/ha.jpg') fixed

It’s a shorthand notation, combining size, position,… in one line, but it’s standard css. For more info, see f.e. https://www.webfx.com/blog/web-design/background-css-shorthand/
I suggest you try some different options for the size-part.

Nitram · April 16, 2019, 7:24am

@tefinger, tested it, and indeed, it doesn’t work in the newer release…
I experimented a little further. First, you need to check if the font is also the primary font in your themes.yaml.
What works: if you use custom cards, you can add a font like this (in the style section of the card):
font-family: var(--primary-font-family)
If you do that in every card, after that, if you change your primary font, it will change in all the cards.

sargent-penguin · April 22, 2019, 1:57pm

The shadows are being displayed despite adding this to my theme.
My HA Version is 90.1.

Do you know what might be wrong?

david1 · April 22, 2019, 3:25pm

looks nice! it looks like you modified the theme, care to share? how do you have the transparency?

Nitram · April 23, 2019, 8:43am

Thanks!
I used the card modder in every card: https://github.com/thomasloven/lovelace-card-modder
In most cards, I then used these styles:

style:
  background-color: 'rgba(255,255,255,0.50)'
  border-radius: 2px
  box-shadow: '0 1px 1px rgba(0,0,0,0.05)'
  font-family: var(--primary-font-family)

Nitram · April 23, 2019, 8:47am

Latest iteration:

david1 · April 23, 2019, 3:30pm

that looks great!

TheLaw · May 27, 2019, 9:13pm

I can’t get any of the resources working on the latest HA version. Am I the only one with this issue?

apop · June 5, 2019, 3:41am

@Nitram @tefinger crossposting from another thread, as I found an easier way to customize the fonts on the cards in case you’re still looking for this.

raul · June 18, 2019, 9:55pm

Any chance of adding this to github?

Antasp3136 · June 29, 2019, 11:29am

How did you get the cards to be transparent and the header to be so small?

sunny · June 30, 2019, 6:13pm

@Antasp3136

See here for smaller header: Resources (optional)

and here for transparency

bjornb · August 5, 2019, 10:30pm

Thanks a lot for your very nice themes! I use both dark and clear! I added transparency to the cards as well (more modern look), but instead of using card modder for every card I changed some lines in your theme file.

Line changed (where the 0.3 is the transparency):

paper-card-background-color: 'rgba(255, 255, 255, 0.3)'

And for the dark one:

paper-card-background-color: 'rgba(0, 0, 0, 0.3)'

Thanks again!

thomasloven · August 6, 2019, 1:08pm

Use ha-card-background instead.
~~paper-card-background-color~~ is deprecated and not guaranteed to work with transparency.

bjornb · August 6, 2019, 2:04pm

Ah thanks for the advice! Didn’t know that yet!