You will need to add more keyframes and adjust the timing a bit in the animation: show 10s part. 10s stands for 10 seconds.
The flipper div is the the one that contains all the other divs, removing it may initially look like it does nothing, but then you wonât have access to a containing element in order to add css to. It may also cause things to shift around.
This will be trial and error and I cannot go through the process of customizing templates for you.
right⌠thanks for explaining, Ill put it back immediately.
Appreciated, and, btw, you are doing it nonetheless 
which is very much appreciated, let me stress that once again.
Donât understand why this doesnât work:
custom_header:
compact_mode: true
tabs_color:
'0': >-
'{% if states.binary_sensor.updater.state == "on" %}red{% else %}white{%
endif %}'
'1': >-
'{% if states.group.all_lights.state == "on" %}yellow{% else %}white{%
endif %}'
'3': >-
'{% if states.alarm_control_panel.thuis_alarm.state == "armed_away"
%}red{% else %}green{% endif %}'
'4': >-
'{% if states.sensor.postnl_delivery.state == 0 %}white{% else %}red{%
endif %}'
tab_icons:
'3': >-
'{% if states.alarm_control_panel.thuis_alarm.state == "disarmed"
%}mdi:shield-check{% elif states.alarm_control_panel.thuis_alarm.state ==
"armed_away" %}mdi:shield-lock{% elif
states.alarm_control_panel.thuis_alarm.state == "armed_home"
%}mdi:shield-home{% elif states.alarm_control_panel.thuis_alarm.state ==
"pending" %}mdi:shield-outline{% elif
states.alarm_control_panel.thuis_alarm.state == "triggered"
%}mdi:bell-alert{% else %}mdi:shield-check{% endif %}'
'4': >-
'{% if states.sensor.postnl_delivery.state == 0 %}mdi:mailbox{% else
%}mdi:mailbox-up{% endif %}'
Output in developer tool seems correct:
â0â: >-
âwhiteâ
â1â: >-
âyellowâ
â3â: >-
âgreenâ
â4â: >-
âredâ
tab_icons:
â3â: >-
âmdi:shield-checkâ
â4â: >-
âmdi:mailbox-upâ
Using >- in yaml already tells it that itâs a string so there is no longer a need for quotes and adding quotes at that point would result in the quotes being part of the returned string.
Try this:
custom_header:
compact_mode: true
tabs_color:
'0': >-
{% if states.binary_sensor.updater.state == "on" %}red{% else %}white{% endif %}
'1': >-
{% if states.group.all_lights.state == "on" %}yellow{% else %}white{% endif %}
'3': >-
{% if states.alarm_control_panel.thuis_alarm.state == "armed_away" %}red{% else %}green{% endif %}
'4': >-
{% if states.sensor.postnl_delivery.state == 0 %}white{% else %}red{% endif %}
tab_icons:
'3': >-
{% if states.alarm_control_panel.thuis_alarm.state == "disarmed" %}mdi:shield-check
{% elif states.alarm_control_panel.thuis_alarm.state =="armed_away" %}mdi:shield-lock
{% elif states.alarm_control_panel.thuis_alarm.state == "armed_home" %}mdi:shield-home
{% elif states.alarm_control_panel.thuis_alarm.state == "pending" %}mdi:shield-outline
{% elif states.alarm_control_panel.thuis_alarm.state == "triggered" %}mdi:bell-alert
{% else %}mdi:shield-check{% endif %}
'4': >-
{% if states.sensor.postnl_delivery.state == 0 %}mdi:mailbox
{% else %}mdi:mailbox-up{% endif %}
Thanks! This worked. Had to add blockquotes to the mdi icons for the alarm tab but now it works like a charm!!!
Sorry, icons donât change based on the conditions. The alarm icon is not visible at all. I tried to remove the âelifâ-statements but that also didnât result in a visible icon. The colors are changing correctly by the wayâŚ
It now works correctly. Removed hard enters
Should templates work in default_tab? The below doesnât appear to work, it just defaults to the first tab (no errors as far as I can tell):
default_tab: >-
{{ 1 if states.input_boolean.input_boolean_test.state == "on" else 0 }}
Youâve got input_boolean in there twice.
default_tab: >-
{{ 1 if states.input_boolean.test.state == "on" else 0 }}
No, input_boolean.input_boolean_test is the correct name (a little redundant, I know) of an input_boolean I use for testing purposes, but it actually seems to be working now. I think I may have missed the â-â character when I actually entered it in the Lovelace editor, so the whitespace messed it up.
1 Like
There is some really great stuff on this thread and I am inclined to use some of this. I do have a question though. We are able to change the button-icons as stated in the docs. However we can not change the path (which makes changing the icons seem pointless for these buttons) I mean buttons and not the tabs.
My question would be, is it possible to change the buttons behavior? For example the options menu has 3 dots. I can change the icon, but it would still open that same menu (hence why I think changing the icon seems pointless). Is there a way we could point those buttons to open a view instead? If so would anyone know how?
Changing this into text however is a great feature and if there is no way to change those buttons I might opt going with text instead.
Thanks for all your great examples etc!
Changing icons can alert you to many things and have been used in interesting ways. A doors view shows an open door icon when somethings open and a door shut icon otherwise, a occupancy view will show one icon when people are home and a different one when they are not, a media view will show a play icon when something is playing, etc. Those are just some examples, but not including this feature for the buttons as well would just lead to someone adding it as a feature request. I disagree that it is pointless.
I may at some point add an example of this, but you could create your own icon like iantrich does with his weather icon and add code for it to link somewhere or even just make an image that links somewhere. If you can do it in a webpage, you can pretty much do it in a Custom Header template, but as Iâve said before, I do not want to start making a custom templates for people and this is an unsupported feature.
I donât want to remove the core functions of buttons in HA by allowing them to be changed. That will just lead to problems.
Ah ok that makes perfect sense, thanks for clarifying. Yes I already mentioned the text to be a great feature.
I understand you donât want to make examples for everyone that would be crazy, you would never have free time that way haha. I will use it the way you intended it then. I was just wondering if anyone managed to do something like that as I havenât seen any here.
Anyways thanks for your reply, I will get to work again haha!
so I made the direction of the vertical marquee selectable using:
header_text: >-
{%- if is_state('input_boolean.ch_use_header_text_template','on')-%}
{%- if is_state('input_boolean.ch_header_marquee_up','on')-%}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
#flip div:first-child {animation: show 10s linear infinite;}
@keyframes show {
100% {margin-top:-144px;}
83% {margin-top:-96px;}
67% {margin-top:-96px;}
50% {margin-top:-48px;}
33% {margin-top:-48px;}
17% {margin-top:0px;}
0% {margin-top:0px;}}
#flipper p {position:fixed;color:#999; }
</style>
<div style='float: left'>Ha Rpi4: </div>
<div id=flip><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
{%-else-%}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
#flip div:first-child {animation: show 10s linear infinite;}
@keyframes show {
0% {margin-top:-144px;}
17% {margin-top:-96px;}
33% {margin-top:-96px;}
50% {margin-top:-48px;}
67% {margin-top:-48px;}
83% {margin-top:0px;}
100% {margin-top:0px;}}
#flipper p {position:fixed;color:#999; }
</style>
<div style='float: left'>Ha Rpi4: </div>
<div id=flip><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
{%-endif-%}
{%-endif-%}
simply reversed the percentages in the keyframesâŚ
now this duplicates way to much code, but Ive not found a way to compress that, and have only the keyframes section change. Can we somehow load that onto a variable we then can call in he keyframes section?
Hope anyone of you can have a look, thanks!
(sorry for the miniature gif, donât know why this is suddenly showing so small)
update
this does it nicely:
header_text: >-
{% if is_state('input_boolean.ch_use_header_text_template','on') %}
{% if is_state('input_boolean.ch_header_marquee_up','on') %}
{% set keyframe = "@keyframes show {
100% {margin-top:-144px;}
83% {margin-top:-96px;}
67% {margin-top:-96px;}
50% {margin-top:-48px;}
33% {margin-top:-48px;}
17% {margin-top:0px;}
0% {margin-top:0px;}}" %}
{% else %}
{% set keyframe = "@keyframes show {
0% {margin-top:-144px;}
17% {margin-top:-96px;}
33% {margin-top:-96px;}
50% {margin-top:-48px;}
67% {margin-top:-48px;}
83% {margin-top:0px;}
100% {margin-top:0px;}}" %}
{% endif %}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
#flip div:first-child {animation: show 10s linear infinite;}
{{keyframe}}
#flipper p {position:fixed;color:#999; }
</style>
<div style='float: left'>Ha Rpi4: </div>
<div id=flip><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
{% endif %}
This is awesome! Any way to get this to work in compact mode with the text coming in to the right of the icons/text for the lovelace screens?
Continuing from https://community.home-assistant.io/t/custom-header/155399/336
Here is the correct place @heartkingz .
The template should be more like this, to have it simpler (and cope with 9+ items as well)
mdi:numeric-{{states('sensor.hacs') if (states('sensor.hacs') | int) < 10 else '9-plus'}}-circle
Which then becomes:
<ha-icon
style='padding-bottom: 3px'
icon="mdi:numeric-{{states('sensor.hacs') if (states('sensor.hacs') | int) < 10 else '9-plus'}}-circle"
>
</ha-icon>
Ha! Thanks! iâm pretty new to this, so really appreciate your help!
Is it possible to display the tab name as header text?
Not currently. This is a feature request on GitHub and is related to another feature request there as well. This would require templates and config being rendered every on tab/view change, which Iâm currently testing. This can result in slowdowns and glitches and I need to make sure that these things donât happen before implementing something like this.
2 Likes
Is there a way to use the current theme as an exception?
The mobile theme I use needs the background: element to make the header transparent but I donât want that when I am using a different theme on my computer.
Answered you on discord, but you should just be using the Custom Header theme variables in your themes (instead of in your lovelace config). https://maykar.github.io/custom-header/#styling/advanced
Also, this thread is for the discussion of jinja templates in Custom Header. The main Custom Header thread can be found here.