There is some really great stuff on this thread and I am inclined to use some of this. I do have a question though. We are able to change the button-icons as stated in the docs. However we can not change the path (which makes changing the icons seem pointless for these buttons) I mean buttons and not the tabs.
My question would be, is it possible to change the buttons behavior? For example the options menu has 3 dots. I can change the icon, but it would still open that same menu (hence why I think changing the icon seems pointless). Is there a way we could point those buttons to open a view instead? If so would anyone know how?
Changing this into text however is a great feature and if there is no way to change those buttons I might opt going with text instead.
Thanks for all your great examples etc!
mayker
(maykar (pronounced "maker" with a southern accent))
52
Changing icons can alert you to many things and have been used in interesting ways. A doors view shows an open door icon when somethings open and a door shut icon otherwise, a occupancy view will show one icon when people are home and a different one when they are not, a media view will show a play icon when something is playing, etc. Those are just some examples, but not including this feature for the buttons as well would just lead to someone adding it as a feature request. I disagree that it is pointless.
I may at some point add an example of this, but you could create your own icon like iantrich does with his weather icon and add code for it to link somewhere or even just make an image that links somewhere. If you can do it in a webpage, you can pretty much do it in a Custom Header template, but as I’ve said before, I do not want to start making a custom templates for people and this is an unsupported feature.
I don’t want to remove the core functions of buttons in HA by allowing them to be changed. That will just lead to problems.
Ah ok that makes perfect sense, thanks for clarifying. Yes I already mentioned the text to be a great feature.
I understand you don’t want to make examples for everyone that would be crazy, you would never have free time that way haha. I will use it the way you intended it then. I was just wondering if anyone managed to do something like that as I haven’t seen any here.
Anyways thanks for your reply, I will get to work again haha!
so I made the direction of the vertical marquee selectable using:
header_text: >-
{%- if is_state('input_boolean.ch_use_header_text_template','on')-%}
{%- if is_state('input_boolean.ch_header_marquee_up','on')-%}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);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 {
100% {margin-top:-144px;}
83% {margin-top:-96px;}
67% {margin-top:-96px;}
50% {margin-top:-48px;}
33% {margin-top:-48px;}
17% {margin-top:0px;}
0% {margin-top:0px;}}
#flipper p {position:fixed;color:#999; }
</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>
{%-else-%}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);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;}}
#flipper p {position:fixed;color:#999; }
</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>
{%-endif-%}
{%-endif-%}
simply reversed the percentages in the keyframes…
now this duplicates way to much code, but Ive not found a way to compress that, and have only the keyframes section change. Can we somehow load that onto a variable we then can call in he keyframes section?
Hope anyone of you can have a look, thanks!
(sorry for the miniature gif, don’t know why this is suddenly showing so small)
update
this does it nicely:
header_text: >-
{% if is_state('input_boolean.ch_use_header_text_template','on') %}
{% if is_state('input_boolean.ch_header_marquee_up','on') %}
{% set keyframe = "@keyframes show {
100% {margin-top:-144px;}
83% {margin-top:-96px;}
67% {margin-top:-96px;}
50% {margin-top:-48px;}
33% {margin-top:-48px;}
17% {margin-top:0px;}
0% {margin-top:0px;}}" %}
{% else %}
{% set keyframe = "@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;}}" %}
{% endif %}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
#flip div:first-child {animation: show 10s linear infinite;}
{{keyframe}}
#flipper p {position:fixed;color:#999; }
</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>
{% endif %}
Is it possible to display the tab name as header text?
mayker
(maykar (pronounced "maker" with a southern accent))
59
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.
mayker
(maykar (pronounced "maker" with a southern accent))
62
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!
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.
mayker
(maykar (pronounced "maker" with a southern accent))
66
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.
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.
mayker
(maykar (pronounced "maker" with a southern accent))
67
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):
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.
