Compact Custom Header

This issue has been addressed in the latest release 1.0.0b2

1 Like

yes. thanks for being so quick.

FWIW, the custom-update still only shows b1 BTW

1 Like

I updated my transpiled version of CCH for legacy devices to version 1.0.0b3 and also managed to bundle in the editor code as well. Since I am using YAML mode to configure Lovelace that part is untested, but the code is there now.

2 Likes

ok, im trying this again. I keep getting the red box.(doesn’t exist) updated to the newest file.

is this correct? does it go at the top of the view.

icon: mdi:home-assistant
background: radial-gradient(black, black)

theme: midnight
views:
  - id: 0  # Automatically created id
    title: Home
    theme: midnight
    cards:
      - type: custom:compact-custom-header
        main_config: true
        exceptions:
          - conditions:
              user: Corey
            config:
              options: clock
              clock_format: 12
              menu: hide
              notification: hide
              hide_tabs: 1,2,4,5,6,7

what is the error? Doesn’t matter where you put it really and that looks correct.

custom element doesn’t exist.

- url: /local/custom_ui/compact-custom-header/compact-custom-header.js?v=1.0.0b4
    type: module 

Is there a stack requirement? - type: vertical-stack

Stack is only required for panel view. Are you sure that url is correct? the card exists in www > custom_ui > compact-custom-header ?

www/custom_ui/compact-custom-header/

then placed these two files in the compact-custom-header folder:

compact-custom-header-editor.js
compact-custom-header.js

Got it working, cache issue! Thanks so much!

Need some help here … I don’t understand why I’m getting this error. It worked fine yesterday.


The error appears on each view.
The first view also got the line: main_config: true

ui-lovelace.yaml

  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: js

  - type: custom:compact-custom-header
    header: true
    menu: true
    notification: false
    voice: false
    options: false
    tabs: true

File location:
/config/www/custom-lovelace/compact-custom-header/compact-custom-header.js
/config/www/custom-lovelace/compact-custom-header/compact-custom-header-editor.js

What errors are displayed in the HA log and browser Dev Tools (F12)? Also, “tabs: true” is not an config option.

Requires “type: module” now

1 Like

Ah, thank you @PlayedIn missed that. Yup it’s “type: module” now and if this is your first upgrade since the major update I would suggest reading through the readme and upgrading/installing manually, @bengt.

Thank You @PlayedIn and @mayker.
Changed “type: js” with “type: module”. Now it works fine again.

1 Like

I have strange issue with this card. At the bottom of the screen appears a bar in a different color than the view background.


My config:

title: 'Dom'
views:
  - id: home
    icon: mdi:home
    title: 'Pomieszczenia'
    background: '#e5e5e5'
    path: home
    panel: true
    cards:
      - type: custom:layout-card
        cards:
          - type: custom:compact-custom-header
            clock_format: 24
            clock_am_pm: false
            main_config: true
            options: clock
          - ...
          - ...

Any solutionf for that?

try the CCH background image fix:
background_image: true

1 Like

I think that the card should have an option to align the height of the States header with the height of the header in the Settings/History/etc. Is it possible?

That’s not something I’m going to add to the card, but if you want to adjust it yourself:

Look for the value -64px in the main script and increase. To make sure that the background fix still works make sure that the other value of 64px matches. Both currently found on lines 314 & 326.

Any time you edit the code you need to increase the version number in resources and refresh. I would suggest increasing it to a number that wont exist in the future. i.e. ?v=1.0.0b5.01

I prefer the icons to have less padding than what it would be if I made it match the sidebar.

1 Like

Just came here to commend everyone involved in the CCH rewrite. This new version, imho, adds a tangible level of polish to an already awesome customization and to home assistant itself. Big Kudos to everyone involved!

One of the new changes that I find myself greatly appreciating is the new hide_tabs: config option. This option greatly simplified my views configuration since I can now list out just a few pages to exclude instead of a dozen or more. It also got me thinking, it would be nice to also have a show_tabs config option. While somewhat redundant, it would give users like myself with tons of views another option to keep their configs as clean/short as possible. Just a thought.

Thanks again to everyone involved. Great update and keep up the good work!

1 Like

This is already on the list :slight_smile: Thank you for the kind words!

https://github.com/maykar/compact-custom-header/issues/50