Custom Header

[sbmlat (shreram)]

@mayker

Try this, watch out for extra spaces and quotes.

  tab_icons:
    '1': '{%- if states.sensor.house_mode.state | lower == "day" %}mdi:alarm{% endif %}'

This one worked. Then what’s the use of {%- ?? Isn’t that supposed to remove the white spaces before the string?

Following snippet didn’t work.

@mayker

    '0': >-
      {% if is_state('device_tracker.life360_phone1', 'home') and is_state('device_tracker.life360_phone2', 'home') %}
      mdi:account-group-outline
      {% elif is_state('device_tracker.life360_phone1', 'not_home') and is_state('device_tracker.life360_phone2', 'home') %}
      mdi:account-star
      {% elif is_state('device_tracker.life360_phone1', 'home') and is_state('device_tracker.life360_phone2', 'not_home') %}
      mdi:account-tie
      {% else %}
      mdi:alarm
      {% endif %}

[weado]

Hello,

And thank you for this great plugin.

I use the “custom header” because I used the “compact custom header” before. But, do you know if it’s possible to remove the arrows in the header, because, on my phone, I only see 3 icons ( on 7 in all), whereas I could see 5 with the compact custom header (I just had to swip to see the other icons).

Thank you

[krovachek (Krisztian Borsi)]

Hello @mayker, there is a grey header on some view again instead of full transparent background. How can I set up it?

Now:

Before version 1.0.8:

[ludeeus]

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

[weado]

Thank you !!!

[Mariusthvdb (Marius)]

HI,

can confirm 1.0.8 solves the issue for the bottom view overflowing content.

Still has the odd tab indicator issue though. Indicator remains fixed, when one clicks Overview (from any other tab) or, alternative scenario, one clicks any other left menu-item, and consequently returns to the overview page (which leads to the home page)

though this is indicated to be fixed in 107, it in fact isn’t.

[Shayne_Bergan (Shayno)]

background: transparent Will do the trick, Just make sure you update to the latest version.

[krovachek (Krisztian Borsi)]

It doesn’t work. I have 2 views with grey header and the other ones are transparent.

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

Please submit an issue with as much of the requested info as possible. Thank you.

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

@sbmlat

This one worked. Then what’s the use of {%- ?? Isn’t that supposed to remove the white spaces before the string?

That one was probably fine, I just went through your config quickly without testing as I was, and now am again, at work.

The bigger issues were the fact that there were many quotes in the second template that were not needed. I’m not in a position to test the templates (again, sorry), but will when I can. Here is another untested version for you and maybe one of the jinja folks from this thread can chime in.

    '0': >-
      {%- if is_state('device_tracker.life360_phone1', 'home') and is_state('device_tracker.life360_phone2', 'home') -%}
      mdi:account-group-outline
      {%- elif is_state('device_tracker.life360_phone1', 'not_home') and is_state('device_tracker.life360_phone2', 'home') -%}
      mdi:account-star
      {%- elif is_state('device_tracker.life360_phone1', 'home') and is_state('device_tracker.life360_phone2', 'not_home') -%}
      mdi:account-tie
      {%- else -%}
      mdi:alarm
      {%- endif -%}

Edit: The above works for me.

[Matt_Barnes]

I have installed this (manually as do not have Hacs yet) and it is working but I used to have the CCH with a transparent background using this:

cch-background: 'rgba(150, 150, 150, 0.1)'                                 

I have added the below into my theme but the header is still default blue colour. Any thoughts?

custom_header-background: 'rgba(150, 150, 150, 0.1)'                     

Image as the header currently stands:

[VDRainer]

Read https://maykar.github.io/custom-header/#styling/advanced for the CSS variables.

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

There is currently a bit with transparent headers and panel mode, fix is coming shortly. Just as an FYI. @VDRainer is right though, just use the correct CSS vars

[klogg]

I’d just like to chime in here and say that I also have problems getting any templated icons to work.
I am trying something VERY similar (almost identical) to the home/away thing and can’t get any of the suggestions or my previous attempts to work.

Not trying to apply any pressure¹, just another confirmation of difficulties.

¹ I realy like the new Custom Header…

[Mariusthvdb (Marius)]

I use this:

tab_icons:
  alarm: "{{states('sensor.alarm_panel_icon')}}"
  phones_tablets: "{{states('sensor.presence_icon')}}"
  weer_klimaat: "{{states('sensor.weather_icon')}}"
  alarmclock: "{{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}"

or:

tab_icons:
  alarm: >-
    {{states('sensor.alarm_panel_icon')}}
  phones_tablets: >-
    {{states('sensor.presence_icon')}}
  weer_klimaat: >-
    {{states('sensor.weather_icon')}}
  alarmclock: >-
    {{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}

note the dash in >- is necessary, to strip a possible newline after the template result, which prevents correct working in CH

example for one of the template sensors:

sensor:
  - platform: template
    sensors:
      presence_icon:
        friendly_name: Presence icon
        value_template: >
          {% set presence = states('sensor.family_home') %}
          {% set mapper = {'0':'mdi:account-off',
                           '1':'mdi:account',
                           '2':'mdi:account-multiple',
                           '3':'mdi:account-multiple-check'} %}
          {{ mapper[presence] if presence in mapper else 'mdi:account-group'}}
        icon_template: >
          {{states('sensor.presence_icon')}}

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

@klogg

I’d just like to chime in here and say that I also have problems getting any templated icons to work

Show examples of what you have tried and I (we) can try to help.

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

I’m going to add a test_template: option in the next release. It will output the template results to your browser’s dev console and will update just like a regular template with entity changes.

[ObiKaiKenobi]

This might do the trick:

custom_header:
  background: 'rgba(150, 150, 150, 0.2)'

“background” is a seperate variable unter the “custom_header” section.

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

Matt is trying to use the Custom Header CSS variables in an HA theme. Listed at the top of this page:

https://maykar.github.io/custom-header/#styling/advanced

[ObiKaiKenobi]

Ah, OK. I see - my bad…