Compact Custom Header

Great, thanks.
Is this new or have I just not noticed it in older versions?

Depends, there were quite a few changes in the move away from a card. I think I have an idea of what’s causing it and it should be an easy enough change if I’m right. Won’t be able to check it out today, but I’m on it.

1 Like

@klogg pull CCH’s “master” branch from HACS and let me know if it helps.

Yes it looks like it has.
Thanks!

1 Like

I am aware that the current version of CCH does not work in HA beta 0.96.0b0. I have been working on an update for it (still a few kinks to work out) and will have something up by the end of the day.

1 Like

Pre-release 1.2.3

With the addition of the new sidebar to HA comes a few changes to CCH.

This is specifically for the current HA beta 0.96.0b0. The changes were made to be backwards compatible so using this release on versions lower than 0.96.0b0 should see no difference.

I’d like to mention that CCH will not add features to modify the new sidebar (beyond the 2 mentioned below). The sidebar is accessible outside of Lovelace and is needed to navigate when not in the Lovelace view. CCH should not modify anything outside the scope of Lovelace.

There are 2 options that hide and disable the sidebar completely: kiosk_mode and the new option disable_sidebar. These options are to prevent users from accessing the sidebar when it is unwanted. To use the new disable_sidebar option, just set disable_sidebar: true, this option will hide the menu button as well.

Changes:

These options no longer have any effect when using HA versions 0.96.0b0 or higher.

  • Anything related to the notifications button as it no longer exists in the header.
  • sidebar_closed
  • sidebar_swipe

Known issues (being worked on):

  • Menu button’s appearance behaves strangely when HA displays/hides the button automatically on window resize.
  • Notification indicator on the menu button cannot be styled yet
3 Likes

Thank you very much @mayker, for your effort for hiding the sidebar.
I tried it and it works, but it doesn’t feel nice without the notifications. :cry:
But that’s not your part, i think!

I meant to report this before but for a while I have been unable to access the configuration in chrome on my iPad. Tapping the 3 dots Works but selecting configure is totally unresponsive. Works fine on PC.

If you disable CCH I think you’ll find you have the same issues. I’ve had troubles with this in the past and someone posted an issue on it. Both times I’ve found that CCH wasn’t the culprit. On my iPad, firetablet, and android phone I occasionally cannot click that button or its options for whatever reason.

1 Like

You mentioned in another thread about updating to iOS 13 beta, this is one of the several broken things in that. If you visit http://demo.home-assistant.io/ on your iPad or iPhone it will exhibit the same behavior. You can open the 3 dots menu but not tap any of the links unfortunately. Hopefully Apple fixes the issue in one of the next iOS betas.

1 Like

Ah Thanks Sean! That makes sense.

2 Likes

Hoping someone can help, for the life of me I can’t get the tab/view icons to change colour to match my cch config, they always seem to default to something else that I think my theme is overriding. At the moment it looks like:

cch

Whereas I want the view icons to match the menu icon, which is the primary color of my theme. Is there a particular theme color that it diverts to?

My code is:

cch:
  main_config: true
  menu: show
  options: show
  notifications: overflow
  voice: overflow
  header: true
  chevrons: false
  swipe: true
  swipe_wrap: false
  background: 'rgba(0,0,0,0)'
  default_tab: 2
#  all_buttons_color: var(--primary-color)
#  all_tabs_color: var(--primary-color)
  button_color:
    menu: var(--primary-color)
    main: var(--primary-color)
    home: var(--primary-color)
    voice: var(--primary-color)
    options: var(--primary-color)

Any help would be appreciated! Also, if someone can tell me what theme variable is the right one for menu texts I would appreciate it, as at the moment it can;t be read as it is the same as my primary menu colour.

menu

@benm7 This is a bug with all_tabs_color, it’ll be fixed in the update I’l be releasing later tonight. Working on a few more fixes and tweaks before releasing. Edit: Fixed in the latest release

I believe the one you’re looking for is var(--paper-listbox-color)

So feeling stupid now… Using 0.96.0b2 and because of the new sidebar it’s screwing up my weather card on my iPad when in landscape mode… The 1cm sidebar is causing havoc. So wanting to use this:

cch:
  swipe: true
  exceptions:
    - conditions:
        user_agent: iPad
        media_query: "(max-width: 500px)"

To try and force 2 columns instead of 3. I have the correct user agent returned by Google… well it contains iPad anyway which I think is all that’s required… and I look at the link in the doc to here https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

I kinda think I just need to do something like this

cch:
  swipe: true
  exceptions:
    - conditions:
        user_agent: iPad
        media_query: "(max-width: 500px){.col-s-1 {width: 50%;} .col-s-2 {width: 50%;}} "

Is that right? Or how do I force 2 columns instead of 3 in landscape mode on my iPad only? Portrait mode shows 2 columns anyway.

Needless to say it isn’t working - still 3 columns. Also tried 1024 as max width…

This doesn’t work either:

media_query: '(min-width: 1024px) and (orientation: landscape) {.col-s-1 {width: 50%;} .col-s-2 {width: 50%;}}'

The media_query option is just another condition for an exception. If you use media_query: "(max-width: 500px)" any device that has a screen width of less than or equal to 500px will use the CCH config in that exception. CCH doesn’t change the layout of Lovelace views.

You could use a media_query exception in CCH to show a view that uses layout-card for that device

Thanks. Ended up using Thomas’ Layout Card.

So this might be a really stupid question, but is there a way to figure out what the user is in YAML mode? I used to use the card before I switched to full YAML and have somehow lost the ability to hide different tabs. I have roommates and they all have different usernames in Home Assistant, but I guess the actual user is different?

Thanks!

Not a stupid question at all. If you have a bunch of users it would be difficult to know what they used as their user’s name.

The easiest way would be to go into the HA sidebar and select “Configuration” then “Users”. The names listed there are the user’s names.

+1.
would love to see this theme

They’ve posted it here: Summer breeze

1 Like