Compact Custom Header

Sorry, I never did that in the begining and it worked most of the time haha. Quick question, do I need to have the exact same card in every tab? I assume so, but just checking. So if I make a change, I make the change multiple times?

You should check out the readme, especially the config caching part. Short answer no, just the first tab.

1 Like

Thanks so much. Super easy to follow and makes perfect sense.

1 Like

@mayker Only had a few minutes to play around with this. So not much yet, but I can already see the potential. Have to figure a few things out and then I’ll put them in 2 of my themes I’ve been working on. Quick question…is there anyway to ‘hide’ the icons? Basically just have the header blank with the clock :thinking: would make it more of an accent feature, but with options tucked into the clock as you have it set up now.


header1
Thanks again for all the hard work! :raised_hands:

1 Like

You can use show_tabs: null to hide all the tabs. It’s not documented and in fact I didn’t even know you could do it until I saw @ptdalen’s config above, you can also use hide_tabs: and list all the tabs, but their solution is much cleaner. Will add it to the readme soon.

1 Like

I’ve noticed that now I have to click twice on mylinks to get to the tabs

This is the way I use CCH

The images are tabs that are not displayed at the top. Each of the images have a link that goes to the tabs. Each image tab has a button that returns to home.

The tabs that are linked to images are hidden. The tabs at the top are less likely to be clicked.

Basically the images require a double click the first time and then are good until I refresh the page.

I think this is new since I upgraded, but not sure

1 Like

If you comment out CCH in your resources so it’s no longer working, does this still happen?

I commented out the CCH in my raw editor and it works as expected

Cool, well not cool…means its my problem :smiley:

Have you set redirect: false in CCH config?

2 Likes

Thank you fir your patience, that solved my issue.

Working perfectly now

2 Likes

Great theme indeed ! Would you mind sharing your theme.yaml file ? thanks !

@mayker Just wanted to say thank you for CCH as it has made my system so much more user friendly.

@ptdalen I use a similar method of redirects to make my Lovelace more usable. My interface is a work in progress as until CCH and Lovelace came along it was too difficult to make a friendly and easy to navigate interface for my large system.

2 Likes

Hi, would it be possible to see your Lovelace yaml’s as I’m working to do the same?

I will at some point when I get a chance.

But basically I hid most of the tabs for areas I don’t need immediate access too. Kept a few important ones un hidden that I want to get to with one tap/click. The main summary page has the most frequently used items.

To make redirect buttons I used entity buttons with a dummy Mqtt switch for the entity and then used navigation paths. There may be a better way if doing that now but that still works for me so I haven’t changed it.
You can do similar with picture element cards I think.

1 Like

Hi @mayker here’s a suggestion can you make the tab colour change if a entity changes. Eg: my doors/windows have opened change tab colour to red and when closed change it back to white.

Great work by the way .

2 Likes

I like that a lot, configurable tab notifications. Will work on it, no promises though. :slight_smile:

1 Like

I was looking for an icon change for the same idea.
My Garage Door is closed, so it shows the closed icon, door is open show the open icon.

Hello good afternoon!
That could be a silly question.

But I would like to know which current version of the project.

I am putting the following code:

  url: /local/compact-custom-header/compact-custom-header.js?v=0.1.4
   - type: module

However, I get error. I also tried without version.

url: /local/compact-custom-header/compact-custom-header.js
       - type: module

Custom element doesn’t exist: compact-custom-header.
{
“type”: “custom:compact-custom-header”
}

Would be ? 1.0.2b1

@cameron @sleeepy2 great idea! I just did something similar with borders for active alerts/notifications/etc. you might find useful here and live demo @01:20:47 on @DrZzs show interview . Any questions you can catch me in Discord DinoTech#4236 as not intending to hijack @mayker 's thread :sunglasses:

1 Like