Custom Header

[ASNNetworks]

I’m doing it the right way, using the dots and reloading resources (ever since using YAML mode). So no, that’s not it. This is an actual bug that has occured since 107.x

As I mentioned, Custom Header is entirely disabled with this bug and after reloading resources it functions properly (sometimes after reloading multiple times unfortunately.) This also occurs sometimes when the app (both iOS and Android) is purged from memory and started.

I hope this will get fixed, since it really ruins the fluidity of using Home Assistant. But I ofcourse understand the creator of this plugin is very busy at the moment.

[maurizio53 (Maurizio Fabiani)]

I noticed if i put in the config hide_help: false the custom header is disabled.
How to have only the reload function with custom header?

[maurizio53 (Maurizio Fabiani)]

What’s the meaning of these errors?

2020-05-02 18:44:29 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/custom-header/custom-header.js:603:6923 Uncaught TypeError: Cannot read property 'shadowRoot' of null

[mat44150 (mat)]

Thanks. Is there any progress on this minor bug ? let me know if you have a beta version I could test if that can help you.

[paddy0174 (Patrick)]

@mat44150

Thanks. Is there any progress on this minor bug ? let me know if you have a beta version I could test if that can help you.

I can see, that not all have read this, even if it is quoted a few times… Please be patient, if you find bugs, open an issue on Github and meanwhile give people the chance to say, I’m out for a few days or weeks. Especially when these people say it upfront.

@mayker

Wanted to start this one off with a disclaimer: I’m very short on time ATM. I’m an essential worker at both of my jobs during this pandemic (work at multiple hospitals in IT), the wife is essential as well (yet another hospital), trying to finish up my coding bootcamp, and my kid’s school is closed (makes any uninterrupted free time a rarity and I still need leisure time myself ). I appreciate any patience you can give as I realize that many of you have much more free time than usual to work on your setups and it can be frustrating when something isn’t working like you want. Thank you for the detailed bug reports and your support during these strange and difficult times.

[WolfsW3lp3 (Kevin)]

Hello

I’m struggling with centering my view buttons with CSS
(A nicey guy already tried to help me, but without luck: In this Thread)
I don’t know what to do next. Someone know how it could be done?

I would be very grateful for an answer: D

[skank]

Hi

I’m lost.
Honestly.
Too many options with this custom header
Been trying all kind of mixed settings to reach my goal but none bring me so far.
Its so bad, that i cant get back to earlier things i had working.

What i want to reach:

• compact mode (only one line at top) containing:
  • Alerts/notifications in my marquee
  • a home button that brings me to my home page
  • a menu button
    All the rest , begone with it

My marquee is working, but compact mode isnt anymore (so its now disabled), and i cant get rid of my tabs anymore

My code:

background: var(--background-image)
custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  button_text: none
  header_text: >-
    <style>
    #flipper {color:#999;}
    #flip {height:24px;overflow:hidden;}
    #flip > div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
    #flip div:first-child {animation: show 10s linear infinite;}
    @keyframes show {
    0% {margin-top:-144px;}
    5% {margin-top:-96px;}
    33% {margin-top:-96px;}
    38% {margin-top:-48px;}
    66% {margin-top:-48px;}
    76% {margin-top:0px;}
    100% {margin-top:0px;}}
    #flipper p {position:fixed;color:#999; }
    </style>
    <div id=flipper><div id=flip><div><div>
    Huidige buitentemperatuur: {{states('sensor.temperature')}}°C</div></div><div><div>
    {{states('sensor.greeting')}}</div></div><div><div>
    {{states('sensor.afval')}}</div></div><div><div>
  compact_mode: false
  reverse_tab_direction: true
  reverse_button_direction: false
  options_hide: true
  show_tabs: false
  shadow: false
title: Thuis
views:
  - !include lovelace/views/01-home.yaml
  - !include lovelace/views/02-lichten.yaml
  - !include lovelace/views/03-cameras.yaml
  - !include lovelace/views/04-entertainment.yaml
  - !include lovelace/views/05-cinema.yaml
  - !include lovelace/views/06-automatisaties.yaml
  - !include lovelace/views/13-server.yaml
  - !include lovelace/views/14-network.yaml
  - !include lovelace/views/15-energie.yaml
  - !include lovelace/views/20-persoon1.yaml
  - !include lovelace/views/21-persoon2.yaml

i dont use tabs to go to my views, cause i have buttons for that on my homepage “home” view

How it looks , even with compact view enabled:

Thanks in advance

[skank]

Anyone? Really stuck here
I get errors in console too

custom-header.js:603 Uncaught TypeError: Cannot read property ‘shadowRoot’ of undefined
at styleHeader (custom-header.js:603)
at Function.processAndContinue (custom-header.js:603)
at unsub.subscribeRenderTemplate.template (custom-header.js:603)
at Object.r.subscribeMessage.type [as callback] (custom-header.js:1)
at l._handleMessage (connection.js:150)
at WebSocket. (connection.js:30)

