Custom Header

mayker · February 15, 2020, 12:14pm

Have you set up the Dark Sky integration?

lassieee · February 15, 2020, 12:28pm

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

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'".

lassieee · February 15, 2020, 1:26pm

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.

Makis · February 16, 2020, 7:35pm

Yes I have

etchings13 · February 16, 2020, 9:14pm

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.

ASNNetworks · February 16, 2020, 9:46pm

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.

https://gfycat.com/handyfinisheddassierat

Thanks!

mayker · February 16, 2020, 10:47pm

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

kr_noob · February 17, 2020, 1:29am

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?

Makis · February 17, 2020, 12:40pm

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'

mayker · February 18, 2020, 3:41pm

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.

fra · February 21, 2020, 9:34pm

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.

mayker · February 21, 2020, 9:38pm

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.

fra · February 21, 2020, 9:43pm

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

Thanks a lot

mayker · February 21, 2020, 9:49pm

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.

fra · February 21, 2020, 9:52pm

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

mayker · February 21, 2020, 10:10pm

Sorry, fixed the links

fra · February 21, 2020, 10:13pm

thanks a lot

BruceH5200 · February 22, 2020, 4:11pm

Hi,
One of my views is a remote control for the lounge home cinema setup.
I would like to be able to switch in an out of kiosk mode to give more screen real estate.
At the moment, I do this with a button that toggles an input boolean which is referenced in a template in the custom header section of the Lovelace config.

However I would ideally like to do this on a user by user basis.

Is there a way that I could make a switch toggle a different input boolean depending on which user pressed It? or show a different button depending on which user is viewing?

Thanks in advance,
Bruce.

mayker · February 22, 2020, 4:50pm

Use CH to make a view for each user and then hide/show views based on logged in user or use any of the following to make a card, button, etc that changes based on logged in user:

I’m sure there are more.

BruceH5200 · February 22, 2020, 5:43pm

That’s brilliant thanks. I’ll look into those. I wanted to avoid duplicating the view as it is quite a complex view. so didn’t really want to duplicate it. But those button tools look interesting.

thanks