Home Assistant Community

Compact Custom Header


Great job @pjv
But how did you get lovelace to work on the Fire 7 tablet with Fully Kiosk browser?
As all my lovelace ui just shows up as red errors.


@pjv’s solution only fixes CCH for older devices, if you’re still using other cards that require a modern browser they won’t work.

1 Like

Right - you’d have to do something similar to what I did with the CCH code for every card you use that is written in more modern javascript. It happens that as of now, CCH is the only one I am using that gives my Fire tablet / Fully Kiosk browser trouble.


I am unaware of doing anything special to get it to work - other than transpiling the latest version of CCH that was re-written with ES6 javascript. Prior to v. 1.0.0b of CCH, everything worked fine on the Fire 7 with Fully without doing anything that I am aware of.

1 Like

I noticed that since 1.0.0b, my clock was wrapping when the time was 4 digits:


I looked at the code and saw that the clock element should have been 110px but it was 80px instead. I changed my config to explicitly include clock_format: 12 and clock_am_pm: true and that made the element be 110px. I looked at the code and it looks like where you are deciding the width it doesn’t take into account the default config values which it seems like it should if they are not overridden.

const clockWidth =
        this.cchConfig.clock_format == 12 && this.cchConfig.clock_am_pm
          ? 110
          : 80;

Interesting. cchConfig gets those values from default if not set.

      this.cchConfig = {

will look into it.


Apologies in advance if it ends up being the result of my frankencode version of the card.


If anyone else is having issues with this, I’ll look into it further. It seems to be working as intended. I don’t want to be chasing ghosts and supporting 2 versions of this card.

1 Like


Totally simple work-around anyway.

(…but I do think I was seeing this on the stock version of the card before I created the old device one)


Mine looks fine?


I am running YAML mode.
With this new config all my settings work fine when i login as the user “remote”

but if i login with other user, i get no header abowe the tabs bar.

If i use the lovelace/0?clear_cch_cache i het the look i want, but as soon as i navigate to another tab the header is gone.

My config:

  - type: custom:compact-custom-header
    main_config: true
    header: true
    menu: show
    options: show
      - conditions:
          user: remote
          options: clock
          clock_format: 24
          menu: hide
          notification: hide
          hide_tabs: 0,1,2,3,4,5,6,7,9,11,12

Are you saying that you don’t want the header compacted by default? If so, put disable: true in the main config. That’s the only way to get the default look of the header, you will lose all other CCH functions for any view with disable set to true.


So if i have disable: true in the main config, the settings for “remote” user wont work?
There is no way anymore to have the default look of header for any other user then “remote”


Remote user will still work as intended. Make sure remote user has disable: false. Anything not explicitly set for an exception will use the main config values.


This should do exactly what you’re looking for

  - type: custom:compact-custom-header
    main_config: true
    disable: true
      - conditions:
          user: remote
          disable: false
          options: clock
          clock_format: 24
          menu: hide
          notification: hide
          hide_tabs: 0,1,2,3,4,5,6,7,9,11,12
1 Like

So… this got added back to the custom updater and I deleted the version number and changed the path from /local/ to /customcards/ as instructed but now I get a nasty red screen again

  • url: /customcards/custom-lovelace/compact-custom-header/compact-custom-header.js
    type: module
Uncaught ReferenceError: LitElement is not defined
    at compact-custom-header-editor.js?v=1.0.0b1:clock11:

Shouldn’t the path begin with /local/...


not if you use the custom-updater… it’s changed since yesterday


You’re going to have to bear with me, I haven’t used the updated custom-updater myself. Will check it out when I can.

1 Like

Finally found it but it’s well burried

1 Like