mayker
(maykar (pronounced "maker" with a southern accent))
1
This thread is for showcasing interesting uses for and discussion of the template feature of Custom Header.
Since the template feature can render things like button & header text as HTML, you can do some interesting (but, entirely unintended) things.
This is an undocumented and unsupported feature.
Iād like to keep the main thread for Custom Header clear of these discussions, giant screenshots, and huge codeblocks. This is now the place for such things. Thanks for understanding!
wow, this split header is very nice! cool feature indeed.
And whats more, it opens up space for a cool marquee which we could template with the latest news, or alerts, or what have you. I could imagine it to show the notifications it now sends out, or even show conditional icons based on these alerts. Or, well, options galore.
Might be a nice feature request for 2020 Marquee support in split mode.
one small error in the log:
/local/lovelace/resources/custom-header.js?v=1.1.5:576:26048 Uncaught TypeError: Cannot read property 'split_mode' of undefined
though I canāt see anything resembling an issueā¦
<marquee>{{["marquee are really useless now in almost 2020","Number of updates in HACS: " ~ (state_attr('sensor.hacs', 'repositories') | count),"But I guess it has it's uses still"] | join(" - ")}}</marquee>
O boy, this will be a major challenge for the holidays using the vertical marquee here with local weather, so cool!
feature request: instead of this being the header-text, could you add a filler variable to be displayed in the header, next to the header-text? Id really love it to show the name of the instance, and then the marqueeā¦
Maybe this could be solved by changing the marquee template to have a fixed spot for the instance name (which now default to the lovelace title) ? dont think the title is available as a builtin variable yet ? https://maykar.github.io/custom-header/#templates/builtin
mayker
(maykar (pronounced "maker" with a southern accent))
9
Since the title is just static text I donāt think Iāll add it as a variable. You could make a stationary div next to the scroller with the text that you want in it, but Iām not about to start taking requests to write custom header templates that would get out of hand quickly.
mayker
(maykar (pronounced "maker" with a southern accent))
11
Iām not sure I completely understand what youāre looking for, but split mode puts the buttons and header text in one and tabs in the other and can be flipped by making footer mode true. I donāt think Iāll make it so you can mix and match elements around.
new to this divāing so not sure why it is above instead of next to the marqueeā¦
header_text: >-
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
#flip div:first-child {animation: show 10s linear infinite;}
@keyframes show {
0% {margin-top:-144px;}
5% {margin-top:-96px;}
33% {margin-top:-96px;}
38% {margin-top:-48px;}
66% {margin-top:-48px;}
76% {margin-top:0px;}
100% {margin-top:0px;}}
#flipper p {position:fixed;color:#999; }
</style>
Ha Rpi4:
<div id=flipper><div id=flip><div><div>
{{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
{{states('sensor.br_symbol')}}</div></div><div><div>
{{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
{{states('sensor.dark_sky_summary')}}</div></div><div><div>
also, the bottom sensor template (āHelderā in the marquee) only is displayed very shortly as you can see, is there an error in the code that causes that, or should it be there longerā¦
now see the long text is displayed on top of itself on my mobile deviceā¦ have to find a way to change that yetā¦
still, very nice this is possible at all.
mayker
(maykar (pronounced "maker" with a southern accent))
14
The first element and last element should be the same, thatās what gives it the illusion of looping. This is kind of an accidental feature of Custom Header and I donāt really want to start doing āhow to code in HTML and CSSā, butā¦
Replace Ha Rpi4: with this <div style='float: left'>Ha Rpi4: </div>
If you start adding more than 3 elements youāll need to edit the keyframes. A tip for this would be using multiples of 48px for the margins in the keyframes.
sure, appreciated. It would be a great idea though to create a separate header in the community on best practices and examples for Html and CSS, especially since so many custom cards start relying on it.
Donāt know if we can do this as āordinaryā members, but otherwise I would certainly invite you to do so as one of the main devās !
mayker
(maykar (pronounced "maker" with a southern accent))
16
I would say that I am much closer to an ordinary member of this community than a dev. I only really started coding about a year and a half ago when I picked up HA for the first time. Though Iāve learned a bit during that time, thanks mainly to the other developers in the community, Iām probably the last person anyone should go to for best practices.
I made an exception config for the iPhone in the meantime, using @ludeeus horizontal marquee, which works fine in itself.
It does show the odd ānā after each line and header though, donāt know how ro get rid of them. Since I already use the >- multiline indicator, I would have hoped this to be sufficient blocking the new lines? Maybe that is something in the footer itself, because I almost literally copied @ludeeus entry, and his screen movie clearly shows its working alright in the header.
Marquee support in split mode.
that would get out of hand quickly.
