Custom Header

Mariusthvdb · September 2, 2020, 9:14am

ok, re-iteration on an earlier discussion we had, concerning CH on multiple dashboards.
Ive made my own shortcut menu bar, and have grown so accustomed to its ability to span all dashboards, Ive been trying to get my head around how the CH menu bar could do this. I cant seem to find that ability, though it really is an awesome feature.

Am I overlooking this option completely, or is it really not possible yet.
have a look what I am trying to say:

is my own shortcut menu bar, with buttons pointing to the various paths spanning my 3 dashboards. With some nifty templating, ive been able to even display depending on admin or not, and several modes or not. That is all possible too in CH of course.

Yet, the window.location.pathname used in my JS templates in the button card make the dashboard crossovers possible.
Would this be a feature available in CH too (now, or as a future addition)?

mayker · September 2, 2020, 11:38am

CH is way too feature bloated as it is. I’ve considered it, but adding tabs/buttons that don’t already exist in the default header isn’t something that I’d add.

Mariusthvdb · September 2, 2020, 11:50am

by the above, you mean the tabs per dashboard right? By which the answer to the request for cross dashboard tabs has been given…

I understand what you’re saying, CH has a lot of magic options dont want to take away from that…

mayker · September 2, 2020, 12:01pm

Exactly. There have been a few other feature requests for things that would interact with other dashboards, like using tabs in other dashboards for default tab, etc. Unfortunately, this causes more problems than it solves since each dashboard is it’s own Lovelace instance with it’s own config. This opens possibilities of endless loops of redirects and other fun bugs/unwanted behavior.

Just more trouble than it’s worth, especially since HA already has features like setting a default dashboard per device, admin only dashboards, the ability to hide dashboards from the sidebar, and I’m sure more will come with time.

Olen · September 2, 2020, 1:30pm

The problem with many of HAs integrated solutions is that they just save the settings in the users browser, not in a users profile, so if I move bewteen browser, clear some local data on a tablet etc. the setting are lost.
They are also not very flexible. Say I want a special dashboard (with multiple tabs) for a certain user, no matter where that user is logging in from, ant the user should only have access to that dashboard (but to all the tabs inside it). And no other users should have access to it (except admin). Such a basic thing is just not feasible to set up today.
But that is just a rant, and not really constructive feedback for Custom Header (which is great for what it does, it just does not solve all problems). So sorry about that.

mayker · September 2, 2020, 1:52pm

I agree and this might be a good feature request for HA itself, but it’s also a good idea for another custom project (just not this one).

It wouldn’t be difficult to create a custom “card” that would use JS templates (Jinja would be overkill) in order to redirect to any URL on certain conditions. I haven’t done too much research into this and it might already exist or be possible with a feature on another custom project.

The ultimate issue with things like this is there is the possibility of users accidentally creating conditions on two dashboards that would redirect from one, back to the other, and then continuously looping between the two. Could also create a scenario where one dashboard would be inaccessible as the redirect would always be active, so every time you try to visit it you get redirected away. So some sort of protection against such things would be needed. Whether that is storing variables in localStorage or otherwise.

Meph88 · September 3, 2020, 5:52am

Hi,
I’m sorry to ask what is probably a very noob question but I just haven’t been able to figure it out for myself.
I have seen indications that Custom Header may allow me greater control over my Lovelace UI, specifically that I might be able to control the height and width of cards.
This would allow a level of control that I haven’t been able to achieve by the use of vertical and horizontal stacks.
So, if anyone could help me out by giving any info that might help me get this ability in my UI, that would be so hugely appreciated.

My main reason is I want the same Lovelace UI to show differently depending on screen size of the device the user is using to view it.

tom_l · September 3, 2020, 6:17am

No. That is not what Custom Header is for. You are looking for the layout-card.

And possibly browser-mod.

Meph88 · September 3, 2020, 6:46am

Ah, I made an error.
Definitely coming back to this to try and make a stylised header later.
Thank you for the assist in locating the right resources.
Sorry for the mis-post.

sender · September 8, 2020, 9:21am

Hi, I wanted to change something and see that my CH settings are gone… what’s wrong?

DavidFW1960 · September 8, 2020, 9:37am

The option is only there when you click that menu from the dashboard- if you click on edit, you lost the CH option so close it and go again

sender · September 8, 2020, 9:45am

Yes

thisIO · September 9, 2020, 10:29am

Hello,

thank for perfect addon! So many features! I am using it with Tablet.

I just can not put the time in header like this

my config is


custom_header:
  compact_mode: true
  tab_icons_and_text: true
  header_text: '{{ hours12 }}:{{ minutesLZ }} {{ ampm }}'

would like to get smth like this

But i get no time. Here is my header

Please advice me how to do it.

Thanks a lot!

mayker · September 9, 2020, 11:41am

Header Text is hidden when using compact mode, it’s what makes the header so compact.

You could add it to the options button instead with:

custom_header:
  compact_mode: true
  tab_icons_and_text: true
  button_text:
    options: '{{ hours12 }}:{{ minutesLZ }} {{ ampm }}'

Or if you’re dead set on it being on the left hand side and don’t want it to be on the options button you could either put it on the menu button and tell HA to “Always hide the sidebar” or do something more advanced like this.

thisIO · September 9, 2020, 12:59pm

Perfect! Thanks a lot!

thisIO · September 9, 2020, 1:17pm

Is it a way to chage font size and color of this time? Tried to use some css

but without success

mayker · September 9, 2020, 1:27pm

custom_header:
  compact_mode: true
  tab_icons_and_text: true
  options_css: 'color: pink; font-size:10px; padding-top: 5px;'
  button_text:
    options: '{{ hours12 }}:{{ minutesLZ }} {{ ampm }}'

If any css style is being stubborn and needs overwritten add !important to the end of it. Example:

  options_css: >-
    color: pink !important; font-size:10px !important; padding-top: 5px !important;

Just an example as it’s most likely not needed for each of those, or maybe not needed for any of those.

thisIO · September 9, 2020, 7:34pm

mayker:

custom_header:
  compact_mode: true
  tab_icons_and_text: true
  options_css: 'color: pink; font-size:10px; padding-top: 5px;'
  button_text:
    options: '{{ hours12 }}:{{ minutesLZ }} {{ ampm }}'
If any css style is being stubborn and needs overwritten add !important to the end of it. Example:

Copy to clipboard
  options_css: >-
    color: pink !important; font-size:10px !important; padding-top: 5px !important;
Just an example as it’s most likely not needed for each of those, or maybe not needed for any of those.

It works! Thank!
But а i make
like

options: '{{ dayNameLong }}, {{ dayNum }} {{ monthNameLong }} **<br>** {{ year4d }}, {{ time }}'

then css not apply. It is a bug?

mayker · September 9, 2020, 10:27pm

What does your full config for that section look like, still works for me with the break added

thisIO · September 10, 2020, 10:40am

custom_header:
  compact_mode: true
  button_text:
    options: '{{ dayNameLong }}, {{ dayNum }} {{ monthNameLong }} <br> {{ year4d }}, {{ time }}'
  options_css: 'color: pink; font-size:5px; padding-top: 5px;'

But it looks like only font-size is ignored, the color applies.