Compact Custom Header

cch:
  menu: overflow
  #background: rgba(38, 49, 55, 0.8)
  exceptions:
    - conditions:
        user_agent: Mobile
      config:
        default_tab: testpanels 
        menu: show
        options: hide
        swipe: true
        swipe_animate: fade
        background: var(--primary-background-color)
        #background: rgba(38, 49, 55, 0.8)
        active_tab_color: "var(--primary-color)"
#        hide_tabs: 13,14,15,16,17
    - conditions:
        user: Rainer
      config:
        default_tab: tpad_home 
        background: var(--ha-card-background)
        #background: rgba(38, 49, 55, 0.8)
        active_tab_color: "var(--primary-color)"
        #notify_indicator_color: yellow
        #notify_indicator_color: "var(--primary-color)"
        #notify_text_color: rgba(38, 49, 55, 0.8)
    - conditions:
        user: TPad
      config:
        disable_sidebar: true
        menu: overflow
        options: clock
        background: rgba(38, 49, 55, 0.8)
        active_tab_color: "var(--primary-color)"
        #notify_indicator_color: "var(--primary-color)"
        #notify_text_color: rgba(38, 49, 55, 0.8)
        clock_format: 24
        clock_date: false
        #date_locale: de-de
        hide_tabs: 0,1,2,3,4,5,6,7,8,9,10

Thanks @mayker, 1.4.9 works now. :+1:

2 Likes

I’m on 1.4.9 and now I’m getting the time shifted over to the left covering the last tab.
image

(Cache cleared: F12, left click hold on Reload, ‘Empty cache and hard reload’)

Config:

menu: show
voice: clock
options: show
clock_format: 24
clock_date: false
swipe: true

exceptions:
  - conditions:
      user_agent: Mobile
    config:
      voice: hide
  - conditions:
      user: "Hall Panel"
    config:
      kiosk_mode: true
      hide_tabs: 0 to 21

For using view title to hiding/showing tabs should I use any quote marks or anything else? It do not work for me.

Hi,

I’m in the process migrating from Domoticz to Home Assistant and still figuring things out. One thing I can’t find any solution for is the placement of the notification dot when using CCH:

Aantekening%202019-11-16%20202521

My CCH config:

menu: overflow
options: clock
voice: hide
clock_format: 24
swipe: true
swipe_skip: 6,10

Cheers!

CCH is being replaced soon with a completely new project. CCH has many issues and small changes in HA can cause big issues in multiple places in CCH (not HA’s fault :slight_smile: ).

The new project aims to fix these issues, make it much easier to fix things when something in HA changes, add many new features not possible with how CCH currently works, and much more.

I apologize that I cannot give as much time to fixing and troubleshooting CCH at the moment, but be assured it’s for the best. That being said, please be patient while it is being worked on and to put a band-aid on the recent issues on this thread:

@klogg For the moment it’s best not to use the voice icon as a clock or in overflow. I put some duct tape on an issue caused by the voice element changing, but can’t really get into a complete fix.

@Zucht Try adding notify_indicator_color: transparent to hide the notification dot for the time being.

8 Likes

Thanks for all the effort @mayker. Looking forward to the next project!!

not sure if this has to do with the update, but since that, I cant get the right chevron to work. Clicking it does nothing. Manually swiping to the right, makes the right chevron disappear, which should happen of course, but then the most right tab/icon is dead…
HA 101.3, CCH 1.4.9

Hi folks. Long-time listener, first-time caller here… Please forgive me if this has already been asked, but I have an issue that I haven’t seen called out in any of the searches I’ve done.

I have a custom view defined for mobile devices. When accessing via a mobile device, I have CCH configured to hide the home tab (#0) and display my mobile view as the default instead. This all seems to work fine until I navigate somewhere else (map, logbook, etc.) and come back (via the Overview button). In those cases, I land back on the (hidden) Home tab.

Has anyone else run into this? Am I just doing something wrong? Or is this to be expected?

Have you set the default_tab?
Cause I cannot simulate you issue with follwoing setup. No CCM for PC and different layouts for mobile and tablet (home dashboard)

cch:
  disable: false
  exceptions:
    - conditions:
        user: Kiosk
      config:
        default_tab: KioskHome
        disable: false
        disable_sidebar: true
        hide_config: true
        hide_help: true
        hide_unused: true
        menu: false
        options: false
        show_tabs: 'KioskHome,KioskSettings,KioskBedroom,KioskLiving,KioskKids'
        swipe: true
    - conditions:
        user_agent: Android
      config:
        default_tab: MobilHome
        disable: false
        disable_sidebar: true
        hide_config: true
        hide_help: true
        hide_unused: true
        menu: false
        options: false
        show_tabs: 'MobilHome,MobilStatus,KioskSettings,KioskBedroom,KioskLiving,KioskKids'
        swipe: true

I have the same issue.
But I’m waiting for the new project

@TriStone I have default_tab set for my mobile devices, but not for anything else.

Though, it looks like I may have missed an update somewhere. My tabs are identified by their IDs, not their names. If it helps, here is my config.

cch:
  exceptions:
    - conditions:
        user_agent: iPhone
      config:
        default_tab: '1'
        disable_sidebar: false
        hide_config: false
        hide_help: false
        hide_tabs: '0'
        hide_unused: false
        menu: show
        notifications: show
        show_tabs: []
        voice: show
        options: show
  swipe: true
  swipe_animate: swipe

not sure if this will be debugged by @mayker so may have to revert to a previous version.
Just noticed the bug isn’t there in my iPhone.

Also noticed one can click about halfway between the icons to the left of the most right icon, either being the chevron or the most right tab.

edit

It is there on the IPhone too, just smaller, so less obvious…

@mayker First off…thanks for making this awesome customization. I’m fairly new to Hassio and it was the little projects like yours that helped convince me to jump ship.

I upgraded to 102 today. My header has returned (it does minimize when I scroll down)
image

and I’m getting this error in the log every time I refresh lovelace.
Cannot read property 'querySelector' of null 2:02 PM components/system_log/__init__.py

I reached out to a friend who also uses CCHeader and he is experiencing the same. Thoughts?

1 Like

No problems here with CCH and 0.102.1
Latest version (1.4.9) of CCH?

1 Like

Same here, so I’d guess, there must be something else… :frowning:

1 Like

@VDRainer @paddy0174
Have you both done a manual refresh of your web interfaces? It looked fine for me until I refreshed the page manually.

@VDRainer, thanks for the version check. I’m running 1.4.7 so I will update and report back.

Updated to 1.4.9. …Issue persisted. Reinstalled 1.4.9… same.
Then sat at my desktop and did a ctrl+F5 to force complete refresh and it works fine on my desktop. I still have the issue on my HA android app and android chrome. Now to figure out how to force a refresh on those interfaces.

Edit:

  • Cleared the HA and Chrome app cache on android and we’re good to go

Not sure if the plugin version, the clearing of the app cache or a combination of both fixed it.
Thanks for the responses.

Same issue here.

I’ve restored 1.4.8, which solves the issue. It brings back this error in the log though:

32

though it doesn’t seem to have any effect (I can see in the frontend just yet…)

would be best to have a version without either issue…:wink: