Custom Header

Hey Ryan,

Great you’re back in track!

did a quick install,


but unfortunately it doesnt work at all… (did not change anything in my CH config yet, so if that’s necessary, sorry for that, havent read-up yet)

No tab/icons, and most importantly, it keeps showing my home page, even the hard entering the correct path.

will need to have a better look, for which I currently am a bit pressed for time… have to take it out for now.

Make a github issue and provide the required information when you get the chance.

I just installed 1.3.3 and everything works like a charm. You made my day. Thanks.

1 Like

I am also experiencing the same issue of nothing working on 1.3.5 with no errors.

You replied to a comment of mine requesting the required information about the issue and provided no information about the issue.

Sorry about that, I have not changed my config from previous working version of 1.3.2 before 0.107. I have exceptions setup to hide a few tabs which doesn’t work anymore on a per user basis, but does work for all. Although, looking in the console log of chrome there are no errors or in HA log.

While I prefer Github issues, I’ll just go ahead and ask here:

  • What is your config? I can’t even start to troubleshoot without knowing what your config is.
  • Does chrome’s console show the correct version number of custom header?
  • Have you cleared your cache?

Also:

The comment above implies that something is working, while your original comment says your issue is like Marius’ of “nothing working”.

My config:

custom_header:
  compact_mode: true
  editor_warnings: false
  exceptions:
    - conditions:
        user: iOS App
      config:
        hide_tabs: 'adsb,'
    - conditions:
        user: Harry
      config:
        hide_tabs: 'adsb-ios,'
  hide_help: true
  menu_dropdown: true

Version 1.3.5 is displayed in console. I have tried clearing cache.
To expand on my previous point: I can hide and show tabs via the Tabs menu without adding exceptions per user. However, when I try to hide or show tabs on a per user basis i.e. with an exception it doesn’t work.

Thank you, so just exceptions aren’t working for you. Looking into it.

Yes just exceptions, although when reverting back to 1.3.2 the exceptions do work but display some errors of

https://domain.com/config/lovelace/resources:0:0 ResizeObserver loop limit exceeded
https://domain.com/community_plugin/custom-header/custom-header.js?v=1.3:1:7166 Uncaught TypeError: Cannot read property 'querySelector' of undefined
https://domain.com/config/lovelace/resources:0:0 Uncaught

I have a content security policy setup on my proxy would that have any affect? Although I suppose it wouldn’t of worked on previous versions.

Hi is it a known problem to use kiosk mode in 107? I can’t seem to get it to work on all pages. Thanks.

I tried 1.3.3, 1.3.4 and 1.3.5, none of them work (I’m using iOS app). 1.3.2 does still work with me however (running HA 107.7). So I reverted back to 1.3.2 for now.

(Yes tried clearing caches etc and re-installed all versions multiple times, even manual update, only 1.3.2 works).

So I just installed CH 1.3.5. On desktop (Windows + Chrome) it seems to work fine. When I refresh the page it loads the CH now. Only on mobile (iOS + Mobile emulator in Chrome Debugtools) it doesn’t place the menu at the bottom even when I set it in the configuration it also still shows the menu button which I also had disabled in the config. So 1.3.5 still is not workable in HA 107.

Talking about the config like:

exceptions:
  - conditions:
      user_agent: Mobile
    config:
      footer_mode: true
      menu_hide: true

Edit: 1.3.6 seems to work now when I emulate a mobile device in Chrome, but on my iPhone in the HA app it now doesn’t load the CH it just shows the standard HA header/navbar.

1 Like

1.3.6 fixed it with me (iOS, 107.7)! Great work! :grin:

I do have to note: there is one annoying bug (don’t know if it’s CH or HA app itself) that still hasn’t been fixed. Sometimes when I select a tab, it registers and even set’s the tab icon active but the page does not switch. I was hoping this was all fixed but unfortunately this is not the case.

Looking into iOS app issues later today, bear with me the only iOS devices I have are pretty ancient which makes it a pretty frustrating experience. Could you make and issue with all the pertinent info on github for me? It seems some are having luck with iOS and some are not.

This is something I’m messing with as well. iOS issues are my arch nemesis, but I’m aware and working on it.

2 Likes

Hey guys
I have 2 problems. HA version 0.107.5 I want to add the clock in the header but it doesn’t work if I insert by raw configurator

  button_text:
    options: '{{ time }} {{ date }}'

CH stop working. In logs i found this

Dettagli registro (ERROR)
Logger: frontend.js.latest.202003181
Source: components/system_log/init.py:209
First occurred: 16:24:16 (1 occurrences)
Last logged: 16:24:16
http://192.168.1.244:8123/hacsfiles/custom-header/custom-header.js:1:9739 Uncaught RangeError: Incorrect locale information provided

Second problem: I would like to move the tab icons to the center but I have not understood if it is possible and how to do it.

Current configuration

what I want to achieve

Hi Ryan,

updated to 3.6 now, and got it working. Still I am a bit confused what the compact mode does with either footer-mode or split mode enabled. It takes out the header completely, if either footer or split mode are also enabled.

with split mode enable, footer mode seems to do nothing.

In fact, I can use split mode only, to get the tabs/icons at the bottom, and the header at the top (and revers that on my mobile)

@Nicolo_Passera

Can you share your full config?

Not currently possible.

@Mariusthvdb compact_mode shouldn’t be used with any other mode other than footer mode. I should make an exception to ignore compact_mode when split_mode is enabled.

Having split_mode enabled with footer_mode should swap the header and footer position.

Turning on compact mode and footer mode will give you a compact footer

Turning on footer mode only will place a full header on the bottom.