Compact Custom Header

0.90.0b2 has broken CCH Card

CARD-TOOLS IS INSTALLEDDeviceID: 624e9611-1586b55e
compact-custom-header.js?track=true:262 Can't find 'hui-root', going to walk the DOM to find it.
compact-custom-header.js?track=true:195 Uncaught (in promise) TypeError: Cannot read property 'querySelector' of undefined
    at HTMLElement.run (compact-custom-header.js?track=true:195)
    at HTMLElement.buildConfig (compact-custom-header.js?track=true:166)
    at HTMLElement.updated (compact-custom-header.js?track=true:69)
    at HTMLElement.performUpdate (app-fa09e639.js:2)
    at HTMLElement._enqueueUpdate (app-fa09e639.js:2)
run @ compact-custom-header.js?track=true:195
buildConfig @ compact-custom-header.js?track=true:166
updated @ compact-custom-header.js?track=true:69
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
CompactCustomHeader @ compact-custom-header.js?track=true:52
di @ 1036b31d59d6316c06b9.chunk.js:4543
ui @ 1036b31d59d6316c06b9.chunk.js:4543
createCardElement @ 1036b31d59d6316c06b9.chunk.js:5344
_rebuildCard @ 1036b31d59d6316c06b9.chunk.js:5423
t.addEventListener.r @ 1036b31d59d6316c06b9.chunk.js:5344
i @ app-fa09e639.js:650
customElements.whenDefined.then @ 1036b31d59d6316c06b9.chunk.js:4543
Promise.then (async)
ui @ 1036b31d59d6316c06b9.chunk.js:4543
createCardElement @ 1036b31d59d6316c06b9.chunk.js:5344
e.cards.forEach @ 1036b31d59d6316c06b9.chunk.js:5423
_createCards @ 1036b31d59d6316c06b9.chunk.js:5423
updated @ 1036b31d59d6316c06b9.chunk.js:5423
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5344
value @ 1036b31d59d6316c06b9.chunk.js:5640
async function (async)
value @ 1036b31d59d6316c06b9.chunk.js:5640
value @ 1036b31d59d6316c06b9.chunk.js:5640
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
initializer @ app-fa09e639.js:2
defineClassElement @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
initializeInstanceElements @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
i @ 1036b31d59d6316c06b9.chunk.js:5423
_clone @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
_fetchConfig @ 1036b31d59d6316c06b9.chunk.js:5660
async function (async)
_fetchConfig @ 1036b31d59d6316c06b9.chunk.js:5660
firstUpdated @ 1036b31d59d6316c06b9.chunk.js:5660
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5640
value @ app-fa09e639.js:874
c.then @ app-fa09e639.js:874
Promise.then (async)
value @ app-fa09e639.js:874
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
value @ app-fa09e639.js:1360
e @ app-fa09e639.js:1360
n @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1
Promise.then (async)
c @ core-c8c933d4.js:1
subscribe @ core-c8c933d4.js:1
S @ core-c8c933d4.js:1
window.hassConnection.then @ core-c8c933d4.js:1
Promise.then (async)
153 @ core-c8c933d4.js:1
s @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1

And not showing?

Will check it out when I can get on 0.90.0b2. I’m on 0.90.0b1 now and all is well. Looks like something was moved or renamed.

Yes it worked fine with 0.90.0b1… just b2

Balloob has opened a PR to fix this… FWIW.

Just saw that, adjusting it to make it backwards compatible.

1 Like

Update!

1.0.1b7

  • Toggle hidden tab redirect
  • Toggle chevrons (tab scroll arrows)
  • Customize header background with color or image
  • Customize the color of every header item. Every tab and button can be a different color.
  • Few misc. fixes and style changes.

I apologize for the multiple releases in one day. Will keep them to a minimum from now on.

This one is for the heavy themers out there. You can now customize the color of everything in the header, including its background color, background image, or both. Styling config at the end of the github readme. Works with exceptions as well, everyone can have a different theme!

Check out this super ugly example with a transparent png for a background:

4 Likes

Thanks @mayker, the customizing options are awesome. :clap:

Looks like there’s a problem with views panel: true

Reloading them (CTRL-F5) shows the full header.
Auswahl_185

Switching from a normal view, the cards are under the header.
Auswahl_186

No errors in HA log or the console.

1 Like

Thank you. Found the issue. Working on a fix now.

Just released 1.0.1b8 to fix panel view.

1 Like

Thanks, that was indeed what i was meaning, to theme the style by user/device just like i can hide things by user/device :slight_smile: Great work!

1 Like

Thanks for this update. Thought about requesting a theming option, but you make wishes come true before I even tell them :smiley:
Makes my theme look way better!

7 Likes

I don’t seem to be able to hide the am/pm indicator on the clock?

      - type: custom:compact-custom-header
        main_config: true
        menu: hide
        options: clock
        voice: overflow
        notifications: overflow
        header: true
        clock_format: 24
        clock_am_pm: false

Even if I keep it to 12hr format I still see it
The indicator has in the last day moved to a second line:

Any errors in HA or in your browsers dev-tools (F12)?
What version of HA and what browser are you using?
Have you tried a hard refresh?

No errors that I can see.
Seems it was a caching issue though, few browser restarts and it works as expected. Apologies

1 Like

Small update to add custom color for current/active tab’s icon. 1.0.1b9

active_tab_color:

Update

1.0.2b0

This update adds the ability to use your HA theme to style CCH. This will make it so that when sharing a theme to the community you’ll be able to include CCH styling easily. This will also lighten your lovelace config a bit. Values set in config will override ones set in the theme. The only styles not available while doing this are individual tab colors. Check the end of the github readme for more.

4 Likes

If no background_color is configured, the default is transparent?

No sorry, I should have been more apparent. Those values are just examples. Will add that to the readme. Default is just HA’s default colors, etc.

Sorry, should be more precise.
I have no CCH variables in my theme and all i have in LL config is:

- type: custom:compact-custom-header
  menu: overflow
  exceptions:
    ...

But the header is transparent.
Auswahl_021

1 Like

Ah okay, will look into it.

1 Like