32 posts were merged into an existing topic: Custom Header template showcase and discussion
Yes, by using split_mode: true and footer_mode: true it will put the header text and buttons on the bottom and views at the top.
1 Like
anyone else having trouble like I do with the header icons in footer mode being in the way of the iOS handle for swiping the screen? No way I can swipe through the icons, instead the screen swipes to the other app…
the header ba is much closer to the edge when in footer mode, than when in header mode, which makes for a difficult choice in split mode. Have the marquee in the footer could be of course, but somehow takes away the charm of it, while the icons in the footer are unworkable…
Think I just need to update swipe navigation to ignore swipes on the new Custom Header elements, watch for an update to it in a bit.
Great work mayker and over the holidays as well.
Just implemented this on my wall tablet to display only two tabs (as icons) of my full Lovelace and it works well.
Was wondering if there’s a way to add a space between the tab icons in the header bar as they seem very close when no text is used.
To keep this thread clear of giant codeblocks and screenshots related to the unsupported and entirely unintended feature of HTML and other crazy templates for Custom Header, I had @ludeeus split the thread. Earlier posts referencing this feature were moved over there and I would appreciate the conversation being continued in that thread. Thanks!
https://community.home-assistant.io/t/custom-header-template-showcase-and-discussion
2 Likes
My response to you was accidentally moved over there as well, so just in case I’ll put it here:
This looks like a bug, I should add styling for an empty header_text. As a workaround for now you could just use header_text: ' '. I’ll have this fixed in the next release.
1 Like
This didn’t seem to work unless I placed it in the wrong position in the CH bit of the .yaml file. Either that or I didn’t explain myself properly.
I am referring to the two icons top left in the header to select the different views, I was wondering if it was possible to altar the spacing between theses.
Thanks for your help.
1 Like
Hi,
i have issue with default_tab, it’s not working, please look at the config below:
custom_header:
compact_mode: true
swipe: true
exceptions:
- conditions:
user: yoni
user_agent: Mobile
media_query: "(max-width: 600px)"
config:
hide_header: true
default_tab: 0
- conditions:
user: Mom
user_agent: Mobile
media_query: "(max-width: 600px)"
config:
hide_header: true
hide_tabs: '0 to 5, 7, 8, 9'
default_tab: 6
disable_sidebar: true
- conditions:
user: tablet
config:
hide_header: true
default_tab: 5
disable_sidebar: true
Also hide header not working to the other users , beside yoni user,
- conditions:
user: tablet
config:
hide_header: true
disable_sidebar: true
even though tablet user configured hide_header: true, still it’s not working.
Can someone help me?
You explained it just fine, but I apparently read " between the tab icons in the header bar" as " between the tab icons AND the header bar". Interesting that my misread resulted in finding another bug.
You could add custom CSS to the tabs by using all_tabs_css: 'padding: 0 15px;' The zero is for padding above and below and the 15px is for the padding on both sides. Increase as needed.
I added a “fix” to default_tab to keep it from triggering on every refresh of the page, but this seemed to have caused issues on some browsers. In the next release I will be making that fix configurable and off by default. Aside from that, if you want to hide both the header and sidebar use kiosk_mode: true instead of hide_header and disable_sidebar. Also, swipe navigation does not exist in Custom Header. See here.
custom_header:
compact_mode: true
exceptions:
- conditions:
user: yoni
user_agent: Mobile
media_query: "(max-width: 600px)"
config:
hide_header: true
default_tab: 0
- conditions:
user: Mom
user_agent: Mobile
media_query: "(max-width: 600px)"
config:
kiosk_mode: true
hide_tabs: '0 to 5, 7, 8, 9'
default_tab: 6
- conditions:
user: tablet
config:
default_tab: 5
kiosk_mode: true
Thats funny and good news.
Sweet, that worked a treat, thank you.
Hi Ryan,
I was wondering if we could set a generic active tab color, while respecting color settings for some individual tabs/icons set in the tabs_color:
thanks for having a look.
You can do this:
custom_header:
tabs_css:
0: 'color:green !important;'
active_tab_color: 'blue'
Active tab color will be blue, but not when tab 0 is active. It will remain green.
thanks!
this seems to work also:
active_tab_color: black
tab_indicator_color: black
tabs_color:
phones_tablets: >-
{{state_attr('sensor.family_home','icon_color')}}
both active tab icon and indicator are black, except for the tabs color phones_tablets, which follows the template.
FR: allow the indicator to be set as the tabs_color, so it would follow suit:
the naming of the options is a bit unsystematic as it is, might need some careful re-wording
Is it possible to show both the view icon and view name with CH?
could this be the cause of the frequent and spontaneous refocussing of the header? As of late, my header keeps refocussing, seemingly without any obvious reason.
as a consequence, the browser (safari) started to warn again for high power usage. Only thing I can think of is the change in the CH in its iteration 1.1.5
Default tab triggers once so I do not believe this would cause any issues with memory. Even when using templates Custom Header only runs code when an entity in that template has changed or, if using a clock, once every minute. Aside from that it will run some styling when switching tabs or going into and out of configure ui mode. From my tests Custom Header takes very little resources to run.
Ok thanks for explaining. Ive updated to the 1.1.7 version now, and it seems to be much more stable. The constant moving about of the icons in the header is gone completely so it seems! which feels really very nice indeed.
Only thing I still see, and it was that way in CCH too, is when navigating from a badge or other card/entity to a tab that is out of view, it scrolls there alright, and then move the focus tab 1 out go view…