How do I center the tabs so they adjust to the width of the viewport?
Also, is it possible to keep the header intact but enable footer mode for the tabs only? Can padding be added at the bottom too?
This is not a feature of CH, but you may be able to get the look you’re after with the advanced styling options. It will require some CSS knowledge.
This is what split_mode is for.
You can with some added CSS by using the advanced styling options with something like tab_container_css: 'padding-bottom: 20px;'
grr, struggling with templating inconsistencies again…
using:
{% set time = {1:'one',
2:'two',
3:'three',
4:'four',
5:'five',
6:'six',
7:'seven',
8:'eight',
9:'nine',
10:'ten',
11:'eleven',
12:'twelve'} %}
{% set hour = time[now().hour] %}
{% if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{hour}}
{% else %}mdi:clock-time-{{hour}}-outline
{% endif %}
in the template editor works fine:
however, in CH this results in:
and kills the CH completely (makes it disappear) when used in the config:
tab_icons:
time_settings: >-
{% set time = {1:'one',
2:'two',
3:'three',
4:'four',
5:'five',
6:'six',
7:'seven',
8:'eight',
9:'nine',
10:'ten',
11:'eleven',
12:'twelve'} %}
{% set hour = time[now().hour] %}
{% if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{hour}}
{% else %}mdi:clock-time-{{hour}}-outline
{% endif %}
I know I shouldn’t quote the numbers, since that causes this:
(I realize haven’t guarded the template yet, will do later on, but first need to figure out why CH wont accept this valid template?
I even tried it with an extra variable, and other wordings, to prevent the use of ‘reserved’ variables. Same result unfortunately:
{% set mapper = {1:'one',
2:'two',
3:'three',
4:'four',
5:'five',
6:'six',
7:'seven',
8:'eight',
9:'nine',
10:'ten',
11:'eleven',
12:'twelve'} %}
{% set digit = now().hour %}
{% set word = mapper[digit] %}
{% if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{word}}
{% else %}mdi:clock-time-{{word}}-outline
{% endif %}
as you can see, this template works fine in HA as template sensor:
hour_icon:
friendly_name: Hour icon
entity_id: sensor.time
value_template: >
{{now().hour}}
icon_template: >
{% set mapper = {1:'one',
2:'two',
3:'three',
4:'four',
5:'five',
6:'six',
7:'seven',
8:'eight',
9:'nine',
10:'ten',
11:'eleven',
12:'twelve'} %}
{% set digit = now().hour %}
{% set word = mapper[digit] %}
{% if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{word}}
{% else %}mdi:clock-time-{{word}}-outline
{% endif %}
Please have a look, thanks!
Same issue as last time, doesn’t like all that indentation.
time_settings: >-
{% set time = {1:'one',2:'two',3:'three',4:'four',5:'five',6:'six',
7:'seven',8:'eight',9:'nine',10:'ten',11:'eleven',12:'twelve'} %}
{% set hour = time[now().hour] %}
{% if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{hour}}
{% else %}mdi:clock-time-{{hour}}-outline
{% endif %}
duh, I keep forgetting that, really sorry. I am so focussed on finding errors in the template, I forget this anomaly in Lovelace. Shouldn’t we call this a bug even? I mean, all jinja and template editors, config checkers and what have we check Ok, but this place in the Lovelace config doesnt get it?
btw, for reference, I have changed the template to use %-I so I don’t have to template all 13-24 hours also 
Needs a quoted state in the mapper now, since it is a string and no number.
time_settings: >-
{% set mapper = {'1':'one','2':'two','3':'three','4':'four','5':'five','6':'six',
'7':'seven','8':'eight','9':'nine','10':'ten','11':'eleven','12':'twelve'} %}
{% set digit = now().strftime('%-I') %}
{% set word = mapper[digit] %}
{% if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{word}}
{% else %}mdi:clock-time-{{word}}-outline
{% endif %}
still no such luck though: no header bar, no icon, and the same error:
dont understand the error message itself either. Where does it get an integer while expecting a ‘:’ ?
only an occasional glitch reveals CH and the correct fixed view icon:
using the mapper on 1 line completely shows progress:
revealing some whitespace yet… where o where can we find these? Ive already used the white space cleaner {%- on all lines…
I’ll look into it more when I can, but please keep these long posts with screenshots here:
https://community.home-assistant.io/t/custom-header-template-showcase-and-discussion
cool, and thanks. will do.
for now:
tab_icons:
time_settings: >-
{{state_attr('sensor.hour_icon','icon')}}
works fine
Sorry, was running to work and had to get my yaml mode dev install running.
There were a few spots that required the - to clear spaces. This works for me with no spaces and no errors:
test_template: >-
{%- set mapper = {'1':'one','2':'two','3':'three','4':'four','5':'five','6':'six',
'7':'seven','8':'eight','9':'nine','10':'ten','11':'eleven','12':'twelve'} -%}
{% set digit = now().strftime('%-I') %}
{%- set word = mapper[digit] -%}
{%- if states('sun.sun') == 'above_horizon' -%}mdi:clock-time-{{word}}
{%- else -%}mdi:clock-time-{{word}}-outline
{% endif %}
You can see this in the template tool as well, not entirely sure why whitespace would be added to some of those portions, but lets just call it Jinja magic (since I’m still waking up and can’t bring myself to research it more).
o wow, I am so stumped… Never ever realized we could do this in the template editor by adding the outer quotes…
And here am I continuously refreshing my Lovelace config, for the test_template to read the newly edited template…
still, its not identical:
"{% set mapper = {'1':'one','2':'two','3':'three','4':'four','5':'five',
'6':'six','7':'seven','8':'eight','9':'nine','10':'ten','11':'eleven',
'12':'twelve'} %}
{%- set digit = now().strftime('%-I') %}
{%- set word = mapper[digit] %}
{%- if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{word}}
{%- else %}mdi:clock-time-{{word}}-outline
{% endif %}"
works perfectly in the template editor,
and yet throws the aforementioned error in inspector again. After that, nothing helps. De-whitespacing the mapper or even completely whipping the custom-header settings to all defaults won’t make the error disappear. And the CH re-appear.
Only a restart of the system restores the correct Custom Header. This is browser independent, Chrome, Safari and Firefox show identically. Even the new Mac HA app
Indents again?
{% set mapper = {'1':'one','2':'two','3':'three','4':'four','5':'five',
'6':'six','7':'seven','8':'eight','9':'nine','10':'ten','11':'eleven',
'12':'twelve'} %}
{%- set digit = now().strftime('%-I') %}
{%- set word = mapper[digit] %}
{%- if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{word}}
{%- else %}mdi:clock-time-{{word}}-outline
{% endif %}
well yeah, probably, I was merely testing the testing capabilities of the test_template
seems it still doesnt parse the same way as the HA template editor
reproducing my the ‘bug’:
- start with
test_template: >-
{% set mapper = {'1':'one','2':'two','3':'three','4':'four','5':'five','6':'six','7':'seven','8':'eight','9':'nine','10':'ten','11':'eleven','12':'twelve'} %}
{%- set digit = now().strftime('%-I') %}
{%- set word = mapper[digit] %}
{%- if states('sun.sun') == 'above_horizon' %}mdi:clock-time-{{word}}
{%- else %}mdi:clock-time-{{word}}-outline
{% endif %}
all is fine test template showing the correct output, like your post above
- edit the template to include the indents and the inspector chokes on this
- after that, no way to repair the CH, but to restart the instance.
Mind you, this is only using the test_template, not even a template used in the CH config.
Yup, just the quirks of using Jinja from yaml in Lovelace. Watch the indents. test_template renders exactly the same as any other template in Lovelace.
Also, why not drop the dict and use an array instead? That way you don’t need to map at all. Add ‘zero’ (or anything really, empty string works too) as the first item and then you can just use the hour as the array’s index:
Edited again to make it even shorter:
{% set word = ['','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'] %}
{%- set index = now().strftime('%-I') | int %}mdi:clock-time-{{word[index]}}
{{- '-outline' if states('sun.sun') != 'above_horizon' }}
ha, yes! was looking to do so, you beat me to it while I was still struggling and awaiting the restart… wow, thanks!
how come then CH (not the test template apparently) throws the error while the template editor parses it perfectly?
If this is a Lovelace quirk, how to report on that, without being told I am using a custom integration for which no support will be given. Surely this is a bug.
Also, the fact that the system needs a restart while a simple template issue in the CH config errors isnt as it should be? Seems I have bumped into 2 issues that need looking after/into.
all in all this is a noteworthy exercise with a nice outcome:
will see if I can fix it so it rounds to the next or previous hour, depending on the minutes being below or above 30
trying:
{% set word = ['','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'] %}
{% set addition = 0 if now().strftime('%-M')|int <= 30 else 1 %}
{%- set index = now().strftime('%-I')|int + addition %}mdi:clock-time-{{word[index]}}
{{- '-outline' if states('sun.sun') != 'above_horizon' }}
Jinja isn’t really supported in Lovelace, so it’s not really a bug, it’s a quirk of an unsupported feature and if reported I imagine that’s exactly what they would say about the custom addon. Keep in mind that what this is doing is converting the config from yaml to a string (which can have quirks) and sending that to the backend to be rendered as jinja. If the backend doesn’t get what it expects, you’ll get an error (usually not very helpful ones either), but none of this is the fault of HA devs. It’s my fault for adding this into CH.
You shouldn’t need to restart to clear the error, editing the config and refreshing with ctrl+shift+r should do the trick. If it doesn’t just use the ?disable_ch trick after editing the config and reload Lovelace from the top right menu.
I got those errors too when using the bad Jinja, but only had to refresh the page after making the change.
as said, not so here. was 100% reproducible.
Didnt try your ?disable trick though, will do so next time this arises. Thanks for your support, much appreciated. Love CH!
1 Like
Quick tip if you’re going to round like that, add another ‘one’ as the last item in the array. That way if it’s 12 and it rounds up to 13 it will still be ‘one’. You could add logic to make index equal 1 if it is currently 13, but just adding ‘one’ to the end of the array seems cleaner.
{% set word = [0,'one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','one'] %}
{%- set hour = now().strftime('%-I')|int %}{% set minute = now().strftime('%-M')|int %}
{%- set index = hour if minute <= 30 else hour + 1 %}mdi:clock-time-{{word[index]}}
{{- '-outline' if states('sun.sun') != 'above_horizon' }}
Also, in the next release I think I’ll be adding logic for templates that fail. You’ll still get an error in the logs, but I’ll make CH disable itself when it happens so the default header is still available.
1 Like
cool!
(… if this has anything to do with my todays exercise, I am glad to have helped CH going forward …)
1 Like
saw that 
any particular reason to change it from ''? Or is this just for cosmetic reasons, and can I safely leave my template like:
{% set word = ['skipthis','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','one'] %}
Yeah, that can literally be anything. It’s just taking up space in the array so that ‘one’ starts at 1 and not 0.
1 Like