Compact Custom Header

As long as you are not currently setting the theme by automation, it should remember the theme you selected using the method above.

1 Like

After enabling CCH for the first time using the raw .js files downloaded from github today, I see the various views listed in the header, but each view is empty.

Chrome, did a CTL-SHIFT-R refresh
I’m not seeing anything errors in developer tools.

from my ui-lovelace.yaml:

resources:

  • url: /local/mini-graph-card-bundle.js?v=0.3.0
    type: module
  • url: /local/tiles-card.js?v=0.1
    type: js
  • url: /local/custom-lovelace/weather-card/weather-card.js
    type: module
  • url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module

cch:

This was unrelated to CCH, but we got it all squared away.

1 Like

Feature request:
Hi, I have to come back to the theme setting stuff.
I have different users created for different tasks.
Two of them are kiosk_mode and should not have access to the side_menu.
But they should have the possibility to set their own theme. (a display needs a dark theme with high contrast, my wife wish to have it extremely coloured :slight_smile: )
I’ve created an input_select + automation which works. (frontend.set_theme)
But this service sets the generic theme for all users, which is not the goal here.
Setting the theme via the profile screen is the right behavior, but not accessabel in kiosk_mode.

We need now a service, which allows to set the theme only for the active profile or user.
Maybe we have to move this request to HA-Core.
cheers

Delete your automation and select the theme you want from under your profile.

This is is not a feature I would add. Use the methods mentioned above to set each users theme and then hide the sidebar from them afterwards.

Anyone else have trouble setting the background of the header bar? I tried disabling my theme and still had no luck. Even when it is the only thing I try and set it still does not work. I am on the latest HA version 95.4.

cch:
  background: url('/local/images/backgrounds/random_grey_variations.png')

Should be working fine & your config for it is correct. I use a background image as well.
Do you see the image if you go to (for example):

http://localhost:8123/local/images/backgrounds/random_grey_variations.png

Yeah it works and I can see it set in the html but there is css in app-header that seems to be overwriting it with primary-color and I cannot figure out why. Even though the inspect tool shows it cross out. But if I deselect it in the inspector I can see the background set by cch

Mind posting the png?

If the png has transparency, you may just be seeing through it to the background color (default is primary-color).

Try:
background: transparent url('/local/images/backgrounds/random_grey_variations.png')
to set the background color as transparent

The image for sure is not the issue but I tried that anyways to give it a shot. I am attaching two shots to show you that the value is set correctly but the other element is overriding it for some reason. When I uncheck like you can see in these shots it turns the bar black like I have it configured now. I was just using an image to make sure my color was being set right also.

my config right now

cch:
  menu: hide
  options: hide
  notifications: hide
  voice: hide
  header: true
  chevrons: false
  notify_indicator_color: "#e80000"
  swipe: true
  swipe_wrap: false
  background: 'rgba(0,0,0,0.9)'
  default_tab: 0

no matter what I enter for background:, there’s no change at all…
I simply want it to be transparent (btw not the tab-icons, only the bar color), but cant find a way to do so.

background: 'rgba(0,0,0,0.9)' #with or without quotes

or

background: transparent

please how would we enable the transparency?

@Mariusthvdb & @shauder

Strange, I’ve done your exact setup: Found the image you’re using, added it to the same folder, used the same config, on the same HA version.

I know these questions make me sound like a broken record, but I need to be sure.

Have you done a hard refresh (Ctrl+Shift+R)?

What version of CCH are you using?

Any errors in your browser’s dev-tools (F12)?

Mind sharing a screenshot like I have done below (right click and inspect the header)?

cch:
  background: transparent url('/local/images/backgrounds/random_grey_variations.png')

Broken record is fine I understand it is a strange issue!

I tried the hard refresh (before this I tried a new browser and clearing data). Still no luck.

Here is the screenshot. You can see the color set it in but it will not be that color unless I deselect the css background for app-header.

I also removed everything from the LovelaceUI since I was getting some errors. But I removed all of that to eliminate that as an issue.

The version of CCH I am using is ‘master’ though before I was using 1.20. I moved to master to try and fix it.

Even stranger. So there is this bit in the app-header's style tag:

transform: translate3d(0px, 0px, 0_px; background

I’m not sure what’s causing it yet, but the tag isn’t closed and includes an underscore that shouldn’t be there. It should look like this:

transform: translate3d(0px, 0px, 0px); background

This would certainly keep the background from displaying properly.

Could you disable CCH and post the same screenshot?

That is just FF truncating it but here is a shot with my fully selecting it then with CCH disabled

Cool, thank you. Think I’ve tracked this one down. Don’t have a solution yet, but it appears that background is ignored if you are only using a single view. If you add another view to lovelace does your background show?

You mad man you did it! It was the single view. When I duplicated my one view the background is set… lol

Cool, I’ll look into it more and get a proper fix in, but until then you could just add a view and then hide it with hide_tabs: 1

Thank you for this component and your help!