Custom Header

@exetico I have considered it and if I ever find the time I may create it

@ferad There is currently no option to hide the settings option, but that would be a good feature request. The only option right now would be to hide the options button completely.

1 Like

Try this, this is what I use.

1 Like

Oh, awesome! Glad to see someone did it, I’ve got some code saved from an attempt at a custom-sidebar project with some features that they might be interested in. Will have to make a PR soon.

1 Like

Hi, is it possible to enable ‘Footer mode’ only for mobile, and not for Desktop? thanks


1 Like

Is it just me or are exceptions broken in the latest version? Whenever I make changes to the kiosk exception, and press save, when I go back, they chosen options have not stuck.

Under any exception, everything is also ghosted out. I’ve tried unsetting “Disabled mode” too…


I have the same Problem. And everything i setup for a single user (exception) does not have any impact. Whether in the Custom Header Menu or Raw Editor.

@timdonovanuk & @jvosterode

Please read the issues section and post an issue with the required info

Hi, is it possible to set the color of the active tab individually per tab? So basically everyhing is grey, but when I select tab 0, it’s white, when I select tab 1 it’s yellow etc. I read through the documentations, but all I could do is give each tab a different color. But then they’re in that color all the time, I want them to only be in that color when the tab is active.

Is this possible, or am I trying to accomplish the impossible?

This is currently only possible with exceptions with tab conditions:

    - conditions:
        tab: 0
        active_tab_color: white
    - conditions:
        tab: 1
        active_tab_color: yellow

That’s incredible

I couldn’t get this to work. Could that be because I already have setup different exceptions (with footer mode etc) for different users and device id’s?

Yes, if you have other exceptions already this isn’t going to help you. I’ll think about adding a feature that would help support this, but it might be a bit.

That’s too bad. It’s not completely necessary, but would make my UI just that much more clean. I have created color coded UI where each domain has it’s own color theme (yellow for light buttons e.g) and have separated domains per tab. So I wanted to have the tabs their own color to match the domain.

I need some help please

I have installed CH through HACS
I would like to add the following code in raw editor, but nothing happens.
If I keer only the first 2 lines the the header gets narrow. (indicates that it works)
What am I doing wrong?

  compact_mode: true
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon icon='mdi:weather-{%
      if is_state("weather.dark_sky", "partlycloudy") -%}partly-cloudy{%- else
      -%}{{ states('weather.dark_sky')}}{%- endif %}'></ha-icon>
      {{ }}°

Have you set up the Dark Sky integration?

Hi, great work on this module/plugin, I love it :slight_smile:

For some reason though, I cannot get it to do what I want anymore.
My ui-lovelace.yaml looks like this (i already removed all stuff like exceptions and conditions):

title: Home
  - url: /local/plugins/custom-header.js?v=1.3.2
    type: module
  footer_mode: false
  compact_mode: true
  - !include lovelace/00_first.yaml

For some reason the footer is always shown and compact_mode is not enabled.
I’m running Home Assistant 0.105.4 and version 1.3.2 of custom-header (manual installation).
I’ve cleared the cache through the developer console, restarted HA but I can’t fix the footer and compact_mode.

What does work is the custom background in lovelace/00_first.yaml:

title: first
background: center / cover no-repeat url("/local/img/grey02.jpg") fixed

I’m fresh out of ideas…
Thanks in advance for any help and/or suggestions.

oh and I’ve been getting this error I think since upgrading from HA 0.104.2:

020-02-15 12:21:11 ERROR (MainThread) [frontend.js.latest.202001303] https://<my-dmain>/local/plugins/custom-header.js?v=1.3.2:145:150263 Unc
aught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' 'u

wow, I feel stupid… I figured it out.
It seems my issues with this component started when I upgraded my traefik installation from 1.7 to 2.1 and added some https hardening options like: contentSecurityPolicy: “default-src ‘self’ ‘unsafe-inline’”
When I disable this option all is well and the custom-header module works as expected.

Yes I have

I was looking to do something similar (different header color per active tab) and was glad to see this posted. It wasn’t working for me at first until I added quotes around the tab numbers, like so:

    - conditions:
        tab: '0'
        active_tab_color: 'white'
    - conditions:
        tab: '1'
        active_tab_color: 'yellow'

Not sure if this will help in your setup but might be worth a shot.

Also, in order to get multiple conditions to work I had to create repetitive exceptions:

    - conditions:
        tab: '1'
        background: '#9932CC'
    - conditions:
        tab: '1'
        user_agent: Mobile
        menu_hide: true
        options_hide: true
        background: '#9932CC'

The first condition makes the header background purple for tab 1. The problem is it doesn’t work in conjunction with my mobile user exceptions, so I created another exception that includes both conditions. The second one here makes the header background purple for tab 1 when also on mobile. It’s a little roundabout but seems to work in my case.