I’m also trying to increase the icon size of the tabs, to make them more touch friendly, but I can’t figure out the CSS. May I ask for help?
This works like a charm to change the icon size:
all_tabs_css: 'zoom:1.50;'
But the bottom line indicating the active tab doesn’t scale at the same amount, so it doesn’t get positioned properly. Is there a way to also scale this to 150%?
Hi guys.
Is it possible to use an local svg file instead of a mdi:icon in the button_text?
I have seen a lots of people using this
button_text:
options: >-
<ha-icon icon='mdi:weather-{{ states.weather.dark_sky.state }}'></ha-icon>
But is it possible to use my local icons from yr since I dont have any API for darksky?
{% if is_state('sun.sun', 'above_horizon') %}
/local/icons/yr/{{states.sensor.yr_symbol.state}}d.svg
{% else %}
/local/icons/yr/{{states.sensor.yr_symbol.state}}n.svg
{% endif %}
I have tried everything but I dont get it to work…
Br.
Tomas
Hi, I have a question. I am not able to add änother exception. I would expect the drop down menu to do something but it does not. Am I able to add addtional expectons (thus one for userid 1 and one for userid2)?
the red square does not do anything:
An element changed in a recent HA update and I need to update CH to fix the exceptions section of the settings. The dropdown’s and add exceptions portion of the settings aren’t functional currently, I just haven’t had the time to work on it yet. For now you can use the raw config editor to add another exception manually, then you’ll be able to edit it through the settings UI. Will be fixed in the next release.
@Emphyrio Not currently, but I’ll look into adding something
@Rondom The templates you see people using in those cases are using an unsupported feature that uses HTML & CSS in the text of elements. You could use HTML to add those as images, but your code as it is would not work.
To get you close, you’d be looking at something more along the lines of this:
{% set post = 'd' if is_state('sun.sun', 'above_horizon') else 'n' %}
<img src='/local/icons/yr/{{ states.sensor.yr_symbol.state }}{{ post }}.svg'>
You’ll probably have to add some styling to the image element.
These types of posts belong here:
https://community.home-assistant.io/t/custom-header-template-showcase-and-discussion
Oh thanks man I will try it out tomorrow when I am back home.
Yikes… sorry i thought I posted in that sub-forum… My bad 
Hi there, Im new to HA and I am trying to get the custom header program to show Kiosk mode on just one of my devices. Is that possible?
I highly recommend reading through the docs, especially the important notes section.
You would use an exception to set this up which has many different ways to differentiate devices, as mentioned in that doc’s link. You can set this up in the “CH Settings” UI in the exceptions section by adding a new exception or you can use the raw config editor to set this up manually and the link above shows many examples.
Thank you, I just got it to work 
Awesome work on this!
Is there a way to just hide the sidebar and not disable it? Like a menu button next to the tabs?
That is a core feature you enable in your user profile.
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:
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).
