Custom Header

jncanches · December 23, 2019, 11:11pm

Thanks for your help Mayker, but I figured out what’s going bad.
Your custom-card is not the cause
It was decluttering-card which I use. In my template I use a custom:button-card. In this configuration, you MUST have decluterring-card js file to be included AFTER button-card js file.
If not, the decluttering-card is not finding the button-card element and display an error.
I tried so many things before trying this…

Sorry for the confusion, but a comment in another thread has make beleive this problem was solved by custom-header.

Thanks for your time and great job !

[UPDATE]
this method seems to improve the loading but is not bullet proof. Sometimes I have still some errors. Anyway, I spent too much time in this debug ^^

mayker · December 24, 2019, 2:33pm

Release 1.1.4

This one is an early Christmas present and includes a new mode: split_mode. This will split the header in two and place one as a header and one as a footer ( thanks to @JKW for the suggestion ).

Please, understand that if there are issues with this release I may be slow to address them as it is the Holidays and I’ll be spending my time with family.

Uses default HA header text as default for header_text
Adds shadow to header, can be toggled with shadow: true or shadow: false
Adds split mode to split header into a header and footer, flip order with footer_mode.
Listens for theme changes and updates accordingly

paddy0174 · December 24, 2019, 2:40pm

Thanks for the update and all the best for you and your family. Merry Christmas! Enjoy the time AFK.

Mariusthvdb · December 24, 2019, 7:11pm

that was quick! thanks a bunch, and of course, happy holidays! see you next year

ludeeus · December 27, 2019, 7:17pm

32 posts were merged into an existing topic: Custom Header template showcase and discussion

mayker · December 26, 2019, 12:15am

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.

Mariusthvdb · December 27, 2019, 12:35pm

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…

mayker · December 27, 2019, 1:01pm

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.

denver · December 27, 2019, 5:43pm

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.

mayker · December 27, 2019, 7:20pm

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

mayker · December 27, 2019, 7:25pm

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.

denver · December 28, 2019, 10:23am

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.

yoni3210 · December 28, 2019, 2:18pm

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?

mayker · December 28, 2019, 3:39pm

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.

mayker · December 28, 2019, 3:43pm

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

denver · December 28, 2019, 4:34pm

Thats funny and good news.

Sweet, that worked a treat, thank you.

Mariusthvdb · December 29, 2019, 10:19am

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.

mayker · December 29, 2019, 5:15pm

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.

Mariusthvdb · December 29, 2019, 9:08pm

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

tom_l · December 30, 2019, 2:32pm

Is it possible to show both the view icon and view name with CH?