Have a fix incoming for the reversed text and looking into iOS device issues now.
1 Like
Ah, yes. That is very inconsistent and not something I had noticed. I may just change those options to match, but allow them as is as well to keep it from being a breaking change. Thanks!
1 Like
Thanks for the reversed template fix - working correctly now!
I will be interested to see what you find with iOS. Iām currently using iOS 12.4.1 on both devices (iPhone 7 and iPad 6th generation) if that matters.
Quick little template I came up with to show time and weather conditions
custom_header:
button_text:
options: >-
{{ hours12 }}:{{ minutesLZ }} {{ ampm }} - <ha-icon icon='mdi:weather-{{
states.weather.dark_sky.state }}'></ha-icon> {{
states.weather.dark_sky.attributes.temperature }}Ā°
compact_mode: true
Note: The icon will not render when partlycloudy as that icon is weather-partly-cloudy. You could create a template sensor to overcome that
11 Likes
I need to add something in the docs about the fact that the text options are rendered as HTML and you can hack together some really cool stuff like ian did.
1 Like
just to be of service, this is how I do that currently on the CCH tab for my weather page:
- tab:
'weer_klimaat':
icon: >
var weer = entity['sensor.weather_icon'].state;
return weer;
and the sensor is:
weather_icon:
entity_id: sensor.dark_sky_icon, weather.home_darksky, weather.woensdrecht
friendly_name_template: >
{{states('sensor.weather_icon').split('weather')[1]|replace('-',' ')|title}}
value_template: >
{% set mapper_icon =
{'partly-cloudy-night': 'night-partly-cloudy'} %}
{% set mapper_br =
{'pouring': 'pouring',
'lightning-rainy': 'lightning-rainy',
'snowy-rainy': 'snowy-rainy'} %}
{% set mapper_ds =
{'sunny': 'sunny',
'clear-night': 'night',
'rainy': 'rainy',
'snowy': 'snowy',
'snowy-rainy': 'snowy-rainy',
'windy': 'windy',
'fog': 'fog',
'cloudy': 'cloudy',
'partlycloudy': 'partly-cloudy',
'hail': 'hail',
'lightning':'lightning'} %}
{% set icon = states('sensor.dark_sky_icon') %}
{% set woensdrecht = states('weather.woensdrecht') %}
{% set dark = states('weather.home_darksky') %}
{% set weather = mapper_icon[icon] if icon in mapper_icon else
mapper_br[woensdrecht] if woensdrecht in mapper_br else
mapper_ds[dark] if dark in mapper_ds else 'sunny-alert' %}
mdi:weather-{{weather}}
icon_template: >
{{states('sensor.weather_icon')}}
uses a few weather integrations to be as precise as possible in my regionā¦
1 Like
guess I was holding my breath for this release, and wow, it is something special indeed! thanks, huge thanks!
playing with the options as I write this, we now can have all options Jinja templated. yes! a huge swing to move from JS templating to Jinja.
had this in CCH:
- color: >
return entity['sensor.family_home'].attributes.icon_color;
makes things so much easier (hope below works 
)
custom_header:
tabs_color:
phones_tablets: {{state_attr('sensor.family_home','icon_color')}}
tab_icons:
phones_tablets: {{states('sensor.presence_icon')}}
please let me ask if the home (<<) and end (>>) chevrons are still on your mind? Couldnāt find any hint to those in the docs.?
btw the site wont work in a Safari browser on a Macā¦Seems not an optimal situation.
Fixed for partlycloudy
custom_header:
button_text:
options: >-
{{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <ha-icon icon='mdi:weather-{%
if is_state("weather.dark_sky", "partlycloudy") -%}partly-cloudy{%- else
-%}{{ states('weather.dark_sky')}}{%- endif %}'></ha-icon>
{{states.weather.dark_sky.attributes.temperature }}Ā°
compact_mode: true
2 Likes
might need some extra mapping, not all states can be mapped to the mdi_iconsā¦
from the source:
"clear-day": "sunny",
"clear-night": "clear-night",
"rain": "rainy",
"snow": "snowy",
"sleet": "snowy-rainy",
"wind": "windy",
"fog": "fog",
"cloudy": "cloudy",
"partly-cloudy-day": "partlycloudy",
"partly-cloudy-night": "partlycloudy",
"hail": "hail",
"thunderstorm": "lightning",
"tornado": None,
still, there;s also the choice for creating a sensor in the backend, and not impose all this on the frontend. Ymmv or course, good to have choices.
Looking on the wrong side of things: https://github.com/home-assistant/home-assistant-polymer/blob/c2d551bb7c7bfad682ee1e55fdd8f57eec766e61/src/panels/lovelace/cards/hui-weather-forecast-card.ts#L47
That being said, looks like clear-night would need to be handled and exception (not sure what that would be 
)
exactly, thatās what I meant to point at. right side (of my link) are the states the integration can take, so need to be mapped into an icon.
thats why I did:
{% set mapper_ds =
{'sunny': 'sunny',
'clear-night': 'night',
'rainy': 'rainy',
'snowy': 'snowy',
'snowy-rainy': 'snowy-rainy',
'windy': 'windy',
'fog': 'fog',
'cloudy': 'cloudy',
'partlycloudy': 'partly-cloudy',
'hail': 'hail',
'lightning':'lightning'} %}
could have shortened that, but it would have made the template even more complexā¦ 
@mayker So hereās another weird thing on my iPhone and iPad. The Custom Header documentation site does not render correctly. Hereās a screenshot from Chrome on my phone. (I edited off the very top for privacy). The upper left corner is missing - I can see whatās under the white rectangle if I slide the screen up with my finger, but it just slides back down again and is unusable. Further, none of the navigation works. The sidebar icon blinks quickly when I tap on an item but nothing else happens. The tabs become underlined when I tap them, but nothing else changes. The same is true if I use Safari. And itās the same on my iPad. Iām on the newest version of Chrome on all my devices.
Perhaps this is related to why CH doesnāt render correctly on my iDevices?
The reason behind the website not working in Safari and Custom Header having iOS issues are not linked. I will say that it doesnāt matter if youāre using chrome or safari on an iDevice, theyāre both using iOSās webview. In either case iOS devices are a pain to support.
Still wonāt stop me from trying thoughā¦
1 Like
Thanks for the info. You, sir, are totally awesome. Many, many thanks for all your hard work and for the awesome things you have created. I will live in hope for iOS issue resolutionā¦ 
@mayker It seems this custom_header performs a lot better than your old one. However I have one big question.
The view_css: doesnāt seem to work when the header is hidden 
Whatever I try, nothing seems to be happening when I have the header hidden. The reason I ask this is because this was working fine in CCH and my current setup relies on it XD (I would have to find something else if it is no longer possible )
What is going on is that the margins on the view_css do nothing when the header is hidden (whereas in CCH the entire view would just move up or down depending on the settings)
hide_header: true
view_css: 'margin-top: -5px;'
default_tab: 1
This used to work perfectly fine with CCH, but with CH it doesnāt move the viewport up.
Screenshot 1: How it looked like with CCH (note that the āheaderā is actually an entities card with margins so that it looks like it is a single header)
Screenshot 2: How it looks with Custom Header, there is always a gap between the header and the first card. I have tried numerous entries with padding, margins and even tried changing the margins on the actual card, but the card would just be cut off.
As you can see, there is a gap between the header and the first card. Which previously could be alleviated by using my above code.
When I set header to true, it works but only the other way around, I can only move the first card down instead of up, when setting a minus margin it will do a plus margin instead).
For now I will have to do with it, but I hope you can (and ofc if you will and if it is even possible with the new component) address this.
Thanks
Dog device tracker?
Yes it is a Tile. Nothing fancy but does the job for knowing if the dog is home or not. I use it to automate the alarm so it decides which sensors will trigger the alarm depending on if the dog is home or not.
2 Likes
first impression: stable. very stable! not that I had complaints before, but it āfeelsā very nativeā¦
3 āsmallā questions:
are there no more options to hide/show notification? canāt find those in the config options? https://maykar.github.io/custom-header/#configuration/main and I used that in the exceptions conditions.
Iād like to keep the main header text, as set in my configuration. It seems there is no option to disable the header_text setting in custom header? only this, which by default replaces the main header:
header_text string 'Home Assistant' Replace the main header text, more info below
Secondly, I must be doing something wrong because my tab templates donāt show, this is my config (and all template are fine perse)
tab_icons:
alarm: >
{{states('sensor.alarm_panel_icon')}}
phones_tablets: >
{{states('sensor.presence_icon')}}
weer_klimaat: >
{{states('sensor.weather_icon')}}
alarmclock: >
{{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}
tabs_color:
phones_tablets: >
{{state_attr('sensor.family_home','icon_color')}}
please have a look what I should do?
quick reply to the template question:
we canāt use multiline notation (yet), this works:
tab_icons:
alarm: "{{states('sensor.alarm_panel_icon')}}"
phones_tablets: "{{states('sensor.presence_icon')}}"
weer_klimaat: "{{states('sensor.weather_icon')}}"
alarmclock: "{{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}"
tabs_color:
phones_tablets: "{{state_attr('sensor.family_home','icon_color')}}"
@mayker, do you need a feature request for the multiline notation jinja, or is this in the works?