Custom Header

Check the readme for how to configure. It does not happen in your configuration.yaml file like you’re attempting.


Is it possible to run a script when tab is pressed? I want to set an input number to a specific value each time tab is pressed. Is there a way to do it?


Thanks, that works. I was a little bit confused since resources section moved from ui-lovelace.yaml to configuration.yaml in HA 0.107

I need to update the readme as well to reflect the 0.107 changes for resources etc, so that may have added to the confusion.

No, and I don’t think that’s something I would add, sorry.

You would need to make a mobile exception that uses a modified version of that template. One that adds css to change the text size and possibly make the text 2 lines. Keep discussion of these things to this thread.

1 Like

please help i cant get out of kiosk mode
help help

i was tryng with cch instead ch
thank you so much
i just wont kiosk mode for tablet, need to add exclusion, how to add

i am adding in HA exceptions - device id ex. - aa2233bb-1122aass
i add mobile phone and tablet, dont work

Hi I noticed a bug I hope you can fix or perhaps there is way around it. I have created my own UI with 8 tabs, of which I want 6 to be visible on the header (footer mode). The other 2 I want invisible but accessible (I created rooms and added a back button at the top to go back to the first tab). The issue is: when I’m on the tab 7 and 8 (which are hidden from show_tabs) the screen scrolls back to the top after around 15-20 seconds. I have added ‘hidden_tab_redirect: false’ so I can visit them fine by using a navigate action service. But then I’m scrolling through my view, checking my cards and them BAM it scrolls back to the top of the page.

When I removed the tabs as hidden, it all worked fine (took me a while to figure out this was the issue). Is there a way this can be fixed? I want to access the tabs, I just don’t want them on the header…

This is my CH config btw (just in case)

  hidden_tab_redirect: false
  chevrons: false
  compact_mode: true
    - conditions:
        user: User1
        user_agent: Mobile
        show_tabs: '0,1,2,3,4,5'
    - conditions:
        user: User2
        user_agent: Mobile
        show_tabs: '0,1,2,3,4,6'
        disable_sidebar: true
  all_tabs_css: 'width: calc(16vw - 3.6px) !important; padding: 0px !important;'
  footer_mode: true
  header_css: >-
    padding-bottom: 30px !important; padding-left: 0px !important;
    padding-right: 0px !important;
  hide_config: true
  indicator_top: true
  menu_dropdown: true
  options_hide: true
  reverse_button_direction: true
  hide_help: true
  hide_unused: true
  menu_hide: true
  shadow: false
  voice_hide: true

Is it possible to put a clock in the header when in compact mode? Wasn’t able to figure it out for myself, wondering if it’s possible.

I don’t think this has been discussed before, apologies if it has.
I previosly used Custom Header to jump to a specific tab depending on certain conditions within home assistant.

With the new 107 dashboard option, I would really like to be able to choose the dashboard that is displayed depending on these seem sensors (template).

Is this something that is being developed?
Is there another way of achieving it?


Wanted to start this one off with a disclaimer: I’m very short on time ATM. I’m an essential worker at both of my jobs during this pandemic (work at multiple hospitals in IT), the wife is essential as well (yet another hospital), trying to finish up my coding bootcamp, and my kid’s school is closed (makes any uninterrupted free time a rarity and I still need leisure time myself :slight_smile: ). I appreciate any patience you can give as I realize that many of you have much more free time than usual to work on your setups and it can be frustrating when something isn’t working like you want. Thank you for the detailed bug reports and your support during these strange and difficult times.

@doktordoc Try using either a separate user login for those devices with a user condition or an user agent condition, if neither works please submit an issue on the github

@ASNNetworks Looking into it.

@Turbo4door Look into making a button’s text into a clock instead of header text

@BruceH5200 Currently there are no features for the new dashboards, but they’re in the works.


Hey man, I think we all thank you for this awesome addon.
Yes, it is important for many of us. BUT, it is far from being really essential.

So take care of your kids. Take care of your wife. Take care of yourself. And then take a rest of course :wink:

And if some spare time will remain for HA we will be happy to see you here. If not, the world will not stop, not now :slight_smile: Good luck.


Thank you so much for all the work you have done on this and the work you are doing in both of your jobs helping others. Family first!!



The transparent background not working in footer mode. If “footer_mode: false” it’s look like

If footer_mode: true:


My config:

  active_tab_color: yellow
  all_buttons_color: white
  background: transparent
  clock_am_pm: false
  clock_format: '24'
  compact_mode: true
  date_css: 'font-weight:200'
  date_locale: hu-hu
  editor_warnings: false
  exceptions: []
  footer_mode: true
  header_css: 'border-bottom: 1px;'
  hide_help: true
  menu_dropdown: true
  options: clock
  swipe_amount: '50'
  swipe_animate: swipe
  swipe_prevent_default: true
  time_css: 'font-size: 23pt;font-weight:300'
  view_css: 'padding-top:75px;'
  voice: hide
  voice_dropdown: true
  voice_hide: true

It’s a bug, or I miss something?

Thanks for your help!

1 Like

may I ask how do you place icons in the tabs instead of name?

You can do this without custum_header, it’s a feature from HA itself.

Look here:

EDIT: Actually there is an error in the documentation for HA. The anchor for “icon” is wrongly used twice on that page. Click the link, you will see an explanation about “icon”, but that’s the wron one. Scroll down a bit, there you will see the second anchor for “icon”.
In short: you have to define an icon for your tab. If you’ve done that, HA uses the icon automatically. If no icon is defined, the title is shown.
Here is copy&paste from the doc:

If you define an icon the title will be used as a tool-tip.


- title: Garden
  icon: mdi:flower