Compact Custom Header

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

Where can I find info on what can be setup via cch?
For example how to disable the clock, if its possible to place the notification icon elsewhere…

Like anything else in this well documented plugin/card/mod/element/lovelacethingy/? it’s in the documentation :wink:
https://maykar.github.io/compact-custom-header/

You should probably have looked at that before installing

If you use the UI to configure, there are even tips/hints/options on how to achieve this there :wink:

Sorry for my stupid question. But… where is the www/custom-lovelace/compact-custom-header/ folder?
Should I create these directories? Where exactly?
So far, I’m only using the conf file located here: /home/homeassistant/.homeassistant/configuration.yaml

This guide is a great resource on how to start using custom lovelace addons:

You need to create the folder and restart, its all in the guide

Anyone seeing this error?

https://10.1.1.100:8123/community_plugin/compact-custom-header/compact-custom-header.js:446:1 TypeError: buttons[button].shadowRoot is null

Seems to occur whenever I enter Configure UI mode.

Yeah, if i close UI Edit mode. (0.96.0b3)

1 Like

@tom_l @VDRainer

Please try the latest pre-release 1.2.9 and let me know if that helps. Are you on 0.96.0b3 as well, tom?

Hi mayker, no I’m not on the beta. I’ll give the pre-release a go tomorrow.

1 Like

@mayker, sorry, but the error persists.

What does your config look like?

After the latest update to 1.2.9 (from 1.2,x) i cannot see the time & date of the CCH button in the toolbar as it is pushed down due to a CSS margin:

image

Is there a breaking change?

HA 0.95.4

No breaking change, just a bug in that pre-release. It’s fixed in 1.3.0, but it hasn’t been released yet.

Edit: released now

1 Like

@mayker, everthing default, did a new install for testing.
Should i post it anywhere?