edit: ok i found out why compact view didnt work, thats fixed (the line button_text was holding it back)
Now i still need to get the home button added

edit 2: i spoke too soon

my test pages shows only my message , like i want it to

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  header_text: >-
    <style>
    #flipper {color:#999;}
    #flip {height:24px;overflow:hidden;}
    #flip > div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
    #flip div:first-child {animation: show 10s linear infinite;}
    @keyframes show {
    0% {margin-top:-144px;}
    5% {margin-top:-96px;}
    33% {margin-top:-96px;}
    38% {margin-top:-48px;}
    66% {margin-top:-48px;}
    76% {margin-top:0px;}
    100% {margin-top:0px;}}
    #flipper p {position:fixed;color:#999; }
    </style>
    <div id=flipper><div id=flip><div><div>
    Huidige buitentemperatuur: {{states('sensor.temperature')}}°C</div></div><div><div>
    {{states('sensor.greeting')}}</div></div><div><div>
    Herinnering: Vandaag {{states('sensor.ophaalkalender_vandaag')}} buiten zetten!</div></div><div><div>
  compact_mode: true
  reverse_tab_direction: false
  reverse_button_direction: false
  options_hide: true
  shadow: false
title: Thuis
views:
  - !include lovelace_test/views/01-Test.yaml

But my page which is online, doesnt show my messages but the tabs, i dont get it cause its the same code

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  header_text: >-
    <style>
    #flipper {color:#999;}
    #flip {height:24px;overflow:hidden;}
    #flip > div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
    #flip div:first-child {animation: show 10s linear infinite;}
    @keyframes show {
    0% {margin-top:-144px;}
    5% {margin-top:-96px;}
    33% {margin-top:-96px;}
    38% {margin-top:-48px;}
    66% {margin-top:-48px;}
    76% {margin-top:0px;}
    100% {margin-top:0px;}}
    #flipper p {position:fixed;color:#999; }
    </style>
    <div id=flipper><div id=flip><div><div>
    Huidige buitentemperatuur: {{states('sensor.temperature')}}°C</div></div><div><div>
    {{states('sensor.greeting')}}</div></div><div><div>
    {{states('sensor.afval')}}</div></div><div><div>
  compact_mode: true
  reverse_tab_direction: false
  reverse_button_direction: false
  options_hide: true
  shadow: false
title: Thuis
views:
  - !include lovelace/views/01-home.yaml
  - !include lovelace/views/02-lichten.yaml
  - !include lovelace/views/03-cameras.yaml

[sbmlat (shreram)]

@mayker Can disabled_mode setting configured for each user?

I have the following snippet where default HA UI is shown based on input_boolean.ha_ui entity. But when I turned on this entity for User1 then default HA UI shows up for User2 (disabled_mode: true)

Is there any option to achieve this?

  exceptions:
    - conditions:
        query_string: kiosk
      config:
        kiosk_mode: true
    - conditions:
        user: User1
      config:
        disable_sidebar: false
        compact_mode: true
        reverse_tab_direction: true
        indicator_top: true
        disabled_mode: '{{ states.input_boolean.ha_ui.state  == "on" }}'
        footer_mode: true
        chevrons: false
        menu_dropdown: true
        button_text:
            options: >-
              <ha-icon icon='mdi:weather-{{
              states.weather.dark_sky.state }}'></ha-icon> {{
              states.weather.dark_sky.attributes.temperature }}°
              <ha-icon style='padding-bottom: 3px' icon='mdi:numeric-{%if is_state('sensor.hacs', '0') -%}0-circle{% elif
              is_state('sensor.hacs','1') -%}1-circle{% elif  is_state('sensor.hacs',
              '2') -%}2-circle {% elif is_state('sensor.hacs', '3') -%}3-circle {% elif
              is_state('sensor.hacs','4') -%}4-circle{% elif  is_state('sensor.hacs',
              '5') -%}5-circle {%- else -%}{{states('sensor.hacs')}}{%- endif%}'></ha-icon>
    - conditions:
        user: User2
      config:
        hide_tabs: 1,2,3,4,5,6,7,8,9
        default_tab: 0
        hide_help: true
        hide_config: true
        hide_unused: true
        voice_hide: true
        menu_hide: true
        disabled_mode: true

[skank]

If i split up the custom header , its ± ok.
Only thing is, if i watch it on mobile phone, the top and bottom header stay at there place… is there a way to fix it?
say if i scroll down, the top isnt visible anymore, when im at bottom and i see the bottom header, its ok, if i scroll up, the bottom should stay at the bottom, now it goes up too
Is that possible?
Cause it disturbs the other stuff now

[niconath]

Hello, how do you hide the menu sidebar on a particular device? I use full kiosk browser.

Thank you in advance

[mat44150 (mat)]

@paddy0174

