Custom Header

Do you have custom header settings in each of the dashboards or only the default one?

Each dashboard operates independently, meaning you need to have CH settings in each one. This also means that each dashboard you’ve made wouldn’t really require exceptions, just the settings you want for that dashboard.

1 Like

I just love when the “bugs” turns out to be features :smiley:

Thought the settings were global but added them to each view and now it works like a charm. Thanks for the help and awesome software!

2 Likes

Just wondering - I’m experimenting with my tablet and for the first time I’m trying to change the view with automations using browser_mod.
I’ve tried browsing to /alarm with browser_mod’s navigate and for some reason, despite the fact the sidebar reliably doesn’t show with my normal view, when I browse to /alarm, the sidebar DID show.
kiosk_mode: true is set.
Any ideas? Cheers!!

I’ll take a look when I can. Need to install browser_mod and see how it’s navigating to views.

1 Like

Home Assistant 0.111.4
CUSTOM-HEADER Version 1.6.5

custom_header:
background: ‘rgba(155, 155, 155, 0.25)’
compact_mode: true

no relevant errors in my HA logs

no errors in console, turned on verbose and custom-header.js had some violations for setTimeout being 50+ms, but that was it

I have 2 different issues and 1 question/observation

  1. When I have multiple dashboards, the main dashboard has multiple views, all just showing icons and no text. When I first load, it looks fine and my background is set, “background: ‘rgba(155, 155, 155, 0.25)’”. If I click on another dashboard in the left hand navigation, navigate away, then navigate back, it loads, goes into compact, but my background is not set, it’s the default. If click a view or scroll, the background is then set. This does not happen on a dashboard that has only one view, aka, there are no view icons. To reproduce, make one dashboard with 2 views and one dashboard with 1 view. Set to change your background. Click between the 2 dashboards. One weird note is you have to do it twice, the first time you click away and then back to the dashboard it works, but not again after that.

  2. This is on Android Companion App, on a Pixel 4, updated to Android 10, security update June 5th 2020. If I first load the application, the header loads and I have 5 views on my main dashboard, with standard MDI icons and no text in compact mode. They all fit with no left/right arrows. If I click to another dashboard, then click back to the main dashboard, first, issue #1 happens, but once I scroll and the background is set, I now can only see 4 view icons and a right arrow. Something changes slightly with the size and makes the right arrow show up.

  3. The observation and something I assume you cannot fix is the resize that happens when you first load a dashboard. You will see the theme/default background header color and it’s taller, then you will see it resize, and if you have it set, then the background color change. It makes for not the best experience because you see a flicker. I tried to match theme background color to the one I was setting, but I also use a background image in my theme. I assume there is no way to get to the css change before it initially loads or renders? I also assume no way to get the height to not move like it does in anything you can change in a theme? Seems like a I could a theme override on something to match, but I need to research it more

Awesome work on an awesome card!

edit… Issue #1 seems to only happen when you have a background image… so for example…

background: var(–background-image)

then in your theme, I have this set…

background-image: “center / cover no-repeat fixed url(’/local/themes/ios-themes/homekit-bg-dark-green.jpg’)”

I can recreate the scroll arrow issue. The visibility of the tab arrows is controlled by a polymer element and it seems if the tab (which is larger than the visible icon) is close enough to the edge then it will sometimes show the arrow after first load. I’ll see if there is something I can add to help with that, but if all of your tabs fit (5 views) then why not just hide the arrows completely with chevrons: false?

As far as the flicker, there is nothing I can do about it. CH needs to wait until Lovelace and other elements exist before it can do its thing.

Will look into your background issue when I get a chance.

awesome! and I missed the chevrons config option, it works great now actually, the arrow issue is gone, but it also flickers a LOT less, the majority of my flickering must have been because of something with me being so tight on the bounds…

super happy and I thought I read all the docs but missed that crucial param!

HI All,
I accidentally disabled the header…now I can’t enable it anym ore because I can’t get to the Custom header settings… any ideas?

The documentation explains exactly how to recover from this situation.

well actually it doesn’t, the disable ch parameter does also disable the settings button (because it disables ch as a whole) …so still no access to reenable the header

But you have access to your raw config now so you can edit the settings in YAML.

