Custom Header

Share your Projects! Dashboards & Frontend
1045

Ah okay, I see the issue. Will put a fix in for it when I get the chance, but currently font size is set after custom css when breaking it into two lines with <br>.

Here is a workaround for you though:

        button_text:
          options: >-
            <div style='font-size: 10px; padding-top: 9px;'>
            {{ dayNameLong }}, {{ dayNum }} {{ monthNameLong }}
            <br>{{ year4d}}, {{ time }}</div>
        options_css: 'color: pink;'
1046

Hi everyone !
I still have the issue with the 5th icon covered by a right arrow on a mobile device. It does not seem to have been fixed. Am I the only one with this problem ?
Thank you

1047

Hello,
I am using the {{time}} built-in variable to replace the option button. While playing with the time/date settings of my phone and then opening the HA app, I noticed that {{time}} gives the client’s time, but not the server’s time.
In my opinion, I prefer to have my home time when checking the HA app in a different country/timezone. Is there a way to modify the behavior of {{time}} to get the server’s time instead of the client’s time ?
Thank you !

1048

The tab’s/view’s icons/buttons are larger than just the size of the icon, they have padding on the sides. If any portion of that button is obscured then the arrows (chevrons) will appear. You can either disable chevrons via the CH settings UI or manually by adding chevrons: false to your config. Alternatively, you could reduce the padding of the tabs by adding this to your config all_tabs_css: "padding-left: 7px; padding-right: 7px;" or something similar. Increase or decrease the number 7 to your liking.

To get your servers time, replace {{time}} with this Jinja template {{(now().strftime('%I'))~now().strftime(':%M %p')}}

If you would prefer a different time format I would suggest checking out the template doc’s section on time.

1049

Hi Mayker,
Thank you very much for your quick help on this. Both issues are solved !

But just to be picky, in the original post, I mentioned that the chevrons are not here by default. They appear for some reason when the theme changes, and they disappear when I rotate twice the screen. So I am not sure if it’s really related to the left/right padding. Anyway, thanks for the quick fix !

1050

Is it possible to close and open the sidebar ?
For me it always stays visible, until I disable it in custom_header, but then it seems really gone…
Other options ?

  compact_mode: true
  hide_help: true
  hide_config: true
  button_text:
    options: '{{ time }} <br> {{ date }}'
  exceptions:
    - conditions:
        user: touch
      config:
        default_tab: Keuken
        //disable_sidebar: true
1051

See this comment above.

Using disable sidebar in CH is meant to completely disable the sidebar.

1052

Updating to HACS to 1.6.0 breaks custom header 1.7.9 (and older version) function and accessibility. Reverting to HACS 1.5.2 restores custom header function and accessibility.

1053

Still working for me on HACs 1.6.0, CH 1.7.9.

1054

I have Custom Header 1.7.9 running with HACS 1.6.0. It’s working fine

1055

That’s not much to go on, but I can understand that just because it works for others doesn’t mean it’s not busted for you.

  • What isn’t working?
  • Any CH or HACS errors in your logs?
  • Any CH errors in your browser’s dev tools console?
  • Do you use HACS for anything else?
  • If so, are they working?
  • What is the URL for CH in your Lovelace resources?
1056

Hi,
I have tried to update it once again and now it is all OK. Case closed.

1057

Hi,

Is there a way to display the text under the icon AND increase the size?
This is to make the menu system easier to operate on a tablet.

I’m aware I can increase the size using the below code, but this throws off the menu underline.

all_tabs_css: 'zoom:1.50;'

Example:

Untitled

1058

No, but after some playing around with custom css I’ve found something that might be a better option for you. This will enlarge the entire header, including the active tab indicator:

header_css: 'zoom:1.50;'

Alternatively, you could hide the indicator all together and use icon color to show the active tab:

active_tab_color: var(--paper-item-icon-active-color)
tab_indicator_color: transparent
all_tabs_css: 'zoom:1.50;'
2 Likes
1059

Thanks for the fast reply @mayker I’ll have a go at it later. Appreciate your help.

1060

Is it possible to move the button_text item to the left side of the menu bar?
For example, to display the Time? See below

image
image1642×483 348 KB

1061

You could use reverse_button_direction: true to shift all buttons (not including tabs) from left to right to right to left.

If that’s not exactly what you’re looking for, you can use the method described in the comment here.

1 Like
1062

If that’s a tablet that is always in that orientation (even if its not), you should give the newest feature a try with reversed buttons and your current setup:

fit_tabs: true
reverse_button_direction: true

Think it would improve the look.

1 Like
1063

Yes it is for a tablet. This worked like a treat!
Thanks again for your prompt support @mayker :+1: :+1: :+1: :+1:

1064

@agneev @WolfsW3lp3 @Nicolo_Passera @lseufer @aFFekopp

Hoping that I’ve found and tagged everyone who had requested a way to center the header’s tabs in this thread at one point or another.

This is now possible with the new fit tabs feature fit_tabs: true. Adding this to your config will fill the width of the tab container with your tabs (as long as they all fit on the page).

But using this new feature with some custom css allows you to center your tabs in the middle of the header. It will take a bit of tweaking on your part, but not much. Just adjust the width in either of the examples below to fit your needs:

Width as percentage:

  fit_tabs: true
  tab_container_css: 'width: 50% !important; margin: auto !important;'

Width with pixels:

  fit_tabs: true
  tab_container_css: 'width: 700px !important; margin: auto !important;'

Example:

image
image998×47 1.27 KB

2 Likes