I can see, that not all have read this, even if it is quoted a few times… Please be patient, if you find bugs, open an issue on Github and meanwhile give people the chance to say, I’m out for a few days or weeks. Especially when these people say it upfront.

mayker:

Sorry, I overlooked this !

[DavidFW1960 (David)]

Morning Ryan. Sure you’ll be thrilled to know 0.110.0b0 has broken this. I get no menu at all at the top with this. Just a heads up.

https://Domain/hacsfiles/custom-header/custom-header.js:1:16344 TypeError: null is not an object (evaluating 'o[e].querySelector("paper-icon-button").style')

[Steven_Rollason]

It looks like you have two unclosed <div> tags at the end of your header_text option. This is likely to be breaking the formatting of the header.

I think those should either be removed or replaced with </div> (hard to tell from my phone, but looks like the first two tags may not be closed off).

[Mariusthvdb (Marius)]

wont probably solve your tab issue, but are you sure your marquee flipper is working properly? you should have the first and last line to be identical, otherwise it wont flip fluently, and skip/jump irregular to the first line.

like this:

 <div style='float: left'>Ha Rpi4: {{viewTitle}}:&nbsp;</div>
  <div id=flip><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
  Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>

as part of a bigger template:

header_text: >-
  {% if is_state('input_boolean.ch_use_header_text_template','on') %}
  {% if is_state('input_boolean.ch_vertical_marquee_up','on') %}
  {% set keyframe = "@keyframes show {
  100% {margin-top:-144px;}
  83% {margin-top:-96px;}
  67% {margin-top:-96px;}
  50% {margin-top:-48px;}
  33% {margin-top:-48px;}
  17% {margin-top:0px;}
  0% {margin-top:0px;}}" %}
  {% else %}
  {% set keyframe = "@keyframes show {
  0% {margin-top:-144px;}
  17% {margin-top:-96px;}
  33% {margin-top:-96px;}
  50% {margin-top:-48px;}
  67% {margin-top:-48px;}
  83% {margin-top:0px;}
  100% {margin-top:0px;}}" %}
  {% endif %}
  <style>
  #flipper{color:#999;}
  #flip {height:24px;overflow:hidden;}
  #flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
  #flip div:first-child {animation: show 10s linear infinite;}
  {{keyframe}}
  #flipper p {position:fixed;color:#999; }
  </style>
  {% if is_state('input_select.mode','Developer') %}
  <div style='float: left'>Ha Rpi4:&nbsp;</div>
  <div id=flip><div><div>
  User: {{user}},User_id: {{userID}}, Admin: {{isAdmin}}, Owner: {{isOwner}}</div></div><div><div>
  User agent: {{userAgent|truncate(80)}}</div></div><div><div>
  Device_id: {{deviceID}}, Title: {{viewTitle}}, Path: {{viewPath}}, Index: {{viewIndex}}</div></div><div><div>
  User: {{user}},User_id: {{userID}}, Admin: {{isAdmin}}, Owner: {{isOwner}}</div></div><div><div>
  {% else %}
  <div style='float: left'>Ha Rpi4: {{viewTitle}}:&nbsp;</div>
  <div id=flip><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
  Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {% endif %}
  {% else %}Ha Rpi4: {{viewTitle}}
  {% endif %}

[luuk]

Hey! how cool this app, supper tnx for building and maintenance. Recently I have been learning quickly how HassIo works and I came across this app when I started drafting a tablet for one music. I am now trying to set it up so that the tablet runs in kiosk and my main user still has normal UI: Per user / device configs I think. only now I can not get it to work and if I create a user without admin rights I can not set the app and if I assign admin rights to my Tablet account that changes over my UI. what am I doing wrong?

cheers Luuk

[JustineSmithies]

Will this allow me to change the blue header colour to an image per view ? For example i have the following at the top Home, Living Room , Bathroom etc and I’d like to have a different header background image for each different view . Hope this makes sense ?

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

@luuk

what am I doing wrong?

Couldn’t tell you without seeing the config you are trying to use.

---

@JustineSmithies Yes, using header styling & header text inside per tab exceptions.

[luuk]

sorry, oke in the meen time i found time and had a look how this system works, I mest up the UI but think that now Im getting their:

custom_header:
  compact_mode: true
  exceptions:
    - conditions:
        user: Tablet
      config:
        background: 'rgba(255, 0, 0, 0)'
        hide_help: true
        menu_dropdown: true
        show_tabs: true
        default_tab: '5'
        hide_tabs: '1 to 9, 0, home'
        kiosk_mode: true
    - conditions:
        user: Tablet
        user_agent: Mobile
        media_query: '(max-width: 600px)'
      config:
        footer_mode: true
        reverse_button_direction: true
        reverse_tab_direction: true
    - conditions:
        query_string: kiosk
      config:
        kiosk_mode: true
title: UI
views:

@mayker tnx for the help

[paddy0174 (Patrick)]

@mayker
Welcome back, hope your RL situation has calmed down a little, and all your family is well and healthy!