Custom Header

Share your Projects! Dashboards & Frontend
856

It’s working as advertised! Thanks once again!

1 Like
857

v1.5.8

Added Features:

  • Config and header now update on device orientation change. Suggested by @nassost
  • tab_text_only: Display only text on tabs, no icons. Suggested by @LordShadowen
3 Likes
858

Can someone help me please?

I’ve split up my theme in a light version and a dark version.
I’ve made an automation so it auto changes…
The only problem i have is with my custom header.

When using dark theme, the text of the header (white) is fine
However, when using light theme, i dont see anything in my header lol

How do i fix this?
Heres my code.

custom_header:
  background: var(--primary-background-color);
  elements_color: var(--primary-text-color);
  active_tab_color: var(--state-icon-active-color);
  tab_indicator_color: var(--primary-text-color);
  compact_mode: true
  split_mode: true
  reverse_tab_direction: false
  reverse_button_direction: false
  options_hide: true
  shadow: false
  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>
    Huidige buitentemperatuur: {{states('sensor.temperature')}}°C</div></div><div><div>
    {{states('sensor.greeting')}}</div></div><div><div>
    {{states('sensor.afval')}}</div></div><div><div>
859

Hard to say for sure without knowing what your theme’s colors are, but possibly your light theme’s primary-background-color and primary-text-color are the same?

Maybe change the template’s colors as well like #flip > div > div {color:#fff

If your header background is white and that color is white (#fff) then you wouldn’t be able to see it.

You could just remove the color (color:#fff;) or change it to something else, like one of the theme variables

860

Themes im using is the goole light and google dark theme
light, then background is white indeed, so the color:#fff doesnt show indeed
on dark its ok cause background then is black

problem is, if i change it to dark, then it wont be good when using dark mode

so is there a way to put inside the header config to use white when theme dark mode
and use black when using theme light mode?

i tried changeing the flip div color, but i found 3x times the color in that config

861

The discussion of this unsupported feature really belongs in this thread and I’ve answered you there:
https://community.home-assistant.io/t/custom-header-template-showcase-and-discussion

862

@Mayker

i have a button on my home view that brings me to another view “persoon1”

With custom header i use the split mode so my tabs are at bottom.
In the tabs theres a tab “persoon1” too
I want to get rid of that tab , but when i use hide tab “persoon1” its gone which is good, but when i click the button on my home view, to bring me to that persoon1 view, its gone too

Is there a way to just hide it in the bottom tab , but not on my homepage?

863

hidden_tab_redirect: false

https://maykar.github.io/custom-header/#configuration/tabs

864

ah now i understand that setting!
superb, works

865

Just fo reverybody using the

user_agent: Mobile

condition, to identify the mobile app:

The user agent of the currently updated mobile app* has changed to:

Home Assistant/2020.1 (io.robbie.HomeAssistant; build:17; iOS 13.5.0) Alamofire/4.9.1

So you need to use another string (like “Alamofire” or “iOS”) for this to work.

*Home Assistant iOS app not available in App Store - #23 by SeanM

4 Likes
866

EDIT: Nevermind - please ignore below - just saw in the documentation that the editor is not available in YAML mode. I must not have noticed when I migrated to YAML mode a few months ago and thought it was a more recent issue.

I have a strange issue now where the custom header settings are no longer available in the top right menu. This seems to only happen in the dashboard that is controlled in yaml mode. I tried creating a new dashboard that is controlled via the UI and in this dashboard I can access the custom header settings in the top right.

I can confirm custom header is working in my default yaml dashboard and I tried setting

hide_ch_settings: false

but doesn’t help. I was able to hide the reload resources option by using

hide_reload_resources: true
867

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

868

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

869

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
870

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
871

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

872

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.

874

Thanks !
I’ll take a look !

877

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

878

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