Here is the F12 from Chrome v79
OK Got rid of this {{states('sensor.cal_home_event_event')}}</div></div><div><div> and its working i think it does not like the @ symbol…
Try something like this {{ states('sensor.cal_home_event_event') | replace("@","@") }}
I have tried different sensors and the ones causing the problems seem to be the platform template sensors. If that makes sense.
So it’s not just sensors that contain an @ symbol? Did you try the code above that replaces the @ symbol with it’s html code?
Edit: Seems it’s not the @ symbol, looking into it more. Doesn’t seem like the issue is with template sensors either as those seem to be working fine.
i have a problem.
i have instal custom header and logged in with a user that i want only show my home assistant in kioskmode, but now are al the users in kioskmode how can i change it? i am not able to open the gui of custom header and also “?disable_cch” at the end of my url is’nt working
Few things:
- It’s
?disable_chnot?disable_cch. - Read the docs on exception config.
- This thread is for “template showcase and discussion” you want this thread.
thank you i have fix it.
please let me build one the marquee and ask a formatting question about it:
as you can see here:
resizing the browser window to a smaller size than the state (showing a weather condition) of one of the sensors causes the marquee to fumble its way through, and even show a blank line because of it.
Can we somehow auto-truncate the display and adjust to the current available screen estate?
this is the code I am using at the moment for the vertical 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>
<div style='float: left'>Ha Rpi4: </div>
<div id=flipper><div id=flip><div><div>
{{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>
{{states('sensor.dark_sky_summary')}}</div></div><div><div>
yes! that seems to be exactly what I need. trying this:
text-overflow: clip;
but where should I add that? I’ve tried it in most positions, and even in the keyframes, but no such luck…
should I maybe also add
white-space: nowrap;
without that the example on https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow_hover simply wraps the text and the text-overflow is not doing anything?
update
yes! this does the trick:
#flip > div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
very nice! thanks a lot for the ever better getting CH! had hoped to clinch that before the end of the year 
it has introduced another issue: it pushes the fixed text div on the left and the button_text on the right out of the window…
now what. still 1 day left 
after some heavy experimenting with most of the code in this marquee, this seems to be doing what the original setup did:
header_text: >-
<style>
#flip {height:24px;overflow:hidden;}
#flip > div > div {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;}}
</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>
Since I didn’t understand what the #flipper was doing, I tried to delete it, and see what happens. There’s no apparent difference? Why did you put the #flipper section there (don’t cant to break anything I cant foresee of course…)
I’ve tried most of the (for me) obvious Css properties, but cant find the one I need to keep the left and right side texts in view when resizing the screen.
Please have a look if and when you can find the time, to see if you can solve that for me?
thanks!
This is fantastic. Is there a way to set it up so the number of list items getting flipped can be dynamic? Thinking of using it to show weather alerts like Ludeeus, but I prefer the vertical scrolling over a horizontal ticker, and the number of alerts could change. Looks like with the current setup it would require editing all the keyframes depending on the number of items?
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 }}