Custom Header

[jimz011 (Jim)]

Oh that is actually pretty nice. Not sure how and when I will implement this new feature in my setup, but I like it. Thanks @mayker

[Langh_Tamas (bocsitomcsi)]

Works like a charm

Many thanks!

[fra (francesco)]

Hello! I’ve just installed Custom Header and all is working well… just an information…
every time i load my HA page for 3/4 seconds i’ve the standard view (without customization)… then the “custom header view” come up… how to solve??? then …someone could help me to find a solution to add some informations (text box) at the login screen? thanks a lot.

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

Just answered this 4 posts up.

As far as adding something to the login screen, that is off topic for this thread. Custom Header cannot help you with that.

[BigBlackBear (Mike)]

@mayker

• Tabs not hiding while in kiosk mode (fixes swipe-navigation swiping to hidden tabs as well).

Is it just me, or is this issue not actually fixed?

[DavidFW1960 (David)]

OK yet again, HACS is not pulling the latest version…

[DavidFW1960 (David)]

It’s not clear how to find the devicdID?

OK I can get it on desktop chrome and on iOS chrome start chrome://inspect and it will show the id - but what about the iOS app? … looks like web-inspector in safari settings (ios app uses safari)

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

not just you, looking into it

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

If you’re using storage mode it’s listed at the bottom of CH settings, if you’re using yaml mode and can’t use the browsers dev tools then you can temporarily add it as text to the header or anything else since it’s a template variable. Otherwise it’s listed in the dev tools console as well.

[DavidFW1960 (David)]

so I’d need to get the header to show it by using a Template? Safari needs the ipad to be connected to a mac in order to view it… it’s a friggin nightmare… chrome is easy. I do use storage mode but as you know, the CH settings don’t play nice on iOS.

How do I show it with a Template?

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

header_text: '{{ deviceID }}'

edit: Forgot quotes

[DavidFW1960 (David)]

and:

  header_text: '{{ deviceID }}'
  compact_mode: false

Otherwise it won’t show it and it has to be quoted.

[BigBlackBear (Mike)]

@mayker

not just you, looking into it

For what it’s worth, after seeing the comment above about HACS pulling the wrong version, I reinstalled and that seems to have corrected the issue.

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

Good to hear. There is another user that is having a similar issue, so that’ll help me narrow it down or might even solve it for them.

[theCheek]

@mayker

I don’t think this is something that I can prevent due to the nature of how custom elements are loaded in Lovelace, the amount of custom elements you use, and the speed of the device. I will look into it, but cannot promise anything.

Thanks mate. No worries if you can’t find a solution… i’m aware that the whole point of custom header is more for individual customisation and should not be considered a ‘security’ solution.

@mayker

Can you just disable the pull to refresh feature in the browser you are using or use a browser that allows you to disable it?

This sounds like a good solution. Have found this and will try it tonight:

When being at the very top of a web page on Chrome on your Android device, you may reload it by tap-holding, and swiping down. Of course, you may turn this feature off for all the tabs by visiting chrome://flags/#disable-pull-to-refresh-effect on your chrome browser, and then set it to Disable .

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

Fully Kiosk Browser might work well for this too. Would be worth looking into.

[theCheek]

Unfortunately Fully Kiosk won’t work on this ‘fake’ android tablet. I bought it from Amazon as it was cheap, cheerful and apparently ran Android 8.0, but when I received it I found the SDK version to be 18 so essentially its Android 4.0 and webview (which Fully Kiosk requires) is unable to be updated.

[Mariusthvdb (Marius)]

Hi Ryan,

getting back to this Custom Header

you introduced the template: on the exception conditions, but I take it we can use the new template variables like userAgent in templates on the other fields too?

like:

hide_tabs: "{% if 'Chrome' not in userAgent %}30{%endif%}"

I ask because the test_template shows the correct output:

Chrome:

Safari:

but Safari still shows my Cast icon/tab:

this must be caused because I also have a show_tabs template that explicitly includes tab 30 in certain conditions. So, I configured is as an exception template:

exceptions:
  - conditions:
      template: "{{'Chrome' not in userAgent}}"
    config:
      hide_tabs: 30

and yet, it still shows the tab 30 on non Chrome browsers…

getting to the bottom of this using:

  - conditions:
#      user_agent: Chrome
      template: "{{'Chrome' in userAgent}}"

doesn’t work
while

  - conditions:
      user_agent: Chrome
#      template: "{{'Chrome' in userAgent}}"

does work
Could it be the builtin variable userAgent is not available yet? you posted them here but not yet on the GitHub?

and one more thing: changing theme doesn’t change the menu bar color, we need to reload the page for that to happen. Ill post an issue on that too.

[Swiftnesses]

@jimz011

_header: true view_css: ‘margin-top: -5px;’

I’d love to know how you created this faux menu from an entities card, can you explain?

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

@Mariusthvdb

I take it we can use the new template variables like userAgent in templates on the other fields too

Yes it is available for all templates.

@Mariusthvdb

this must be caused because I also have a show_tabs template that explicitly includes tab 30 in certain conditions

Yup, that’s most likely the reason.

@Mariusthvdb

Could it be the builtin variable userAgent is not available yet

It’s available and working in condition templates (as well as regular templates), just did a bunch of testing to be sure of it. Not sure why it’s not working for you, looking into it. Be sure that you don’t have other conditions or templates that are overriding it. Keep in mind the exception with the most matching conditions is the one that is used.

Looks like I forgot to add userAgent in the docs, but I assure you it’s there.

@Mariusthvdb

changing theme doesn’t change the menu bar color

This is definitely a bug introduced when I added per tab conditions and will be fixed in the next release.