Custom Header

[lassivv (lass)]

Hi. First big thanks your custom-header custom part. Thats give me so much more space my tablet view.

Just have on questions is that possible to get your custom header project or is that allready there. I use your compact_mode: true. I think is that possible to get normal clock going there?

Here is example picture with paint, what i try to explain

[mayker (maykar (pronounced "maker" with a southern accent))]

@lassivv

I think is that possible to get normal clock going there?

This isn’t something I would add. With the way the header elements interact with eachother it would be a mess to try and support.

[lseufer (Luc)]

@mayker I went through the docs but can’t find any easy way to center the tabs. In footer mode it’s still justified to the left which looks odd. Any easy way to accomplish that?

[walrus_parka]

Is there any way to install this without HACS? Looking through the github there is no raw custom-header.js that I can copy to my config.

[mayker (maykar (pronounced "maker" with a southern accent))]

@lseufer Not yet

@walrus_parka https://maykar.github.io/custom-header/#installation/manual

[walrus_parka]

Thanks @mayker, I can’t comprehend or explain how I missed that.

[Mariusthvdb (Marius)]

HI,
sorry for being late to the party in using the built-in vars, so please allow me this question, which might seem rather basic…again, sorry

using the {{ viewTitle }} in the header shows the correct viewtitle alright, which is very nice, and prevents the need to hove the current tab/view for the popup title. So cool.

Only thing is, it doesn’t change on view/tab change, but seems to wait for the next minutal refresh. Is this correct? If so, could you please automate the updating of these templates (or the vars Title, Path and Index) which of all vars seem most in need for this automation) per view change?

Or could we do so ourselves?

thanks for considering.

[odiv (Duta Ovidiu)]

Did you managed it?

[mayker (maykar (pronounced "maker" with a southern accent))]

It’s a reported bug and will be fixed as soon as I get the chance. Haven’t had much time to work on anything recently, but should be back at it soon.

[Mariusthvdb (Marius)]

ok cool, sorry I missed that…
no worries and take your time glad you recognize it as something you can fix…

[skank]

Is there a way to hide the sidebar but keep the menu button?
When i try, it always buts the menu button away.

Also, not sure why, but my header text is not showing when using compact mode.

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  button_text: none
  header_text: Home
  compact_mode: true
  reverse_tab_direction: true
  reverse_button_direction: true
  options_hide: true
  show_tabs:
   - Home
  shadow: false
  swipe_animate: fade
  swipe_prevent_default: true

What i actually want is, to show the title using the {{ viewTitle }} for all my pages except the homepage where i want to use a message like

cards: 
  - type: markdown
    content: >
      {% set time = states('sensor.time') %}
      {% if '00:00' < time < '06:00' %} ## Goeie Nacht !
      {% elif '06:00' < time < '12:00' %} ## Goeie Morgen !
      {% elif '12:00' < time < '18:00' %} ## Goeie Middag !
      {% else %} ## Goeie Avond !
      {% endif %}

not sure how to do that either (in the text header)

[mayker (maykar (pronounced "maker" with a southern accent))]

@skank

header text is not showing when using compact mode

Header text is removed in compact mode, that’s what makes it compact.

@skank

Is there a way to hide the sidebar but keep the menu button?

No, the menu button’s only use is to expand/hide the sidebar so it is hidden with the sidebar.

@skank

What i actually want is, to show the title using the {{ viewTitle }} for all my pages except…

See the 4 comments above your post, as of right now there is a bug with showing the view’s title as a text option. When that is fixed you’ll be able to do what you’re looking for using header_text: (when compact mode is off) or button_text:, there are many examples in this thread, in the template showcase thread, or in the docs. To have a certain tab show different text than the others look at how to do exceptions

You also have issues in your config. button_text: none is not a valid option and swipe is not included in Custom Header (use Swipe Navigation instead):

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  header_text: Home
  compact_mode: true
  reverse_tab_direction: true
  reverse_button_direction: true
  options_hide: true
  show_tabs:
   - Home
  shadow: false

[odiv (Duta Ovidiu)]

@mayker can you give me a hint because on iphone the header is primary-color?

on custom-header I have this code:

hide_header: false
footer_mode: true
compact_mode: true
background: var(--app-header-background-color)
elements_color: var(--app-header-text-color)
active_tab_color: var(--state-icon-active-color)
tab_indicator_color: var(--state-icon-active-color)
# split_mode: true
menu_hide: true
voice_hide: true
chevrons: false
reverse_tab_direction: false
reverse_button_direction: false
options_hide: true
hide_help: true
hide_unused: true
hide_refresh: true
hide_config: true
hide_raw: true
shadow: false
show_tabs: true
#all_tabs_css: "width: calc(20vw - 3.6px) !important; padding: 0px !important; background: 'f8f8f8'"
hidden_tab_redirect: false

tab_container_css: 'padding-bottom: 25px;'
indicator_top: true
button_text: 
  options: ':'
# exceptions:
#   - conditions:
#       tab: Home
#     config:
#       header_text: "{{ states('input_select.frontend_greeting') }}"

[mayker (maykar (pronounced "maker" with a southern accent))]

That is not the header, it is the status bar from the app. Custom header doesn’t have control over it, as far as I know the iOS app will always use your primary color for the status bar.

[albertorivi (Alberto)]

Hi @mayker,
I’m looking around to find the ability to disable the click on a specific tab.
I’m not able to find it, is it possible with Custom Header?

[mayker (maykar (pronounced "maker" with a southern accent))]

No way to disable a button’s or tab’s actions, just hide them completely. I’ll consider it as a feature since it seems that, at least with buttons, people really want to keep the ability to use them as text, templates, etc and not have them be interactive.

I haven’t been working on stuff for a bit as life has gotten in the way, but head over to the github and add this as a feature request if you’d like (my memory isn’t what it used to be and that way it’ll be on my radar).

[skull29 (Raymond)]

Hi @mayker,
I have a few days ago installed HACS after much delay and the first thing i installed as part of that is CH. Thanks for such a great customizable plugin. I have been playing around with it for 2 days now and no matter what i did, I am not able to get date and time showing as part of the options button. If I replace that with an icon, it is able to show properly. Not sure what I am doing wrong? I am running HA 0.106.2 and CH 1.3.2. Below are the codes and screenshots…

With template

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  button_icons:
    options: '{{ time }} {{ date }}'
    voice: 'mdi:death-star-variant'
  compact_mode: true

With icon

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  button_icons:
    options: 'mdi:skull'
    voice: 'mdi:death-star-variant'
  compact_mode: true

Thanks.

[mayker (maykar (pronounced "maker" with a southern accent))]

https://maykar.github.io/custom-header/#configuration/buttons

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  button_text:
    options: '{{ time }} {{ date }}'
  button_icons:
    voice: 'mdi:death-star-variant'
  compact_mode: true

[skull29 (Raymond)]

I am feeling so embarrassed and stupid now…but it is working and that’s the most important.

Thank you so much for the quick response.

[dreysolano (Drey)]

Hi @mayker, I just installed Custom Header and, after logging in as my daughter, adjusted the main settings that disabled UI manipulation. I assumed (incorrectly) that this would be a per-user setting, and now I can’t disable Custom Header as suggested in the docs by adding ?disable_ch to the URL. Each time I do I’m logged out and redirected to the login screen.

I should note I also just updated to ha core 1.6.2 last night as well. Any ideas on how I can revert these changes and gain access to edit the UI again?

Thanks…