Compact Custom Header

Update 1.3.2:

New features:

  • Use a view’s title: or path: in configuration for show_tabs, hide_tabs, default_tab, conditional styling, and template styling
  • List support for the user: condition. Just separate each user with a comma (user: maykar, thewife, thekid)
  • To help diagnose cache issues the CCH version is displayed in browser’s console.

Fixes:

  • Notification dot on menu button
  • notify_indicator_color
  • The icon to expand exceptions is no longer hidden by long conditions in the editor
  • You can use multiple ranges again (5 to 9, 12 to 42)
  • Sidebar spacing
  • Combined editor into main js file to help with legacy support.

To expand on that last one, the editor is now included in the main js file. After updating it is safe to delete compact-custom-header-editor.js. If using HACS it should be removed automatically. Installing CCH now only involves the one file compact-custom-header.js. This should help with the creation of the legacy version that @pjv maintains (he is aware and will update his gist soon).

1 Like

Thanks for the fast response! I wasn’t aware for the ‘dot’ notification, it’s definitely not working in my install - that bug must have bitten me. Of course the dot notification would totally cover what I was asking.

1 Like

Just upgraded to 1.3.2, and reloaded the page, triggered a notification and no dot showed up in the “hamburger icon” (three horizontal lines). when expanding the menu, I can see the notification shown on the alarms icon, so the notification did trigger.

I then restarted HA, tested the same, and again the notification dot is missing. Do I need to configure anything in order for the “dot” to show on the hamburger icon?

In my CCH configuration I have:

menu: show
options: hide
disable: false
notifications: show
header: true
voice:false

this is on HA 0.96.5

Did you install manually or with HACS, if manually did you add to a version number in your resources section, in your browser’s dev tools console (F12) does it display the CCH version number?

Via HACS. I just updated from 1.3.1 to 1.3.2 via HACS as well.

F12 shows

image

1 Like

It looks like there’s still a bug, sorry I missed it. Seems to render the notification dot differently on mobile than it does on PC. Going to have to fix that in a bit.

I was about to ask about this - I only use the CCH top bar in Mobile view, not in desktop. In desktop mode with the sidebar, I don’t see the dot either however it makes less sense there since the Bell is still visible in that case

If that helps, my mobile client is Android 9 / firefox

I just also noticed that in the brief interval before CCH loads and modifies the page layout, the hamburger menu from the original HA mobile interface is briefly visibile with the dot in it! but as soon as CCH re-renders the UI, the dot is gone.

Pushed a quick update 1.3.3 to address. Let me know if it helps.

1 Like

Yes! it worked. thanks for the uber fast turnaround!!

1 Like

Trying the Editor for cch in the GUI… spinning wheel of death… seems the editor js file is gone in this release.

CONFIRMED> I restore the editor from the 1.1.1 release (?) 14 days ago and it’s back

Spinning wheel no longer exists in latest release, it’s most likely a caching issue. If you don’t see the CCH version number in your browser’s console like the screenshot above, you’re either using a cached or old version.

Gaa… you’re right. Caching.
image

conditional styling: undefined? Should I just ignore that?

Ignore that for now, it’s fixed in the next release and doesn’t break anything.

1 Like

I was just thinking that it would be good if we could add exceptions based on query string in addition to user, user agent, or media query. That would make it easy to do things such as link to a tab in kiosk mode by just appending ?kiosk to the URL.

1 Like

Good idea, look for it in the next release.

Update 1.3.4

Sorry for the rapid fire releases here, I’ve had unexpected free time recently.

New Features:

  • query_string condition. Matches string following a question mark in the url. (e.g. query_string: kiosk would match for http://192.168.1.42:8321/lovelace/0?kiosk) Thanks to @Steven_Rollason for the suggestion.
  • compact_header you can set this to false to keep all of CCH’s features without the header being compacted.

Fixes:

  • Adjusted the menu button’s notification dot styling to handle some changes in the current beta 0.97.0b1
  • Fixed hide_unused not working when it was the only menu item being hidden.
  • Refactored menu option hiding a bit to try and track down a bug preventing them from hiding on some systems.

So, the new compact_header option brings with it something that I’ve been thinking about. CCH has expanded into much more than just customizing the header. I feel that with the added option of disabling the compactness of it all that maybe a name change is in order. “Compact Custom Header” just doesn’t really describe the project anymore.

Would love some name suggestions. The one’s I’ve been kicking around so far are: “Lovelace Interface Enhancer” & “Lovelace Interface Mod”. Might be nice to get a handful and do a poll.

1 Like

Lovelace Header Mod would jump to mind…

btw thanks for adding the named tab configuration under conditional styles, works perfectly !

1 Like

Hello,
Thank you for the great work with CCH!!

I have a similar question. Not for alignement but the make the header larger. I have a 10" tablet with a 1920x1200 screen and I find the header a bit too small. I would like so select its height if possible. I looked at the code (I am using the latest hacs version). I found the -64px but not the other one. Changing the -64px to eg -128px doesn’t do the trick…
Any way to adjust header height?
Thanks,
GV

1 Like

You have a couple of options. You could use the new option compact_header: false to use the larger default header while keeping all other functions of CCH or you could edit CCH’s code manually. I can’t really offer support with the latter, but I can give you a head start if you are determined.

When I made the comment above it was far easier to find the values you needed to change, since then there have been many changes that effect the position of elements in the header and they are very likely to change with versions to come (I have to update elements and add exceptions for just about every major version of HA).

CCH doesn’t change the size of any icon, so if you’re looking to make them larger as well you would have to write that portion.

The three values that are going to change the amount of space the header takes up & move elements around are:

  • -64px this is the amount the default header is shifted above the screen to hide it.
  • 111px this is the margin added to the top of the buttons to shift them down, back on screen.
  • 48.5px this is for the view’s margin and padding. This will need adjusted depending on how tall the header is in order to keep cards etc. aligned.

These values can be found multiple times throughout the project and when/where these values are used is important as well. Depending on config options, HA version, and existance of other elements these variables change. If you do end up changing the size of objects you’ll need to adjust left/right margins and padding as well.

If you’re up to the challenge, more power to you. All I can say is good luck and godspeed.