Yeah, throw one in there just to remind me. Thanks!
Will do 
1 Like
someone can help me integrate the custom header on this card, I have tried a thousand ways and I do not get it, thanks
- title: Floor plan
panel: true
icon: mdi:floor-plan
cards:
- type: picture-elements
image: /local/floor-plan/plano.png
elements:
- type: state-badge
entity: sensor.temperatura_da_casa
style:
top: 30%
left: 8%
font-size: 12px
- type: state-label
entity: sensor.o_tempo_temperature
prefix: "Temperatura exterior "
tap_action:
action: navigate
navigation_path: /lovelace/2
style:
top: 98%
left: 12%
font-size: 15px
- type: state-icon
entity: switch.interruptor_1
title: Luz estanteria
tap_action:
action: toggle
style:
top: 7%
left: 38%
--iron-icon-height: 52px
--iron-icon-width: 52px - title: Floor plan
panel: true
icon: mdi:floor-plan
cards:
- type: vertical-stack
cards:
- type: picture-elements
image: /local/floor-plan/plano.png
elements:
- type: state-badge
entity: sensor.temperatura_da_casa
style:
top: 30%
left: 8%
font-size: 12px
- type: state-label
entity: sensor.o_tempo_temperature
prefix: "Temperatura exterior "
tap_action:
action: navigate
navigation_path: /lovelace/2
style:
top: 98%
left: 12%
font-size: 15px
- type: state-icon
entity: switch.interruptor_1
title: Luz estanteria
tap_action:
action: toggle
style:
top: 7%
left: 38%
--iron-icon-height: 52px
--iron-icon-width: 52px
- type: 'custom:compact-custom-header'
it works!
many thanks
Really loving this card. It’s great for smaller devices like my iPhone to get some more screen space back.
As I’ve only just started using this, I’ve noticed that everytime I refresh lovelace I get the message System service_log/write called show up on the bottom left of the screen. Looking at dev-info to view the logs show this:
2019-03-04 11:00:36 ERROR (MainThread) [frontend.js.latest.201902200] https://my_url/lovelace/home:0:0 Uncaught
Loading up DevTools in Google Chrome shows this:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at https://my_url/customcards/github/maykar/compact-custom-header-editor.js?v=1.0.1b1:232:16
Is this an issue with Compact Custom Header or with the frontend as per the error in my logs?
most likely caching…
I’ve tried on multiple browsers. It’s the same thing. It’s not a caching issue. Even used browsers I never use.
I still call caching… I have seen these issues in the past. Removing cookies and deleting all website data fixes them for me… I don’t see any issue with this card.
Just used firefox. Cleared it all out to make sure. I don’t normally use it, but thought I’d try something else. No cache, cookies, etc are saved. Still getting an error. Although the logs are different when using Firefox. It shows the following, which seems to be the same error that Chrome was giving.
2019-03-04 11:49:52 ERROR (MainThread) [frontend.js.latest.201902200] https://my_url/customcards/github/maykar/compact-custom-header-editor.js?v=1.0.1b1:232:0 NotSupportedError: Operation is not supported
This is in the console for Firefox.
NotSupportedError: Operation is not supported compact-custom-header-editor.js:232
<anonymous> https://my_url/customcards/github/maykar/compact-custom-header-editor.js?v=1.0.1b1:232
InnerModuleEvaluation self-hosted:4362
self-hosted:4351
evaluation self-hosted:4315
Here is line 232 from compact-custom-header-editor.js.
Ok how about chrome? There are a few issues with firefox till the new version in March. (issues with custom-cards)
What version of HA are you running, do you have javascript_version: latest under frontend: in your configuration.yaml, can you share your config for the card including resources?
Chrome is having an issue with the same line.
Running 0.88.2, yes I have javascript_version: laterst under frontend:
My current config for the card on my first view is as follows:
- type: custom:compact-custom-header
main_config: true
background_image: true
voice: hide
exceptions:
- conditions:
user_agent: iPhone
config:
menu: overflow
notifications: overflow
and I have this at the resources: on my ui-lovelace.yaml file
- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
type: module
- url: /customcards/github/maykar/compact-custom-header.js?track=true
type: module
I haven’t used the new version of custom_updater myself (slacking I know), but I think your problem is that you’re importing the card twice. Remove this one:
- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
type: module
That was it!!! WOW!! 
I thought it was an odd way to use custom updater with your card, but it’s written there in your instructions.
Those are instructions for “Manual installation” or " Installation and tracking with custom_updater", not both
Ah, ok. I miss understood somehow.
Which is the better one to use? I now realise that one is loaded externally, and the other is kept locally.
Manual installation is, well, manual. You need to update and install manually.
Custom_Updater is a component with a card that helps automate the upgrade process. You need to install it and it’s wiki can be found here:
All good. Your approach to working with custom_updater is different to the other stack of card I use. I’ll stick with the manual way for now.
But thanks for your work on this card. It’s awesome and make use on smaller devices much better. Keep up the good work. 
1 Like
Like I said, I have yet to use the new version of custom_updater, but the instructions for it in my readme were written by the creator of custom_updater.