Custom Header

Share your Projects! Dashboards & Frontend
227

Few things:

  • Read the issues section of the docs, it’s preferred issues are posted to GitHub.
  • Expand the error and copy/paste it as code block. The screenshot provides very little detail.
  • Where did you see someone else report this error? Can’t seem to find a post in this thread that mentions your particular error.
  • Disable Custom Header by temporarily removing it from your resources to see if the issue persists without it.
  • Since this is a yaml error, it would be extremely helpful to see your config for Custom Header if that is where the issue is
1 Like
228

Thanks for your help Mayker, but I figured out what’s going bad.
Your custom-card is not the cause :slight_smile:
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 ^^

1 Like
229

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

image

6 Likes
230

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

1 Like
231

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

1 Like
232

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

244

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
249

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…

251

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.

262

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.

263

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
264

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
265

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.

IMG_2711
IMG_27112016×1512 2.04 MB

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
267

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?

268

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.

269

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
270

Thats funny and good news.

Sweet, that worked a treat, thank you.

271

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.

272

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.

273

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