Custom Header

Yes, delete the old cch and install the new ch.
After that replace cch: with custom_header: in your lovelace yaml file

I get a lot of these in the logs, even after restarting HA:

https://tcc.bla.bla/community_plugin/custom-header/custom-header.js:576:42260 TypeError: undefined is not an object (evaluating ‘_.voice.style’)

https://tcc.bla.bla/community_plugin/custom-header/custom-header.js:576:42389 TypeError: undefined is not an object (evaluating ‘_.voice.style’)

And the header gets shorter on my iphone (HOME DEVICES MEDIA TR), it’s not using the full width:

When disabling the plugin (or use disabled_mode:true) it looks much wider:

The Customer Header works great as a replacement for Compact Custom Header.

Currently I am missing the following two options I was using in Compact Custom Header:

  • Clock in header on the rights (instead of Options button)
  • Swipe functionality

Will these options also be implemented in Custom Header or are there other options?

3 Likes

Try
chevrons: false

Was discussed a few posts up… short answer you need the swipe-navigation card again.

2 Likes

Try using

button_text:
    options: '{{ hours12 }}:{{ minutesLZ }}'
2 Likes

Nice update @mayker !
Do you plan on adding the swipe feature directly with the new Custom Header module in a near future, or should we only rely on the Swipe Navigation card ?
Thank you anyway !

@mat44150
Custom Header

Can I suggest reading maybe the last 10 posts in this thread and your question will be answered.

1 Like

Hi David,
I read your post but it seemed to be a temporary fix to me.

@tCC Regarding the width of the tabs: This was done to make room for the buttons (options and menu) after scrolling. You’ll notice that those buttons move down after scrolling so that you have access to them no matter where you are on the page. You can use chevrons: false as @neohidra mentioned to hide the scrolling arrows to see more of the tabs if you like.

As far as the TypeError, if you could submit an issue to the GitHub page providing the required info I would be able to check it out further. From your earlier posts it sounds like you replaced cch: in your config with custom_header:, if you also did not change the config it might be causing issues as CCH and Custom Header have very different config options.

1 Like

Any button (as well as the header text) can be a clock, date, both, or anything else really using templates @Shayne_Bergan showed a good example for a clock, but there are many others as well as how to build your own on the docs site under “templates”

@heinoldenhuis & @mat44150
Swipe navigation and Custom Header will remain separate. At some point here in the near future I will be rewriting Swipe Navigation as well.

Yes, could be related to compact_header: false from the old cch: config, removed that and the errors are gone :slight_smile:

Thanks!

Is it possible to have different icons (and navigation paths) per view?

No, but I can look into adding per view config now (using exceptions config) as that’s something that wasn’t possible with CCH and may just be now. That way you could hide/show tabs depending on the view you’re on. Will look into it.

2 Likes

That would be amazing, I have actually made a custom header using CCH (I just hid the header on that). But seeing your new custom_header can do two of the things I had created. I was just wondering if it could be per view.

This is what it currently looks like (still using CCH).

As you can see the first line is what could in theory be achieved with your new custom header. (My first line is the conditional text that shows goodmorning or goodnight etc depending on the time of the day and it has 3 buttons at the left) all which in theory could be possible with your new component.

I also have another question :rofl::joy: (srry). But would it be possible to have half of the header on the top and the other half on the bottom(footer). Basically the footer would be additional instead of a replacement of the top header. Man so many questions haha sorry.

Thanks I will install this tonight!

4 Likes

love that theme and background! could you share the details? thanks

Thanks, this solved my issue.
After your post I saw the button_text option example also in de docs.
Missed this part of the documentation.

Thanks! That clarifies it