Updates
Updated earlier today, but didn’t get around to posting here till now.
- Slight adjustments to styling, tabs were getting cut off too soon before.
- Fixed the redirect when a user agent hides first tab
- Fix for am/pm config
1 Like
Has anyone managed to find a way that works to use an !include to have this in every view without repeating it?
I used to use that clever x-compact-header: &compact-header and - <<: *compact-header syntax but that really seems to break things!
thats the way how I use it:
##### Compact header #####
x-compact-header: &compact-header
- type: custom:compact-custom-header
user_agent: iPhone
options: true, false
and then at the end of each view
- <<: *compact-header
Yes, thanks that is how I used to do it but I have now split my lovelace config into separate files using !include and would like to !include the code for custom-compact-header so that I only have to maintain it in one place.
So you are locking yourself into yaml mode using include…
I think ‘locking myself in’ is putting it a bit strongly!
But yes I can’t quite bring myself to make the jump. I am not convinced the other mode (what is it called? 
) is really flexible enough. I have had a play with it on the new demo and it doesn’t seem to handle custom cards very elegantly. Also the actual area of screen real estate you get to edit the sections of config looks a bit small to me. I like to be able to see a lot more in one go for example with cards having a long list of entities.
Finally, I like to have comments, especially when trying out different things e.g. including and excluding entities.
Don’t get me wrong I think it is very impressive and I am sure if I was starting now I’d love it.
Well… to be honest for any serious editing, I’m using the ui-lovelace.yaml file and I cut/paste that in whole to raw editor… but if I just update a custom card, the custom-updater edits the yaml file and I just use raw editor to update the /.storage…
If you continue with includes as I understand it you are locking yourself into yaml mode and that will be going away from what I see so it’s madness (IMO) going that way now. The RAW editor handles custom cards perfectly and it’s only going to improve IMO.
If you use comments (as I do) they are deleted in the .storage version but as I’m maintaining the YAML and cutting/pasting I have the best of both possibilities.
Ok, so I’m thinking this through again. Clearly the built-in editor is going to be ‘The Future’ (although I suspect it will be a long time before it takes over entirely) but I am not following some of what you are describing.
What is the custom-updater, and what do you mean by the RAW editor?
How are you keeping your (unused) lovelace-ui in synch? Is that entirely a manual process that you must remember to follow at every change?
Finally, don’t you miss the tracker-card? It must be a pain keeping up with all the new versions of custom cards and having to copy them manually from GitHub every time they change.
Custom-Updater and the Tracker Card work together. I use that to update custom cards and components.
This only updates the yaml mode lovelace though so I then use the Lovelace UI Raw Editor to update the version in the .storage file.
I maintain the old lovelace yaml file and I do any major edits and changes there as the GUI editor sucks for things like stacks. I then copy and paste the contents of the yaml file into the raw editor.
So, I am on 0.2.9 and 0.86.3 but the custom header doesnt work anymore. Any pointers to what might be at fault?
Any errors in home assistant or in chrome dev tools pertaining to card (F12)? What does your config look like?
Well, I used to use yaml mode. Switched to ui editor. When looking at tracking card everything was updated. But I now realized that although it seems js files are downloaded one has to manually update version in raw config. Works like a charm again!
Atleast above is how I understodd it. Custom components seems to work as it should though. Updating doesnt require one to update version somewhere.
Yeah, when switching from yaml mode to storage mode you have to manually update resources in the UI’s raw editor as ui-lovelace.yaml is no longer used and custom updater no longer updates the resources.
Hi all,
since 0.85 I cannot see anymore my custom header neither in my frontend or in my custom component list (I’m using tracker).
Here’s my config:
title: Casa
views:
- title: At a glance
id: home
panel: true
icon: mdi:home
cards:
- type: custom:layout-card
cards:
- type: custom:compact-custom-header
- type: horizontal-stack
cards:
- type: picture-entity
title: Irene
entity: sensor.irene_status
image: /local/irene.jpg
- type: picture-entity
title: Marco
entity: sensor.marco_status
image: /local/marco.jpgPut the card inside the horizontal stack, in a vertical stack with the horizontal stack, or in any container card with the panel modes card when using panel mode.
Example of the card inside the horizontal-stack (might look strange, blank space, etc):
- type: horizontal-stack
cards:
- type: custom:compact-custom-header
- type: picture-entity
title: Irene
entity: sensor.irene_status
image: /local/irene.jpg
- type: picture-entity
title: Marco
entity: sensor.marco_status
image: /local/marco.jpg
Example in vertical stack with horizontal stack:
- type: vertical-stack
cards:
- type: custom:compact-custom-header
- type: horizontal-stack
cards:
- type: picture-entity
title: Irene
entity: sensor.irene_status
image: /local/irene.jpg
- type: picture-entity
title: Marco
entity: sensor.marco_status
image: /local/marco.jpgI’ve done as you suggested (and tried again pasting your code directly).
Now I have a blank box in my horizontal stack and no compact header:thinking:
Use the second method shown above to fix the blank box issue. Any errors in home assistant or in chrome dev tools pertaining to card (F12)?
Oh this is the new code
- title: At a glance
id: home
panel: true
icon: mdi:home
cards:
- type: custom:layout-card
cards:
- type: vertical-stack
cards:
- type: custom:compact-custom-header
- type: horizontal-stack
cards:
- type: picture-entity
title: Irene
entity: sensor.irene_status
image: /local/irene.jpg
- type: picture-entity
title: Marco
entity: sensor.marco_status
image: /local/marco.jpg
But then again I can’t see che custom header. Looking with F12 there is an error:
Here’s line 18 of code:
love_lace = panel.querySelector(‘ha-panel-lovelace’).shadowRoot;
You’re using an old version of the card, please update.
I would love to. In the wiki is declared that it will be automatically visible with tracker. But I can’t see it.