Ctrl + F5 will clear the page cache.
Thats pretty counterintuitive as Iām mostly in kiosk_mode. So no dots if I donāt ādisable_chā
I edit in yaml (not in browser). Iāve never had any previous issues refreshing the page with anything else. As I said it worked in custom header before 107.
Ctrl + F5 doesnāt do any difference (cmd + shift + r for me). Still have to refresh twice.
Btw. I just tried to edit ui-lovelace and then fire the lovelace.reload_resources service and I STILL have to reload twice. This is driving me nuts 
EDIT:
browser_mod.lovelace_reload seems to work. I can just call that via a button for now but it would be nice to know what is going on.
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.
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?
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
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.
2 Likes
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
1 Like
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.yamli 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
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.yamlBut 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@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
1 Like
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
Hello, how do you hide the menu sidebar on a particular device? I use full kiosk browser.
Thank you in advance
Sorry, I overlooked this !
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')
1 Like
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).
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}}: </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: </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}}: </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 %}
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
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 ?
Couldnāt tell you without seeing the config you are trying to use.
@JustineSmithies Yes, using header styling & header text inside per tab exceptions.
2 Likes