Share your Themes

[akkaria (Adam)]

I posted an example of my Lovelace theme over on my website and social media and got a fair bit of interest in it and people wondering how I achieved it. I thought I might post a link to my article on how it was achieved here and show you what I have done. Many thanks to the people on this community forum for the inspiration.

https://techleech.com/2019/04/11/diy-smart-home-bonus-content-home-assistant-theme/

EDIT: Website seems to be hacked!! Should be back up soon.
EDIT: Website is back up and running and safe. Apologies to anyone who faced this. Lesson to self… strengthen the heck out of your password!!

[krovachek (Krisztian Borsi)]

WOW, this is the best!

[Tyfoon]

The link in above post re-directs to nasty stuff. I think you side has been hacked

[akkaria (Adam)]

GOSH!!! Thank you for the heads up!!!

[pepeEL]

Can you share your theme ?

[Tyfoon]

I still am re-directed

[krovachek (Krisztian Borsi)]

Something wrong with the website…

[akkaria (Adam)]

Apologies yet again @krovachek @Tyfoon this is just getting ridiculous!! The website is back up again and I’ve now added extra security so fingers crossed this doesn’t happen again!!

[kirpat (Kir)]

Dear how to make this font clearly readeable

and also when i open hass.io
theme changes to default
how to make it pmnmononight look

[Tyfoon]

Works now. Thanks. Implemented this and overall really looks nice. Theme copied 1:1, only made the round corners a bit less round

This was also the first time I used the custom header.

My only issues is that I don’t get the custom header to be transparent and/or have the same colour as the theme. It always stays the same colour blue (the default one).

background: center / cover no-repeat url("/local/background.jpg") fixed
views:
  - badges: []
    cards:
      - type: 'custom:compact-custom-header'
        main_config: true
        background_image: true
        background_color: 'rgba(150, 150, 150, 0.2)'
        menu: show
        options: show
        voice: show
        notifications: clock
        clock_format: '24'
        clock_date: true
        disable: false

[akkaria (Adam)]

Glad you got it all working Looks great… I was actually thinking myself to soften the radius of the cards and after seeing yours I think it has convinced me.

As for the custom header not being transparent, I’m not 100% sure why it would be doing that. As you have a few options set for the header, one of them may be overriding it. Try not adding the background_image option and see if that fixes it.

[PHOLAUSSON]

@akkaria Hi, looks great
I’ve search your site but I cannot find link to your github. Can you please post your githublink?

[mayker (maykar (pronounced "maker" with a southern accent))]

background_image and background_color were replaced with just background:

Compact Custom Header

Update 1.0.2b9 Breaking Change: The config options “background _image” and “background_color” have been replaced with just “background”, you can use the same options as before like background: "#000" or background: url('/local/image.jpg') , but can now do things like background: "#000 url('/local/image.jpg') right. More info on the background property here. Replaced “background _image” and “background_color” with “background” Fixed tab container margins when using conditionals to hide but…

[Tyfoon]

@mayker that did it.Thanks!

[akkaria (Adam)]

Here is a link to my GitHub https://github.com/akkaria/home-assistant

It is in the article but funny enough, it seems I need to update the theme on my website The colour of the links doesn’t quite stand out enough, hence people not seeing the link so I’ll try and update it shortly.

[autdaf]

@Tyfoon Would you be able to share how you did all those lovely temperature graphs, especially the one comparing inside and outside temps and and also humidity? That’s exactly what I’m looking for and I’m unable to do it on my own. Thanks!

[Tyfoon]

Hi, this is the custom mini-graph card (here)

entities:
  - entity: sensor.vocht_kelder_216
    name: Garage
  - entity: sensor.vochtigheid_buiten_48
    name: Outside
icon: 'mdi:water-percent'
name: Humidity
show:
  fill: false
  labels: true
type: 'custom:mini-graph-card'

[Mariusthvdb (Marius)]

HI,

What is that weather card picture? Isn’t buienradar it? havent seen it like that before and would like to give it a go too.

would be willing to share the setup of that?

[Tyfoon]

Had to look that one up! Was along time ago…

Add below to your cameras.yaml (assuming you have one) and then add a lovelace camera card.

- platform: generic
  still_image_url: http://cdn.knmi.nl/knmi/map/general/weather-map.gif
  name: Weerkaart_NL

[Mariusthvdb (Marius)]

@Tyfoon

http://cdn.knmi.nl/knmi/map/general/weather-map.gif

thanks! missed knmi completely, how silly of me… duh. The rain and idle overlay are made in a picture_entity card then?