Custom Header

mayker · September 29, 2020, 7:44pm

So, if I were to implement something like this, say as a separate config like you mention above:

Instead of custom_header: there would also be a custom_header_template: configuration and it would essentially act as modified default CH settings. This would still be per dashboard (but could be imported to others via !import) and any setting that was also set in custom_header: either by plain config or by exception would overwrite what is set in custom_header_template:.

Will think about it and may limit this to only YAML users.

Mariusthvdb · September 29, 2020, 8:26pm

yes! thanks, that would be so awesome, and allow for more elegant and efficient multiple configs.

please let me know how I can assist to test. I’ve prepared my files
I’d use the custom_header_template: for the global config, import it in all other dedicated custom_header: files.
beautiful !

mayker · September 29, 2020, 8:30pm

I think I’m more inclined to call it custom_header_defaults: as that would describe the interaction a bit better, but I’ll let you know for sure when I have something going.

Mariusthvdb · September 29, 2020, 8:33pm

sure, that would be even better indeed. cool.

all set and ready

mayker · September 30, 2020, 2:36pm

As a heads up, in the next few versions of HA there will be quite a few changes that will affect CH. I will be trying to stay ahead of the changes and get it updated as quick as possible. Just be aware and don’t blindly update HA to beta’s or new versions if you rely on CH. I will post here and in the release notes when changes have been made to accommodate new versions. Just wanted to ask for patience before the changes start, thank you.

mayker · September 30, 2020, 4:51pm

Looks like CH will be in the clear for 0.116 and if anything changes I’ll let you know. For now it seems that post may have been a false alarm (or, really, just an early one ).

Sebastian_R · October 3, 2020, 4:12pm

So I have added /local/custom-header.js?v=1.8.3 to URL and JavaScript module under lovelace control panel and resources. I have downloaded custom-header.js?v=1.8.3 and put it in WWW.
But CH is not working? I can’t see it on the tripple dots in the right corner or on the left in the menu bar.
What am I doing wrong?

mayker · October 3, 2020, 4:18pm

Do you get any errors in your logs or in your browser’s dev tools console (F12)?

This is confusing, your resources should only be set in one place (if using recent HA versions) and that would be in configuration > lovelace dashboards > resources.

That isn’t what you named the file in /www/ right? It should just be custom-header.js.

Sebastian_R · October 3, 2020, 7:22pm

Oh thank you I had named it custom-header.js?v=1.8.3, removed the last part like you said and it worked! Thank you Mayker!

Himdola · October 3, 2020, 10:41pm

I am new in custom header. How can i simply create different custom header settings for my tablet and for me? For my tablet i want to enable kiosk mode and maybe some another settings.

What i have is this one now;

custom_header:
  compact_mode: true
  footer_mode: true
  fit_tabs: true

Another question, when you do hide header true or kiosk mode, you don’t have the ability to edit dashboard / raw. How are doing peaple that?

mayker · October 3, 2020, 10:58pm

Read the very first post in this thread, especially the part marked “Important”. Then visit the docs link in that same post. In the config section of the docs it explains how to use exceptions per device, etc with examples.

Also if you want to skip to the answer for your last question, go to this link.

If you’re still having issues, come back here and post what you have tried and what isn’t working.

Mariusthvdb · October 5, 2020, 12:24pm

Hi Ryan,

creating my own button shortcut menu bar (in addition to the CH menu) we’re ow able to use a tooltip, thanks to Romrider’s latest addition.

I found out that using

      - transition: opacity 0.5s

makes the tooltip appear almost immediate, while a default was set at 1.5 seconds. This feels an eternity when you want to see the tooltip…
As with the tooltip in CH, which is also rather slow. Can we use the above CSS also in CH settings, to override the default settings? Ive checked the advanced styling options, obviously…

If not, would you please allow for this in the options? thanks for considering!

bergasha · October 6, 2020, 12:01am

Hey @mayker It looks like transparent background is not working on 0.116 Beta. No errors in the log sorry.

mayker · October 6, 2020, 12:23am

Yeah, I’m going to need to make some changes for 0.116. It’s not that the transparency isn’t working it’s that the view doesn’t fill the space behind the header. I’ll be on it soon.

bergasha · October 6, 2020, 12:45am

No rush and thanks heaps for all the effort

mayker · October 7, 2020, 7:15pm

I have come to the difficult decision to stop work on Custom Header. In the next few days I will be archiving the project. I invite anyone to try and resurrect it or, better yet, take parts of CH and make separate projects to cover small groups of related features. Who knows, maybe I’ll work on some of those as well.

Custom Header has become a beast to try to support and update, it is an absolute mess of code. The next HA update will both break CH and CH will be the cause of major performance issues even if fixed (without a major rewrite). What started out as a simple project to make the header smaller ballooned into this feature bloated monstrosity you see today, mostly for my inability to say no to any feature request.

Since the start of Hacktoberfest I have been working on adding things to HA itself and found myself working on changes that would make things in Custom Header obsolete (some are already) and I’m really enjoying the process.

Thank you all for the support, conversation, and experience this project has given me. I couldn’t code when I started this project and now I’m working on finding jobs in the field. I’m sad to see it go, but trust me it’s for the best. Both for myself and for Home Assistant.

Edit: I’m not going anywhere and most of my other projects will still be around and maintained.

jazzyisj · October 7, 2020, 8:10pm

Literally the only thing I’ve used custom header for is to hide the pointless header, notwithstanding the other great features. Thanks for all your hard work, and am excited to hear you’re working on core stuff instead. The more help they have there the better everything will be for everyone. If you could convince the core team to add an option to hide the header that would be just peachy though!

Good luck with whatever path you choose.

GaryK · October 7, 2020, 8:23pm

Thank you for all your work on this. The UI was greatly enhanced by the options your work provided. I hope you can bring some of this to the mainstream HA.

As I’ll be removing CH from my installation, what’s the best way to clean up after a HACS install?

jazzyisj · October 7, 2020, 8:32pm

Uninstall in HACS
Delete CH reference in your lovelace resouces file.
Delete the CH config from ui-lovelace.yaml (and any other views).
Clear your browser cahce.
Reload lovelace.

gonzotek · October 7, 2020, 8:36pm

Aww, but completely understand!! Question though, can you give any hints as to what features of CH may be coming to HA? Any github issues or PRs we can follow along on yet? Will understand if they’re not yet ready for primetime, or you otherwise don’t want to make public until the code is fully approved for merge into HA! Just want to start getting ready to make any changes to my heavily customized header (and to prepare my significant other for any changes I can’t make due to CH not being available in newer HA versions )