Compact Custom Header

I lost transparent header with beta 0.99, Anyone else?

Using background: transparent or background: 'rgba(0,0,0,0)' are both still working for me in 0.99.0b0. Mind sharing your config info and possibly a screenshot on github?

Made a PR on github :+1:

1 Like

Would it be possible to hide this left sidebar in the new version ???

You can do this in your HA user settings:

Click the user icon on the bottom of the sidebar and turn on Always hide the sidebar.

image

1 Like

Sorry for the dumb question. I was away from HA for a while. And a lot has changed, thanks !!!

I noticed this issue recently where the browser will hang if I do the following steps when Compact Custom Header is enabled:

  1. Click on my Profile and change the theme
  2. Click on Overview to navigate to the Lovelace home page
  3. Click on any other tab or sidebar icon

When this happens the CPU usage of the Chrome renderer process rapidly increases to almost 200% and the page becomes unresponsive and I need to kill the process. This happens in Chrome and Safari on my Mac and Chrome on my Android phone (on the phone the whole browser becomes unresponsive and I need to force stop it).

Disabling Compact Custom Header stops this from happening. It also doesn’t happen if I refresh the page after changing the theme (as long as this is done before trying to navigate to another tab).

I am using CCH 1.3.6 on Home Assistant 0.98.5

I can confirm same behaviour on my system with CCH 1.3.6 on Home Assistant 0.98.5

@coasting & @Steven_Rollason

To help me troubleshoot, please submit an issue on github.

Hello @mayker!
The gray background problam has been returned since the last Hassio update from 0.98 to 0.99.

@Mariusthvdb Sorry I didn’t reply, but I am thinking about this.

@krovachek Thanks! Someone reported this on github and there is a fix in the dev branch already. Will be in the next release.

2 Likes

@mayker thanx again!

For some reason I can’t exceptions to work with user: while it works fine with user_agent: or query_string:
My config:

cch:
  disable: false
  compact_header: true
  options: clock
  clock_format: 24
  clock_date: true
  exceptions:
    - conditions:
        user_agent: Android
        # user: tomoqv
        # query_string: kiosk
      config:
        kiosk_mode: true

The user name is the one (all lower caps) that I use to login to my phone, but it is not recognized by cch.
Can I see the user names that are registered on my hass.os anywhere?

https://maykar.github.io/compact-custom-header/Exception-Config/

“This is the Home Assistant user’s name, not username (if they’re different). You can look to the bottom of the CCH editor or in the HA user list to see which to use. This option is case sensitive.”

The user list can be found by clicking the “configuration” tab in the sidebar, then “users”

Thank you, I saw that instruction, but I can’t find the CCH editor (I use yaml) and in the HA user list, the name is not the same as the login name.

For an example, I just created a new user on my system. This user has the username “username” and the user’s name is “User Name”. It displays like this in the list:

So in CCH I would use “User Name” not “username”:

  exceptions:
    - conditions:
        user: User Name

Edit: I fear that I may made it more confusing by using “User Name” as the example, if so I apologize.

If you’ve forgotten which name was used or are still having issues you can go into your browser’s dev-tools (F12) while on HA and paste this into the console:

document.querySelector("home-assistant").hass.user.name

That will output the correct name you should use for the logged in user.

Perfect, thanks, that works!

1 Like

Release 1.3.7

Until I find the time to update the docs you can refer to this post and the previous pre-release’s post for new features/fixes. Will have the docs updated soon, but I wanted to get this release out since it has fixes for 0.99. Will be updating the version for legacy devices soon as well.

Added Features:

  • time_css: & date_css: add custom css for time and date seperately. Used like the custom css options explained in the previous release’s post.
  • default_tab_template: Use javascript templates for default tab. Template should return a tab number, path, or title. Used like conditional styling templates, example below.
  • edit_mode_show_tabs: set to true to always show all tabs when in edit mode.

Fixes

  • Occasionally the current tab was hidden from view when navigating with a button or using default_tab. The tab is now scrolled into view in those cases.
  • Non-template conditional styles were very buggy and sometimes wouldn’t survive a page reload. I’ve rewritten that portion to deal with those issues.
  • Added fixes for background images and a few other elements for HA 0.99

Default Tab Template Example:

cch:
  default_tab_template: >
    if (states["input_boolean.home"].state == "off") "home";
    else if (states["input_boolean.away"].state == "on") 2;
    else 0;
2 Likes

Ahh the default tab template would enable me to show a different view based on states correct? So for example if I make a shoppinglist view and my device tracker’s state is in the supermarket I could have it show the shoppinglist when I open HA?

Are conditions possible as wel? Or say default tab per user?