Custom Header

Share your Projects! Dashboards & Frontend
498

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
499

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!

500

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

501

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?

502

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'
503

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
504

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.

505

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.

506

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

Thanks a lot

507

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.

508

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

509

Sorry, fixed the links

510

thanks a lot

511

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.

512

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.

513

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

514

Hi. First big thanks your custom-header custom part. Thats give me so much more space my tablet view.

Just have on questions is that possible to get your custom header project or is that allready there. I use your compact_mode: true. I think is that possible to get normal clock going there?

Here is example picture with paint, what i try to explain :slight_smile:

clock
clock692×42 2.18 KB

515

This isn’t something I would add. With the way the header elements interact with eachother it would be a mess to try and support.

1 Like
516

@mayker I went through the docs but can’t find any easy way to center the tabs. In footer mode it’s still justified to the left which looks odd. Any easy way to accomplish that?

517

Is there any way to install this without HACS? Looking through the github there is no raw custom-header.js that I can copy to my config.