Custom Header

Custom Header

Custom Header adds enhancements and customization options to Home Assistant’s Lovelace header. Custom Header is the replacement and successor of Compact Custom Header.

Docs (installation, config, and issues)


Features

  • Per user/device configs
  • Every config item can be templated with Jinja
  • Style and hide any element in the header
  • Dynamically style header elements based on entity states/attributes
  • Buttons can be hidden, made into custom or templated text, or be placed in the options menu
  • Compact mode, kiosk mode, and footer mode
  • Default/starting view
  • But wait, there’s more…

Issues

  • It’s preferred if issues and feature requests are posted to GitHub.
  • Be sure to read the issues section of the docs.

Supporting Development

Advanced Template Showcase and Discussion


Demo

22 Likes

Works great, thank you very much! :slight_smile:

Especially the footer mode is perfect. Sleeping time just got shorter for tonight! :smiley:

1 Like

Just loaded through HACS and also loaded the swipe navigation again… All good. Thanks!

1 Like

Searching in HACS for “custom header” it only finds the old project CCH.
How did you find the new plugin?
Thanks

it’s in hacs here
image

1 Like

If HACS doesn’t find it automatically, do this:

  1. Copy the address of the github repository of custom header: https://github.com/maykar/custom-header
  2. Add this address under HACS -> Settings -> Custom repository (choose plugin as category)
  3. Look under Plugins for “Custom Header” and go on like usual.

:slight_smile:

1 Like

Well maybe click reload data in HACS settings. It is there after all…

Thanks, I’ve found it :+1:t3:

Very nice, though I am missing a feature that was there in CCH. I haven’t tried it yet, but running through the docs it doesn’t have header: false option anymore. According to the docs I should use kiosk mode. However using kiosk mode will also disable the sidebar.

Btw, really fast release XD, I thought that it would still take weeks to get us something. Thanks @mayker Really cool!

Yeah, this was something I just didn’t think to add to the new one. Someone beat you to the punch though and there is already a feature request.

1 Like

Is anyone else having an issue using the HA ipad ios app? It looks like this for me. Reloading the page doesn’t help. Sometimes does it using a web browser too. Iphone looks mostly ok. In portrait mode there is a little sliver of blue missing on the header on the right side.

** EDIT ** Forget it. I removed the old CCH from resources and it seems to have fixed it.

I’m having issues with the iPad app as well. The header is overlapping like in my photo:

I remember this being some sort of issue that might be the fault of “layout-card” instead of custom header, but in this case it works fine in a browser, just not the ipad app.

2 Likes

Far out @mayker you’re quick with those fixes…:slight_smile: thanks a lot :+1:

Hi, someone else with unregistered webhook messages in the log?
Regards
UPDATED

I have deleted my access tokens and browser cache, it seems that it has been fixed

O man, I’m having a lot of difficulties using your website at https://maykar.github.io/custom-header/#intro/intro, I cannot browser any menu items on the left (safari on macbook and iphone), or is it just me ?

How do I enable the plugin in the lovelave config ?
Tried to rename cch: to ch: but that doesn’t work :stuck_out_tongue:

1 Like

Ah, works in Edge tho

Cant find anywhere in the docs regarding replacing the old CCH with CH, do we just delete CCH and install CH. I will be using HACS. regards

Yes, delete the old cch and install the new ch.
After that replace cch: with custom_header: in your lovelace yaml file

I get a lot of these in the logs, even after restarting HA:

https://tcc.bla.bla/community_plugin/custom-header/custom-header.js:576:42260 TypeError: undefined is not an object (evaluating ‘_.voice.style’)

https://tcc.bla.bla/community_plugin/custom-header/custom-header.js:576:42389 TypeError: undefined is not an object (evaluating ‘_.voice.style’)

And the header gets shorter on my iphone (HOME DEVICES MEDIA TR), it’s not using the full width:

When disabling the plugin (or use disabled_mode:true) it looks much wider: