1.2.1 adds a fix for header backgrounds when using a single tab layout.
3 Likes
Forgive me… How did you do this? I don’t seem to be able to get it to work as an !include since the upgrade. It is almost certainly my spacing but I have tried everything I can think of 
this is what I use:
title: Mqtt Hub Lovelace
resources: !include lovelace/resources/resources.yaml
button_card_templates: !include lovelace/includes/button_card_templates.yaml
cch: !include lovelace/includes/compact_custom_header.yaml
decluttering_templates: !include lovelace/includes/decluttering_templates.yaml
views:
- !include lovelace/views/view_Home.yaml
- !include lovelace/views/view_Lights.yaml
etc etc
and
# https://maykar.github.io/compact-custom-header/Main-Config-Options/
#type: custom:compact-custom-header
#main_config: true
header: true
menu: show
options: show
swipe: true
swipe_animate: none
chevrons: true
#background: transparent
exceptions:
- conditions:
user_agent: iPhone
config:
menu: hide
notifications: hide
header: true
options: hide
conditional_styles:
- template:
tab:
12:
- icon: >
if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
else if (entity['sensor.family_home'].state == '1') 'mdi:account';
else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
else 'mdi:account-group';
2 Likes
I have some strange behaviour with cch…
I upgraded today to the newest version from pre 1.1.0 and all is well. Kind of.
I am using an include for the config like this:
resources:
!include lovelace_views/resources.yaml
button_card_templates:
!include lovelace_views/button_card_templates.yaml
cch:
!include lovelace_views/compact-custom-header.yaml
views:
- !include lovelace_views/view_system.yaml
etc...
and everything ‘appears’ ok. But… I have some cards that are constantly at random short intervals being redrawn.
If I comment out the cch: !include lovelace_views/compact-custom-header.yaml
everything is ok, no redraws. But strangely I still have a cch using whatever the default config is, e.g. no clock, default colours, etc.
I can’t find any other instances of cch: or custom-compact-header in my config and I have hard refreshed and restarted HA.
Anyone got any ideas what is going on here?
So that I can try to reproduce, what cards show this behavior and what does your CCH config look like?
Ok, this config gives the ‘redraws’:
ui-lovelace.yaml
resources:
!include lovelace_views/resources.yaml
button_card_templates:
!include lovelace_views/button_card_templates.yaml
cch:
!include lovelace_views/compact-custom-header.yaml
views:
- !include lovelace_views/view_system.yaml
etc...
resouces.yaml
- url: /community_plugin/compact-custom-header/compact-custom-header.js
type: module
compact-custom-header.yaml
active_tab_color: yellow
tab_indicator_color: yellow
notify_indicator_color: yellow
notify_text_color: black
menu: show
voice: clock
options: show
notifications: show
clock_format: 24
clock_date: false
swipe: true
# date_locale: en-gb
exceptions:
- conditions:
user_agent: Mobile
config:
voice: hide
conditional_styles:
- entity: notifications
condition:
state: false
button:
notifications:
hide: true
- template:
tab:
9:
- color: >
if (states["sensor.cycle1_running"].state == "Running")
"green";
else if (states["sensor.cycle2_running"].state == "Running")
"green";
else null;
- icon: >
if (states["sensor.cycle1_running"].state == "Running")
"mdi:fountain";
else if (states["sensor.cycle2_running"].state == "Running")
"mdi:fountain";
else
"mdi:flower";
The graph cards here get redrawn
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:config-template-card
entities:
- sensor.public_ip_address
card:
type: custom:hui-entities-card
title: "${'-- Internet --' + '\xa0'.repeat(22) + '(' + states['sensor.public_ip_address'].state + ')'}"
show_header_toggle: false
entities:
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_download
name: Download
color: green
- entity: sensor.speedtest_upload
name: Upload
color: red
hour24: true
points_per_hour: 2
height: 100
line_width: 3
font_size: 75
lower_bound: 10
show:
extrema: true
labels: false
# points: true
name: false
icon: false
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_ping
name: Ping
color: yellow
hour24: true
points_per_hour: 2
height: 50
line_width: 3
font_size: 75
lower_bound: 10
upper_bound: 30
show:
extrema: true
labels: false
# points: true
name: false
icon: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
name: Do Speed Test Now
# icon: mdi:speedometer
lock: true
tap_action:
action: call-service
service: speedtestdotnet.speedtest
size: 25%
color_type: card
color: rgba(20, 20, 20, 0.4)
layout: icon_name_state
styles:
lock:
- color: red
card:
- border-radius: 15px
- border-style: solid
- border-width: 1px
- border-color: '#e5e5e5'
- white-space: nowrap
grid:
- grid-template-areas: '"n"'
- grid-template-columns: 1fr
and on another view the yr weather and Windy.com cards get redrawn
# THIS IS FOR custom:layout-card
panel: true
cards:
- type: custom:layout-card
layout: horizontal
cards:
#=============================
#=== Animated DarkSky Weather
#=============================
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_text: sensor.dark_sky_current_text
loads of stuff here for the dark-sky-eather-card
- type: vertical-stack
cards:
#===============
#=== yr weather
#===============
- type: iframe
url: https://www.yr.no/place/United_Kingdom/England/London/meteogram.svg
aspect_ratio: 58%
#==============
#=== Windy.com
#==============
- type: iframe
url: https://embed.windy.com/embed2.html?lat=51.632&lon=-1.296&zoom=6&level=surface&overlay=rainAccu&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=51.533&detailLon=-0.317&metricWind=default&metricTemp=default&radarRange=-1
aspect_ratio: 80%
If I simply comment out the lines from ui-lovelace.yaml
cch:
!include lovelace_views/compact-custom-header.yaml
then everything is ‘happy’ except I get a default cch (which to me is the strangest thing of all).
Let me know if you need any other info. Thanks for looking.
As long as CCH is in your resources it will work, even with no config. It will just use the default values.
This is most likely happening because of your conditional styling, which explains why it only happens when your config is used. When using conditionals CCH needs to update the view as entities change. When that happens it seems it’s causing those cards to redraw. I’ll look into other methods to do the same thing that won’t effect those cards.
Knowing the effected cards helps, thank you.
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
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_closedsidebar_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. 
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:
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.
@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)