Home Assistant Community

Compact Custom Header


Thanks for adding the username. Works great :+1:

I noticed the config only works correctly if I start with the usernames and then the user_agents. If I do it the other way around then the user_agent_views are not correctly used.
And I have some issues when using 2 usernames. The settings only seem to work for the first user and not for the second one, which seems to get the default user_agent_views (placed the card in the default tab of the second user as well).
Will do some more testing and let the results know.


    - type: custom:compact-custom-header
      user_agent: user1, user2, iPhone, Nexus
      menu: true, true, false, true, false
      notification: true
      tabs: true, true, false, true, false
      voice: false
      clock: notification
      clock_format: 24
        - 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18  # Default
        - 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16        # user1
        - 17,19                                         # user2
        - 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16        # iPhone
        - 18,19                                         # Nexus 7
      dir: /www/lovelace/


That’s by design. It will always use the settings of the first last agent matched, so if username is first last in the config list, it’s matched first last and those settings are used.

Please do. Will test this a bit when I can as well.



But there was no match for a user-agent, only for a username. And when I start the list with user-agents and then usernames, the view was set to default and I would expect a match on the username and thus showing the corresponding view.



My apologies, it’s actually the last one matched, but that doesn’t explain why some aren’t matching for you.



So I’ve been testing and I’m able to use multiple user names just fine. Are you including the card with the same settings on tab/view #17? If not, that might be your problem right there.

If you’re hiding the tab that includes the card you need to be sure that the new “first” card for that agent also includes the card with the same settings, otherwise the card is never loaded for that agent.

So in your case I would add the card to both 17 & 18 as those are the new first tabs for the agents that hide the first tab.



Is anyone else successfully using this with other cards that leverage Panel Mode? I’d love to use this on my Floorplan View but using Picture Elements with Panel Mode completely breaks everything.



Did you follow the instruction for panel mode from the “important notes” section in the readme:

“To use with panel view place this card inside a “container card” with the panel card (stack cards, layout-card, etc.), otherwise this card isn’t “displayed” and won’t load.”

In your case, put this card at the end of a vertical-stack with the picture elements card.



Ugh. I swear I read the readme half a dozen times yesterday. Thank you for your help and apologies for the silly question.

1 Like


I have found the solution (cards were already added to the right tabs). I had this

user_agent: user1, user2, iPhone, Nexus

That doesn’t work correctly for user2, but when I remove the spaces after the comma it works. So like this.

user_agent: user1,user2,iPhone,Nexus

For the user agent it is still working with a space after the comma though :thinking:

Other thing, when opening HA on my iOS app I get this error in the HA log every now and then. TypeError: null is not an object (evaluating 'love_lace.querySelector('hui-root').shadowRoot')


AH! Thank you, I strip the spaces automatically when taking in user agent, but totally forgot to add that to the username config. That and the typeerror should be fixed up later tonight.

Thanks again!

1 Like


Just made that update real quick, should fix both issues.



Great! The user part is working fine now with spaces and the TypeError seems to be gone as well :grinning:

1 Like


If you use tracker-card and/or custom-updater, I’ve shifted some things around on github and you’ll need to update the cards url to:




I don’t know if this is related to the latest update but my clock now only shows the hours if clock_format is set to 24 but correctly shows hours and minutes if I set it to 24.

Let me know if you want me to provide any more info.



What does your config look like?



@mayker, Here goes:

# Compact header
x-compact-header: &compact-header
- type: custom:compact-custom-header
  dir: '/www/custom_ui/'
  header: true
  notification: true
  menu: true
  voice: false
  options: true, false
  tabs: true
  clock: notification
  clock_format: 24
  clock_am_pm: false
  background_image: true
  user_agent: mobile

and then each view has:

- <<: *compact-header



Try taking out “clock_am_pm: false” completely

1 Like


Well, that was simple.

1 Like


No, thank you. Even though a 24 hour clock shouldn’t need that option set it shouldn’t effect it if it is. Turns out I had a small typo and it’ll be fixed in the next release.



You no longer need to put this cards url in custom-updater/tracker card. @ludeeus has included compact-custom-header by default.