Custom Header

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.

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

custom_header:
  compact_mode: true
  button_text:
    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>
      {{states.weather.dark_sky.attributes.temperature }}°

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
resources:
  - url: /local/plugins/custom-header.js?v=1.3.2
    type: module
custom_header:
  footer_mode: false
  compact_mode: true
views:
  - !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.

edit:
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
nsafe-inline'".

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:

custom_header:
  exceptions:
    - conditions:
        tab: '0'
      config:
        active_tab_color: 'white'
    - conditions:
        tab: '1'
      config:
        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'
      config:
        background: '#9932CC'
    - conditions:
        tab: '1'
        user_agent: Mobile
      config:
        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.

1 Like

Great suggestion! Although it’s a hassle setting it up for multiple users and won’t do good to my already huge lines of code, it works perfectly! Just a one time thing, to make my UI just that more streamlined.

Thanks!

Make sure that it is working by going to developer tools >> states and making sure that weather.dark_sky exists and is reporting data.

First, CH is great, thank you @mayker for such a versatile tool!

I’ve been searching for a way to display news headlines as a marquee (either scrolling or vertical flip) like in the CH showcase thread.

I use @iantrich’s Feedparser to get RSS headlines into a list-card - but this takes up too much room on my UI - and was wondering how to get the values into the header_text: using CH?

Feedparser sensor config:

- platform: feedparser
    name: NPR
    feed_url: 'https://www.npr.org/rss/rss.php?id=1001'
    date_format: '%a, %b %d %I:%M %p'
    show_topn: 20
    inclusions:
      - title
    exclusions:
      - language

The above gives me sensor.npr, with an attribute of “entries” which contain the titles I would like displayed in the header. Here is what a template of {{ state_attr('sensor.npr', 'entries') }} looks like in Dev Tools:

[{'title': '1,100 Former DOJ Employees Call On Barr To Resign After Intervening In Stone Case'}, {'title': 'Pneumonia Forces Early End To Elton John Concert On His Farewell Tour'}, {'title': '44 Americans On The Diamond Princess Cruise Ship Diagnosed With Coronavirus'}, {'title': "Officials: Mississippi Flooding Remains 'Precarious,' And Can 'Turn At Any Moment'"}, {'title': 'Amid Climate And Housing Crises, Cities Struggle To Place Housing Near Transit'}, {'title': "Fact-Checking 'Contagion' — In Wake Of Coronavirus, The 2011 Movie Is Trending"}, {'title': "5 Years After Indiana's Historic HIV Outbreak, Many Rural Places Remain At Risk"}, {'title': 'Storm Dennis, Massive Bomb Cyclone, Hits United Kingdom'}, {'title': 'U.S. To Evacuate Americans From Virus-Struck Diamond Princess Cruise Ship'}, {'title': 'PHOTOS: Scenes From The Epicenter Of The Coronavirus Outbreak'}, {'title': "Why Pakistanis In The Otherworldly Highlands Aren't Happy To See Pakistani Tourists"}, {'title': "Nevada Voters Begin Early Caucusing On Saturday. Here's What You Need To Know"}, {'title': 'Early Novel Written By Free Black Woman Called Out Racism Among Abolitionists'}, {'title': 'LA County DA Moves To Dismiss 66,000 Marijuana-Related Convictions'}, {'title': "Break-Ups And Throw-Ups: What It's Like To Work At A Restaurant On Valentine's Day"}]

Is it possible to pull these titles from feedparser into CH’s header text, either as either a scrolling marquee or vertical flip?

i get the following.
so in order to work I have to add more options in the configuration.yaml for dark sky? is that right?
if yes, can you give me please a list of it. perhaps from yours configuration?

attribution: Powered by Dark Sky
unit_of_measurement: km/h
friendly_name: Dark Sky Wind Speed
icon: 'mdi:weather-windy'

I don’t use dark sky and I also did not write the template that you’re trying to use. A good place to start to troubleshoot would be to go to “developer tools” in your sidebar, then “templates” and test that the templates you’re using are reporting data. Example to paste into the template editor:

{{ states('weather.dark_sky') }}
{{ states.weather.dark_sky.attributes.temperature }}

Discussions on this unsupported CH “feature” should be posted here.

1 Like

Dear all, i’m using HA in my bed&breakfast and i’m looking for a solution to disable the link on “user profile” in the bottom left corner of my lovelace dashboard because i have to BLOCK THE ABILITY to change password for my customers.

I tried to use Kiosk Mode but - at the same time - my customers have to check history and notifications…

Someone could point me to the right direction?
Thanks a lot.

Custom Header doesn’t modify the sidebar. I think the closest thing to what you are looking for would be custom-sidebar, but I don’t believe you can hide the user profile with it. Maybe add a feature request on that project.

Thanks a lot man!
And… what do you think about the ability to move “history and notifications” on the tab menu???

Thanks a lot

That’s not something I’d add to custom header, but with some fancy html & css you may be able to create buttons that link to those sections. Look here for an example on how to create buttons in the header text, but you might be better off making images that link to where you want. Discussion of that unsupported feature should stay in that thread.

sorry but i don’t see link to the discussion… thanks

Sorry, fixed the links

thanks a lot