Custom Header

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

1 Like

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

1 Like

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:

39

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

Not yet:

2 Likes