Custom Header

[nassost (Nassos)]

I really love CH and the things it does! I’m struggling with two issues though:

1. Is it possible to use media_query for the same user_agent in order to have two different configs depending on whether I’m holding my tablet in portrait or landscape mode (my tablet has a 1920x1200 resolution)?

2. I can’t seem to find a way to use two user_agents for one config. Is user_agent: Windows, X705L not enough?

Here is my current setup

custom_header:
  active_tab_color: var(--state-icon-active-color)
  background: var(--app-header-background-color)
  editor_warnings: false
  elements_color: var(--app-header-text-color)
  exceptions:
    - conditions:
        user_agent: Windows
      config:
        button_text:
          options: >-
            {{ hours24 }}:{{ minutesLZ }} <div style='display:inline-block;
            height:24px; width:24px; vertical-align:bottom;'><ha-icon
            icon='mdi:weather-{% if is_state("weather.gismeteo", "partlycloudy")
            -%}partly-cloudy{%- else -%}{{ states('weather.gismeteo')}}{%- endif
            %}'></ha-icon></div> {{ states('sensor.temperature_38') }}°        
        default_tab: FLOORPLAN
        header_text: >-
          <style>ha-icon {display:inline-block; float:left} #flipper
          {color:#999;} #flip {height:24px;overflow:hidden;} #flip > div > div
          {color:#99h;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><ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_2", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_2", "on") %}green{% else %}#800{%
          endif %}'</ha-icon></div><div><ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_3", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_3", "on") %}green{% else %}#800{%
          endif %}'</ha-icon></div><div><ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_4", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_4", "on") %}green{% else %}#800{%
          endif %}'</ha-icon></div><div id=flipper><div id=flip><div> <div>
          {{states('counter.count_espresso')}} coffees
          today</div></div><div><div> Last 48h rain:
          {{float(states('sensor.total_48h_precipitation'))}}
          mm</div></div><div><div> Sonoff 2 was ON for {{
          float(states('sensor.sonoff_2_on')) * 60 }} minutes
          </div></div><div><div> {{states('counter.count_espresso')}} coffees
          today</div></div><div><div>
        hide_tabs: '1,2'
    - conditions:
        user_agent: VOG-L29
      config:
        button_text:
          options: >-
            <div style='display:inline-block; height:24px; width:24px;
            vertical-align:bottom;'><ha-icon icon='mdi:weather-{% if
            is_state("weather.gismeteo", "partlycloudy") -%}partly-cloudy{%-
            else -%}{{ states('weather.gismeteo')}}{%- endif
            %}'></ha-icon></div> {{ states('sensor.temperature_38') }}°       
        default_tab: FLOOR1
        header_text: >-
          <div> <div style='display:inline-block'> <ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_2", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_2", "on") %}green{% else %}#800{%
          endif %}'</ha-icon> </div> <div style='display:inline-block'> <ha-icon
          icon='{% if is_state("switch.sonoff_1000b19f94_3", "on") %}mdi:water{%
          else %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_3", "on") %}green{% else %}#800{%
          endif %}'</ha-icon> </div> <div style='display:inline-block'> <ha-icon
          icon='{% if is_state("switch.sonoff_1000b19f94_4", "on") %}mdi:water{%
          else %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_4", "on") %}green{% else %}#800{%
          endif %}'</ha-icon> </div>
        hide_tabs: '0,6'
    - conditions:
        user_agent: X705L
      config:
        button_text:
          options: >-
            {{ hours24 }}:{{ minutesLZ }} <div style='display:inline-block;
            height:24px; width:24px; vertical-align:bottom;'><ha-icon
            icon='mdi:weather-{% if is_state("weather.gismeteo", "partlycloudy")
            -%}partly-cloudy{%- else -%}{{ states('weather.gismeteo')}}{%- endif
            %}'></ha-icon></div> {{ states('sensor.temperature_38')
            }}°                
        default_tab: FLOORPLAN
        header_text: >-
          <style>ha-icon {display:inline-block; float:left} #flipper
          {color:#999;} #flip {height:24px;overflow:hidden;} #flip > div > div
          {color:#99h;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><ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_2", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_2", "on") %}green{% else %}#800{%
          endif %}'</ha-icon></div><div><ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_3", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_3", "on") %}green{% else %}#800{%
          endif %}'</ha-icon></div><div><ha-icon icon='{% if
          is_state("switch.sonoff_1000b19f94_4", "on") %}mdi:water{% else
          %}mdi:water-off{% endif %}' style='color:{% if
          is_state("switch.sonoff_1000b19f94_4", "on") %}green{% else %}#800{%
          endif %}'</ha-icon></div><div id=flipper><div id=flip><div> <div>
          {{states('counter.count_espresso')}} coffees
          today</div></div><div><div> Last 48h rain:
          {{float(states('sensor.total_48h_precipitation'))}}
          mm</div></div><div><div> Sonoff 2 was ON for {{
          float(states('sensor.sonoff_2_on')) * 60 }} minutes
          </div></div><div><div> {{states('counter.count_espresso')}} coffees
          today</div></div><div><div>        
        hide_tabs: '1,2'
  footer_mode: true
  menu_dropdown: true
  shadow: false
  split_mode: true
  tab_indicator_color: var(--state-icon-active-color)

