Home Assistant Community

Compact Custom Header


Nevermind, I’m an idiot. I had changed my config to enable CCH and forgot to push it to my github. Blame lack of sleep for this one, thanks for all the help and supporting this awesome component.


Update 1.0.1b1:

Added a date option to add a date above the clock, tweaked caching a bit, and adjusted a few styles for notification indicator and the editor.


I’ve just installed this for the first time today, I have the latest version, and it’s all working except the clock - I’m trying to replace the voice icon with the clock, but I’m obviously misunderstanding something. I’m running Hassio on an RPi, HA version 87.1. I don’t use the custom updater. My config looks like this:

  - id: 0  # Automatically created id
    title: default_view
    theme: greypaper
    icon: mdi:home
      - type: custom:compact-custom-header
        main_config: true
        background_image: true
        options: show
        voice: clock
        notifications: show

And the right side of my header looks like this:


There are no errors in my log. What I am doing wrong? Thanks for any help.


What browser are you using and is the voice icon there when not using compact-custom-header?


Sorry, should have said, Chrome on a Windows PC. The voice icon was there before I installed compact-custom-header, and missing afterward. I’ve just commented all compact-custom-header code out of my ui-lovelace.yaml file and reloaded Lovelace and ctrl-F5’d, and the voice icon did not come back. Not sure if I have to restart HA…


Double check that conversation: is in your configuration.yaml


Bingo! It was commented out (has been for a long time). I put it back, restarted HA without compact-custom-header, and the voice icon came back. I put the compact-custom-header code back in and now it’s working as expected - voice icon replaced by clock. Thanks so much for your help! I would not have figured that out on my own.


I know I’m missing it somewhere in these posts, but how do I “turn off” the header if I’ve made a mistake. I updated and have cleared errors, but now cannot get into the lovelace configuration, to edit or raw. The options are missing. The compact header is mostly working other than I can no longer make any changes to anything. :slight_smile:


Check the “important notes” section of the readme. First item.

1 Like

Just wanted to say big thanks. Works great on my old iOS10 iPad, and I can create a view with only cards that work and filter that using the compact header component. <3



I’m glad to hear it’s working for others as well.


Hi I’m using HomeAssistant 0.88.1 and using the latest compact custom header 1.0.1b2, I keep getting a service log error:

/compact-custom-header-editor.js?v=1.0.1b2:35:1 Uncaught SyntaxError: Unexpected token export


Since 0.89.0b0 i’m seeing a big gap between the tabs and the cards.
@mayker, could this be an issue with your card?


make sure you have javascript_version: latest in your configuration.yaml under frontend:


Will check this out as soon as I can get on 0.89.0b0


When i right click the gap and inspect, it disappears, but what i see in the inspector is chinese for me. :neutral_face:


Alright, on 0.89.0b0 now. Not seeing that behavior on my end. Could you share your config for the card and also verify that this doesn’t happen when removing (commenting out) CCH?


When i’m commenting out the CCH, all looks normal and i have the big header.
Now i found that views in panel mode and @thomasloven 's layout-card have no gap between the tabs and the cards.

Auswahl_182 Auswahl_181
Maybe the issue is here?

Thanks for looking at it!


thanks for that,

I followed: https://www.home-assistant.io/components/frontend/

  javascript_version: latest

I’m still getting the service log error tho


Did it ever work @gekim.84?