The problem is eliminated. Thanks again!
1 Like
suddenly noticed that I might experiment a more structural issue of CCH not auto updating the screen/display.
While I have reported my custom icons not the be updating with the state of the sensors they are using (while these same templates/sensors do change in the regular windows) (and which could have been caused by not having ‘return’ in the templates) I now notice that changing a theme, doesn’t automatically change the CCH color either. I need to manually refresh the window to get the icons, and the theme colored menus bar to adapt accordingly.
after theme change:
and a refresh:
this is on both Safari and Chrome Mac, Ha 99.2 CCH 1.4
I noticed this since updating to home assistant 0.99 too. The header colour does not update when the theme is changed. It takes a page refresh. I assumed it was a home assistant problem but it could be CCH. No idea how to tell which is responsible.
From what I’ve noticed, if you change the theme in the user options it will update correctly, but using any other method to change the theme won’t update the header color (keeps it the color it would be for the back-end selected theme. Using frontend.set_theme will only effect the view below the header).
This behavior is the same with or without CCH. You can always check by temporarily removing CCH from your resources to see if the behavior has changed.
How are you changing the theme? Is this what you’re seeing as well?
Edit: This is not the case, more info below
strangest thing: I’ve commented out the ccc: config in the ui-lovelace.yaml and no matter what I try, it keeps loading the ccc menu bar… no matter how many refreshes, either the 3 dots or the browser hard refresh, cache clear … Safari and Chrome. Do I need a restart for that??
forget about the above, I missed seeing the chevrons, and now check alright. But you’re right, no difference, doesn’t work in either case, for the theme to stick, we need a refresh.
Im using a small package which has an input_select in the frontend. Not using the selector in the menu for the user profile, (I’ve had issues before getting it to set the backend selection after having selected another theme there).
What I could test was the effect in states (regular HA). Change is immediate, and faultless. So would you suggest here this is a HA bug rather than a CCH issue?
Will raise an issue if so
Upon further inspection, this looks to be a CCH issue. Not sure if it was the browser I was using at work or a caching issue, but this now appears to work as expected in HA and in CCH the header color does not change. Just added a fix for the next release.
2 Likes
Great! If you need a tester let me know 
Confirmed 1.4.1 fixes the issue. Thanks for the rapid support!
I’m trying to hide all tabs and make the alarm tab the only allowed tab when my alarm is in a certain state e.g. armed_away, but I only want to do this for a specific user (e.g. UserX, this is the name, not the username).
I can’t get it to work. I’ve gone through the documentation, but I’m probably not interpreting it correctly. This is what I have right now:
...
exceptions:
- conditions:
user_agent: Mobile
config:
menu: show
options: show
# user specific configuration.
- conditions:
user: UserX
config:
default_tab: lights
hide_tabs: tab_x,tab_y
hide_unused: true
disable_sidebar: true
conditional_styles:
- entity: alarm_control_panel.alarm
condition:
state: armed_away
tab:
lights:
hide: true
tab_x:
hide: true
tab_y:
hide: true
tab_z:
hide: true
What am I doing wrong? Also… is there maybe a better way to accomplish this?
The exception’s conditional_styles should be indented to be part of UserX’s config:
- conditions:
user: UserX
config:
default_tab: lights
hide_tabs: tab_x,tab_y
hide_unused: true
disable_sidebar: true
conditional_styles:
- entity: alarm_control_panel.alarm
condition:
state: armed_away
- tab:
lights:
hide: true
- tab:
tab_x:
hide: true
- tab:
tab_y:
hide: true
- tab:
tab_z:
hide: true
Not yet.
Thanks for putting me into the right direction. I indeed had to place conditional_styles under config, but it didn’t work with all of the tabs under tab like that.
I actually had to define it like this:
...
- conditions:
user: UserX
config:
default_tab: lights
hide_tabs: tab_x,tab_y
hide_unused: true
disable_sidebar: true
conditional_styles:
template:
- tab:
lights:
display: >
if (states['alarm_control_panel.alarm'].state == 'armed_home') 'hide';
else if (states['alarm_control_panel.alarm'].state == 'armed_away') 'hide';
else if (states['alarm_control_panel.alarm'].state == 'armed_night') 'hide';
else 'show';
- tab:
tab_x:
display: >
if (states['alarm_control_panel.alarm'].state == 'armed_home') 'hide';
else if (states['alarm_control_panel.alarm'].state == 'armed_away') 'hide';
else if (states['alarm_control_panel.alarm'].state == 'armed_night') 'hide';
else 'show';
- tab:
...
Which is a lot of code when you basically want to hide all of the tabs except for the e.g. alarm tab (in this case).
Is there maybe a way to use hide_tabs in combination with conditions?
My goal is basically to only show the alarm tab when the alarm is armed in any way.
That was my bad, missed that on the copy paste. Editing post to fix.
Though, if you want to use javascript templates here’s a different way to go about that:
template:
- tab:
lights:
display: "return states['alarm_control_panel.alarm'].state.includes('armed') ? 'hide' : 'show' "
- tab:
tab_x:
display: "return states['alarm_control_panel.alarm'].state.includes('armed') ? 'hide' : 'show' "
Conditionals can for sure use some improvements, but they currently fit under the “working” category so aren’t high on the priority list. They will get some love when I get the time.
Thanks! That works perfectly with a lot less code. Didn’t think of using it like that at all.
I can totally understand that. At least it is working now with the least amount of code.
I might even try to put the repeating code into a separate template file, so I can reuse it. Not sure whether it will work, but I’ll try in a bit and if it doesn’t I’ll just use this.
In it’s current form it won’t work like that, but that is one of the first thing’s I’ll be adding to conditional templates: a way to create variables that can be accessed by all templates. A close second on the list would be allowing tab lists or groups in conditionals/templates.
You could cheat it a bit now by using global variables, but it would be much better to add something like that to config.
Awesome, sounds like a great improvement!
Edit:
For anyone wanting to do the same I’m doing, I changed the armed in the following:
states['alarm_control_panel.alarm'].state.includes('armed')
to armed_ to not include the disarmed state.
1 Like
Tried out this on my Kindle, found I needed CCH for older devices & unsupported browsers. · Issue #185 · maykar/compact-custom-header · GitHub
It doesn’t appear to hide the header, and the config bar seems to be missing. I made sure type: js, what else am I missing? I see that on my browser debug has the warning:
compact-custom-header.js?v=0.0.3:1 Uncaught SyntaxError: Identifier ‘LitElement’ has already been declared
at compact-custom-header.js?v=0.0.3:1
What does your resources section look like?
Edit: Updated the legacy version. Give it a shot. Also, make sure you don’t have CCH twice in your resources.
Hi,
is there a way to configure background to a specific tab only? let say for tab 2 and not for all tabs.
- conditions:
user: test
# user_agent: Mobile
# media_query: "(max-width: 600px)"
config:
default_tab: 2
# options: clock
# clock_format: 24
# hide_tabs: 0,1,2,3,4,5,6,7,8,9
background: center / cover no-repeat url("/local/back2header.png") fixed
Thank you!