Compact Custom Header

DavidFW1960 · July 13, 2019, 6:09am

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%;}}'

mayker · July 13, 2019, 12:28pm

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

DavidFW1960 · July 14, 2019, 8:31am

Thanks. Ended up using Thomas’ Layout Card.

MagicMountainMan · July 14, 2019, 9:05am

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!

mayker · July 14, 2019, 1:05pm

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.

Jamie_Pryer · July 14, 2019, 7:49pm

+1.
would love to see this theme

mayker · July 14, 2019, 7:51pm

They’ve posted it here: Summer breeze

ThaNerd · July 15, 2019, 2:04pm

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…

ludeeus · July 15, 2019, 2:27pm

Like anything else in this well documented plugin/card/mod/element/lovelacethingy/? it’s in the documentation
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

alfredofenoglio · July 15, 2019, 11:46pm

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

mayker · July 15, 2019, 11:50pm

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

tom_l · July 16, 2019, 10:45am

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.

VDRainer · July 16, 2019, 11:05am

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

mayker · July 16, 2019, 2:54pm

@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?

tom_l · July 16, 2019, 3:07pm

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

VDRainer · July 16, 2019, 3:22pm

@mayker, sorry, but the error persists.

mayker · July 16, 2019, 4:08pm

What does your config look like?

jo-me · July 16, 2019, 6:28pm

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:

Is there a breaking change?

HA 0.95.4

mayker · July 16, 2019, 6:30pm

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

VDRainer · July 16, 2019, 6:36pm

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