Custom Header

mat44150 · May 6, 2020, 11:29am

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 · May 6, 2020, 12:55pm

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.

WolfsW3lp3 · May 6, 2020, 4:08pm

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 · May 6, 2020, 6:25pm

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 · May 7, 2020, 9:07am

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 · May 7, 2020, 2:31pm

@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 · May 7, 2020, 3:05pm

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 · May 7, 2020, 5:18pm

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

Thank you in advance

mat44150 · May 7, 2020, 6:25pm

Sorry, I overlooked this !

DavidFW1960 · May 13, 2020, 10:13pm

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 · May 14, 2020, 8:01am

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 · May 14, 2020, 11:36am

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 · May 19, 2020, 9:41am

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 · May 19, 2020, 2:35pm

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 · May 19, 2020, 2:45pm

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 · May 19, 2020, 2:51pm

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 · May 19, 2020, 4:13pm

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

mayker · May 19, 2020, 4:51pm

Thanks! Things are still crazy, but starting to ease up a bit. We’re all fairly stressed, but doing well.

paddy0174 · May 19, 2020, 9:53pm

We all can only hope, that things ease up soon. Unfortunately i wouldn’t bet on that! Stay safe in these uncertain times!

theone · May 20, 2020, 12:10pm

Custom Header does not seem to work with HA 0.110.0 - No header showing - Had to use 1?disable_ch to restore original header.