Custom Header

[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…

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

Login and be sure to hit the “remember login” button on the bottom right. Then you’ll be able to add ?disable_ch without it logging you out. If you don’t hit “remember me” (or however it’s worded) then every page refresh will just go to the login screen.

Then checkout how to add per user config via exceptions.

[dreysolano (Drey)]

@mayker - sure enough, that worked. Thanks so much for the quick response and the exceptions docs link - I’m looking forward to experimenting more with this plugin!

[albertorivi (Alberto)]

@mayker, i will try to insert as new features on Github.
Many thanks for your time!

[Ethome56 (Erwin)]

Hi there, getting my head around all this so it might be a stupid question but here we go. I tried the kiosk mode but I can get out of that mode what is it that I don’t see? thanks

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

First 2 important notes listed here. In short, add ?disable_ch to the end of your URL.

I get this question once a week or more. Every option that removes functionality, like kiosk mode, has a warning sign next to it in the readme and in the editor. The editor has a large warning at the top explaining what to do and the important notes in the readme include this info as well.

I’m not saying all this to chastise, I am asking how I can make this more clear for users. Is there anything I can do to make this more apparent?

[Ethome56 (Erwin)]

Thank you for the fast reply and help. I was to fast with NOT reading. Learned my lesson I hope. And sorry for wasting your time.