Custom Header

Hi can you let me know, how you have done your layout? which theme do you use und how have you set up the cards with your beautiful pics? thank you Regards

I dont use a specific theme, as I have built the theme myself, it is called Homekit Infused. For the code and such you can find everything here.

Or check out my thread on this project here

For now I would suggest using the device_ID condition as the current user agent used in the iOS app contains no identifying information like “Mobile”, “iPad”, “iPhone”, “Safari”, etc. Also, I wouldn’t rely on using the full user agent shown in ObiKai’s post as it is likely to change as well, though I imagine the io.robbie.HomeAssistant bit will remain.

1 Like

Another heads up on this:

The iOS user agent is being modified in upcoming iOS app builds. Device names are returning ("iPhone", "iPad", etc). "Mobile" will no longer exist, but you’ll be able to replace that with either "Home Assistant" or "iOS" as they are now included in the apps user agent.

As a reminder, you can use multiple user agent strings by using the template condition as mentioned in this post above.

2 Likes

Hi
I’m interested by the Per user/device feature. Does that mean I can show/hide cards for specific users ?
I don’t find any documentation or example on this subject, can someone give me some tips ?
Thanks

The exceptions/conditions feature allows you to have different CH configs per user, device, and a fair few other conditions. This would allow you to show/hide entire views based on those conditions among other things.

You can read more about it the docs, but it sounds like what you want to do is conditionally hide a single card. This is something that is more suited for something like state-switch.

Thanks !
I’ll take a look !

I can’t see it on HACS. What am I doing wrong?

Couldn’t tell you. It’s included in HACS by default and found by going to “Frontend”, clicking the add button on the bottom right, and searching for “Custom Header”.

1 Like

Can someone help me out a bit and explain why this code isn’t working. Susanne and Lisa shouldn’t see the left side menu. Both running the Android app. Running the latest version of Home Assistant.

custom_header:
  active_tab_color: var(--state-icon-active-color)
  background: var(--app-header-background-color)
  chevrons: false
  compact_mode: true
  elements_color: var(--app-header-text-color)
  exceptions:
    - conditions:
        user: 'Susanne, Lisa'
      config:
        disable_sidebar: true
  footer_mode: true
  hidden_tab_redirect: false
  shadow: false
  tab_indicator_color: var(--state-icon-active-color)

Latest isn’t a version. Always say what version number you are using as you could be running the beta, a version could be released before someone sees your comment, etc.

What version of CH are you running? Do you get any errors pertaining to CH in your logs or in your browser’s dev tools (when logging in as one of those user’s in a browser)? Include any other information that may be helpful from the issues section of the docs.

Using your exact code and just replacing one of the user names with my own, I can confirm that everything is working as expected in the HA android app, mobile browser, and in multiple browsers on my PC. Are you sure that the user name’s are correct (case and all)? You can check this in the browser dev tools when logged in as one of those users or, if you are not using yaml mode, you can open custom headers settings and scroll to the bottom.

I’m running Home Assistant 111.4 and Custom Header 1.6.3.

The way I have it setup is that each family member has their own dashboard view in Lovelace with components relevant to them. In the app settings I have specified that each family member doesn’t have the default dashboard but the dashboard created for them. When I changed this in the app settings to “default” the left menu disappeared which is exactly what I wanted.

So in case you want to reproduce this bug/feature give that a try. This is fine but would be nice if I could set a user specific dashboard view other than the default one and still get this to work (if this is what is causing this issue for me).

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?