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.
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.
Understood. I initially asked here because I thought I would be dealing with a jinja template to determine which theme was currently being used. But the solution you gave me is much easier! Thanks again!
not really sure what you mean, but you can set the direction of the horizontal marquee (which btw is obsolete) like this:
header_text: >-
{% set inside=states('sensor.temperatuur_living')%}
{% set outside=states('sensor.temp_current')%}
{% set temp_color='var(--primary-text-color)'%}
{% set symbol='°C' %}
<div style='display: flex;display: -webkit-flex;'>
<div>Ha Rpi4: </div>
<marquee direction='right'>
<span style='color: {{ temp_color }}'>
Inside temperature: {{ inside }}{{ symbol }},
Outside temperature: {{ outside }}{{ symbol }},
</span>
<span style='color: orange;'>
System alerts: {{states('sensor.marquee_alerts')}}
</span>
<span style='color: {{ temp_color }}'>
Summary - {{states('sensor.dark_sky_summary')}},
Daily - {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
</span>
</marquee>
see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
using an input_boolean from the frontend:
header_text: >-
{% set inside=states('sensor.temperatuur_living')%}
{% set outside=states('sensor.temp_current')%}
{% set temp_color='var(--primary-text-color)'%}
{% set symbol='°C' %}
<div style='display: flex;display: -webkit-flex;'>
<div>Ha Rpi4: </div>
<marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on') %} 'right' {% else %}'left' {% endif %} >
<span style='color: {{ temp_color }}'>
Inside temperature: {{ inside }}{{ symbol }},
Outside temperature: {{ outside }}{{ symbol }},
</span>
<span style='color: orange;'>
System alerts: {{states('sensor.marquee_alerts')}}
</span>
<span style='color: {{ temp_color }}'>
Summary - {{states('sensor.dark_sky_summary')}},
Daily - {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
</span>
</marquee>
I have some statues and entities that I want to keep track of in multiple views and I have not found any good solution to this problem. Regular cards takes up to much space and feels bulky in general and I want the solution to work on both mobile and bigger screens.
I managed to do this with split view, footer and the template for the header:
Does any one know if I can get the icons to act like they where a part of a Lovelace instead of just “stupid” CSS/Template? I am currently using a hack with browser-mod but that isn’t really a good long term solution.
Depends on what exactly you want those icons to do. If you just want to change icon/color based on state, that’s totally doable in a template. If you want it to be an actual entity button, trigger entity changes on click, or something similar then I would keep doing what you’re doing. That’s not something I’ll be adding to Custom Header.
If the former is what you are looking for than you can do something like this:
Header will show a green icon of a house when input_boolean.test is on, otherwise it will be a red icon of a bell.
header_text: >-
<ha-icon icon='{% if is_state("input_boolean.test", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.test", "on") %}green{% else %}red{% endif %}'</ha-icon>
If this is already what you’re doing, then sorry for telling you something you already know, but you did not show what you have tried or explained what you’re doing with browser-mod.
And just to fit your situation more, here’s an example to support multiple icons (again, sorry if I’m telling you something you have already figured out):
header_text: >-
<div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
</div>
</div>
Custom Header wasn’t made with these things in mind, it’s just a happy accident that it works.
Thanks, yeah have most of that figured out but you did it a lot better than I did. Didn’t know that the worked this way. The code will suddenly be a lot cleaner!
I am trying to accomplish the button part without the amount of “hacks” I am doing but that looks to be out of reach as of now, as I suspected.
Thanks for this great feature!
That showing your age bro
haha, yep, old guy here…
using a modern vertical css marquee, but struggling to get this horizontal HTML Marquee to use the CSS method.
Could you help me out?
header_text: >-
{% if is_state('input_boolean.ch_use_header_text_template','on') %}
{% if is_state('input_select.mode','Developer') %}
<marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif %} >
<span>
User: {{ user }}, User_id: {{ userID }}, Admin: {{ isAdmin }},
Owner: {{ isOwner }}, Device_id: {{ deviceID }}, View: {{ viewTitle }},
Path: {{ viewPath }}, Index: {{ viewIndex }}, Url: {{ url }},
User agent: {{ userAgent }}
</span>
</marquee>
{% else %}
{% set inside=states('sensor.temperatuur_living')%}
{% set outside=states('sensor.temp_current')%}
{% set temp_color='var(--primary-text-color)'%}
{% set symbol='°C' %}
<div style='display: flex;display: -webkit-flex;'>
<div>Ha Rpi4: </div>
<marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif%} >
<span style='color: {{temp_color}}'>
Inside temperature: {{inside}}{{symbol}},
Outside temperature: {{outside}}{{symbol}},
</span>
<span style='color: orange;'>
System alerts: {{states('sensor.marquee_alerts')}}
</span>
<span style='color: {{ temp_color }}'>
Summary - {{states('sensor.dark_sky_summary')}},
Daily - {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
</span>
</marquee>
{% endif %}
{% else %}Ha Rpi4
{% endif %}
Ive started to read on this, but it is a bit basic…https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html#make-the-marquee-effect-with-css-animations-horizontally-and-vertically
Lol that s thinking out side the box nice job
@kr_noob Continuing conversation from your comment here, this is the thread for such things.
If you can do it with a jinja template then you can add it to Custom Header, I am no Jinja expert and I just don’t have the time to write Jinja for anyone that requests it. This is why I often mention that this feature (complex html, css, and other fancy templates) is unsupported and isn’t really a feature at all. It’s more of a side effect of how things are rendered in CH.
All that being said, you would need to parse the JSON from the sensor you are using and the template section of the developer tools in HA is a great place to start. It even has an example of JSON parsing in the default template it shows. I can give you a bit of a head start, but making this work in the template that you are using would be up to you.
Go to developer tools >> templates and paste in the following example to see how to pull just the titles from the JSON in your feedparser sensor.
This will show the first 3 titles pulled from the sensor:
{{ state_attr('sensor.npr', 'entries')[0].title }}
{{ state_attr('sensor.npr', 'entries')[1].title }}
{{ state_attr('sensor.npr', 'entries')[2].title }}
This works perfectly - I was able to put this into the header and flip the headlines vertically.
I had seen the JSON example (I know zilch about JSON) but overlooked it bc I thought the example was all about assigning variable vice extracting - but I see what you’re talking about. Thanks again!
Hi everyone. I am completely noob on this so my appologies if my question is stupid.
I have the following code in the raw editor. However it only display the time in compact mode.
What I should do in order to have the rest info in the header?
custom_header:
button_text:
options: '{{ hours12 }}:{{ minutesLZ }}'
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
id=flipper><div id=flip><div><div>
{{states('sensor.outdoor_temperature')}}</div></div><div><div>
{{states('switch.sonoff_100082f95b')}}</div></div><div><div>
{{states('sensor.dark_sky_precip_probability')}}</div></div><div><div>
{{states('sensor.outdoor_temperature')}}</div></div><div><div>
compact_mode: true
panel: false
Header text is removed in compact mode, it’s what makes it compact. You might want to try split mode. You can also flip split mode by setting footer mode to true.
It worked! thanks.
may I ask how (if) I could add a stable text for example in the below template
{{states('sensor.outdoor_temperature')}
in order to get Outdoor Temperature: 18 and not only 18 as it now.?