Owh man, I think it is time for weekend :wink: (didn’t think to go to the raw editor to set it to false :frowning:

Thanks!

1 Like

I’m on HA 0.112.1 and custom header 1.6.5.

On IOS app plus Safari and Chrome on Ipad the option ‘customize UI’ doesn’t work no matter how many times i tap it. Is this related to custom header?

Tried 1.6.6 and that fixed it.

Is there a way to hide tabs from a given folder ?
My folder structure is like this:

  • lovelace/views
  • lovelace/views/hidden

Rather than manually specifying all the tabs that should be hidden, I’d like the list to be auto populated.
This obviously doesn’t work :slight_smile:

custom_header:
  hide_tabs: !include_dir_list lovelace/views/hidden
  hidden_tab_redirect: false

I have something weird. I don’t get it to work.

  1. I installed it through HACS. But I have three elements (including custom header) that are not loaded. How do I fix that?
  2. But I can also go manual, the file is in the www-folder. If I add:
resources:
  - url: /local/custom-header.js?v=0.0.1
    type: Javascript Module

custom_header:
  compact_mode: true

Nothing happens :confused:

@devastator No and directory/includes information isn’t something that is passed to Lovelace. I’d consider adding something like “title includes” or “path includes” as a feature request to achieve something similar. That way as long as the view’s title or path includes a certain string it would automatically be hidden.

@iAmRenzo HACS should automatically add the resources for you if you’re not using yaml mode, if you’re using yaml mode it will tell you the resource URL to use. The code that you shared above in your resource’s section is only to be used if you installed manually and resources are no longer located in your lovelace yaml. Assuming you’re not using YAML mode, your Lovelace resources can be found by going to your sidebar, then Configuration > Lovelace Dashboards > Resources. The resource URL should look like this /hacsfiles/custom-header/custom-header.js. The files that HACS installs are located in the folder /www/community. All this assumes you’re using the latest version’s of HA and HACS.

Hi Ryan,

please have a look if this makes sense:

I use a simple template:

tab_icons:
  developer: >-
    {{'mdi:remote-desktop' if is_state('binary_sensor.github_repo_has_update','off') else 'mdi:github-circle'}}

since this is longer than the editors character page guide setting (like many if not all coding editors use) I like to use

tab_icons:
  developer: >-
    {{'mdi:remote-desktop' if is_state('binary_sensor.github_repo_has_update','off') 
       else 'mdi:github-circle'}}

which in Jinja should make no difference, auto deleting all unused whitespace, and not seeing a new line, even without the >-

even so, your CH template checker throws the infamous error:

[Log] [CUSTOM-HEADER] There was an error with one or more of your templates: (custom-header.js, line 617)
[Log] invalid template (TemplateSyntaxError: expected token 'end of print statement', got 'n') (custom-header.js, line 617)
[Log] [CUSTOM-HEADER] There was an error with one or more of your templates: (custom-header.js, line 617)
[Log] invalid template (TemplateSyntaxError: expected token 'end of print statement', got 'n') (custom-header.js, line 617)

would there be no way to change this, rather unique to CH method of template checking? It would make much easier on us templaters :wink:

btw this works alright, effectively de-whitespacing:

  developer: >-
    {% if is_state('binary_sensor.github_repo_has_update','off') %} mdi:remote-desktop
    {% else %} mdi:github-circle
    {% endif %}

You can do it that way if you like, just lose the extra indent:

tab_icons:
  developer: >-
    {{'mdi:remote-desktop' if is_state('binary_sensor.github_repo_has_update','off') 
    else 'mdi:github-circle'}}

If you use storage mode you can even notice that the HA editor will change the long form (your first example) to this:

  tab_icons:
    developer: >-
      {{'mdi:remote-desktop' if
      is_state('binary_sensor.github_repo_has_update','off') else
      'mdi:github-circle'}}

Keep in mind that CH is just taking the string in the YAML and passing it HA to render the template. Even with a >- YAML will interpret an indent as a new line. Using a YAML parser we can see that your second code block’s string is interpreted with a new line:

{{'mdi:remote-desktop' if is_state('binary_sensor.github_repo_has_update','off') \n   else 'mdi:github-circle'}}

I’ve thought about auto stripping the white space, but since CH templates are returning a large variety of things including strings and html/css code it would be a bad idea to do so. I don’t want to strip intentional white space.

1 Like

This is because it is indented correctly :slight_smile:

understood. Though as you see Ha does strip these.
those intricacies make it just that bit more complex to use system wide identical templating, (and I am not even talking different languages here, just plain Jinja…)

thanks, it’s back working.