Custom Header

Share your Projects! Dashboards & Frontend
1

:warning: No Longer an Active Project

I have come to the difficult decision to stop work on Custom Header and have archived the project. Please, see the farewell post for more info.

Custom Header

Custom Header adds enhancements and customization options to Home Assistant’s Lovelace header.

Docs (installation, config, and issues)

:warning: Important

  • Some config options can remove your ability to access UI elements. Each of these options is marked with a warning in the docs and in the UI editor. Be sure to read the important notes section of the docs or the warning at the top of the UI editor for instructions on how to restore the default header if needed.
  • Each release of Custom Header is designed for the latest versions of Home Assistant. If you are on lower versions of Home Assistant you need to use earlier versions of CH.

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

demo
demo502×571 497 KB

29 Likes
3

Works great, thank you very much! :slight_smile:

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

2 Likes
4

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

1 Like
5

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

6

it’s in hacs here
image

1 Like
7

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:

2 Likes
8

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

9

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

10

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!

11

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
12

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.

IMG_5280
IMG_52802016×1512 340 KB

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

13

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

11
111000×750 525 KB

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.

3 Likes
14

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

15

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

16

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:

2 Likes
17

Ah, works in Edge tho

18

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

19

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

20

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’)

21

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

IMG_1705
IMG_1705828×275 57.4 KB

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

IMG_1707
IMG_1707828×306 61.8 KB