[mayker (maykar (pronounced "maker" with a southern accent))]

These sound like 2 good feature requests.

@nassost

Is it possible to use media_query for the same user_agent in order to have two different configs depending on whether I’m holding my tablet in portrait or landscape mode

Currently, CH doesn’t rebuild when screen orientation changes. So, while this would work, you would need to refresh when you change orientation or already have it in the desired orientation before opening.

@nassost

I can’t seem to find a way to use two user_agents for one config. Is user_agent: Windows, X705L not enough?

user_agent isn’t setup to allow for multiple user agents per condition…yet

Again, these are two very helpful feature requests. I highly suggest adding them to Github so that I don’t forget to work on them on my next go around.

[mayker (maykar (pronounced "maker" with a southern accent))]

@Mariusthvdb

for now I have Zero CH errors

Give it time, I’m sure you’ll be able to find some more

[nassost (Nassos)]

Added as requests in github @mayker! Thanks for your time!

[Mariusthvdb (Marius)]

haha,
honored by your trust

its been 3 hours now, still no issue in sight…

[mayker (maykar (pronounced "maker" with a southern accent))]

@nassost

I can’t seem to find a way to use two user_agents for one config. Is user_agent: Windows, X705L not enough?

I’ve mentioned this in the feature request on Github, but in case anyone else is in a similar situation:

I was working on adding a feature for this when I remembered that it already exists. This is exactly the kind of thing the template condition was made for. To cut down on feature bloat, this should be used rather than adding another feature to accomidate.

  exceptions:
    - conditions:
        template: "{{ 'Windows' in userAgent or 'X705L' in userAgent }}"
      config:

[nassost (Nassos)]

It’s working as advertised! Thanks once again!

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[skank]

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>

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[skank]

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

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[skank]

@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?

[mayker (maykar (pronounced "maker" with a southern accent))]

hidden_tab_redirect: false

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

[skank]

@mayker

hidden_tab_redirect: false

ah now i understand that setting!
superb, works

[ObiKaiKenobi]

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

[atebeta (Christopher Stokkmo)]

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.

@mayker

As mentioned in the configuration section, after installing CH you will have a new option in the menu on the top right called “Custom Header”. This will be how you edit it’s config, you can modify advanced options by using HA’s “raw config editor”.

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

[rabbitxxl]

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

[jimz011 (Jim)]

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

[mayker (maykar (pronounced "maker" with a southern accent))]

@ObiKaiKenobi

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

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.