Custom Header

Share your Projects! Dashboards & Frontend
697

Thank you so much for all the work you have done on this and the work you are doing in both of your jobs helping others. Family first!!

3 Likes
698

Hi,

The transparent background not working in footer mode. If “footer_mode: false” it’s look like
:
header_1

If footer_mode: true:

footer_1

My config:

custom_header:
  active_tab_color: yellow
  all_buttons_color: white
  background: transparent
  clock_am_pm: false
  clock_format: '24'
  compact_mode: true
  date_css: 'font-weight:200'
  date_locale: hu-hu
  editor_warnings: false
  exceptions: []
  footer_mode: true
  header_css: 'border-bottom: 1px;'
  hide_help: true
  menu_dropdown: true
  options: clock
  swipe_amount: '50'
  swipe_animate: swipe
  swipe_prevent_default: true
  time_css: 'font-size: 23pt;font-weight:300'
  view_css: 'padding-top:75px;'
  voice: hide
  voice_dropdown: true
  voice_hide: true

It’s a bug, or I miss something?

Thanks for your help!

1 Like
699

Hi
may I ask how do you place icons in the tabs instead of name?

700

You can do this without custum_header, it’s a feature from HA itself.

Look here: https://www.home-assistant.io/lovelace/dashboards-and-views/#icon

EDIT: Actually there is an error in the documentation for HA. The anchor for “icon” is wrongly used twice on that page. Click the link, you will see an explanation about “icon”, but that’s the wron one. Scroll down a bit, there you will see the second anchor for “icon”.
In short: you have to define an icon for your tab. If you’ve done that, HA uses the icon automatically. If no icon is defined, the title is shown.
Here is copy&paste from the doc:

If you define an icon the title will be used as a tool-tip.

Example

- title: Garden
  icon: mdi:flower
701

Sorry, because apparently I am asking in the wrong thread. last question otherwise I will open a new thread.

In the following, I get no picture, just blank (no name either). Can you show me yours tab please?

dashboard

EDIT: it works with = mdi:flower
Thanks!

702

You’re welcome! You can find the icons you can use here: https://materialdesignicons.com/

703

Hi,
On my smartphone (5.5" display), whenever my theme changes, the 5th view icon is partially blocked by an arrow. But there is clearly enough space to display everything without the need of this arrow.
This happens both on a browser and with the official android app.
Whenever this happens, I need to rotate my screen 90°, and then rotate it back so that the arrow disappears.
Is there a way to remedy to this issue ?

some screenshots to illustrate this minor bug :

Screenshot_20200417-012014
Screenshot_20200417-0120144584×1784 450 KB

Thanks !

1 Like
704

Hi guys! I love the CH as it helps to have a much more sleeker design! Great Job!

I saw that someone had issues in Footer Compact Mode with an iOS device. I have this issue too and wanted to ask if it’s fixed now. Alternatively an option to make the footer a little bit big would help too.

Thanks a lot

705

Maybe you can explain what kind of issues :wink:

For footer I use this CSS styling option. Change the ‘30px’ to a value you see fit.

  tab_container_css: >-
    padding-bottom: 30px !important;

Give this (see my footer):

image
image1242×2688 336 KB

2 Likes
706

Ah cool! Thanks. IÂŽll try that. And please show more screenshots from your Dashboard :smiley:
Edit: Worked! Thanks a lot!

1 Like
709

Is it possible to make the icon size from the custom header bigger? I think this look much better and also much smoother using on a mobile device.

710

Hi, I have tried to look through above but its a lot of comments/input on this great project! So feel free to point me to an answer if better.

I have a pretty simple installation of HA and just installed Custom Header. In the Examples in the github installation/conf help you can find this:
__

This will make the menu button display the date like this Wed. Dec. 25 2019 .

custom_header:
button_text:
menu: '{{ dayNameShort }}. {{ monthNameShort }}. {{ dayNum }} {{ year4d }}

and that is all fine but in my HA this example give no result because I dont think I see this Menu button at all. Where is it?

The example above this one (about the header text display) works perfect, no problems, but I have now spent hours trying to understand where this menu button is. Im probbaly stu
 but anyhow


711

It is a great solution!
Is there a way to put a virtual button to the header-bar?
To control some things (for example to control the conditional cards)

Thank you

712

@sand_Rr There is no easy method to increase icon size but you could try messing with custom CSS to achieve it.

@danlun The menu button in HA is only visible when the sidebar has been hidden, either by a small screen width or by turning on “Always hide the sidebar” in the user settings.

@Korte No and I don’t think this is something I would add.

713

@kejszijo and @mat44150 Looks like you both found a bug, will look into it.

2 Likes
714

Thanks, I didnt know that. I just messed up my config while testing all possibel things and need to restore. But then I will try this. And of course you mean “Always hide the sidebar” setting inside the Customer Header plugin?

715

No, user settings are found in HA by clicking on the user icon in the sidebar (very bottom)

1 Like
716

Hi Ryan,

please keep up with the importance of Covid-19 before doing any requests here. we all support you there!

if a spare moment would arise, let me please ask if it would be feasible to have an animated tab icon.

use case:
I now use this for a tab_color:

tabs_color:
  developer: >-
    {{'green' if is_state('binary_sensor.github_repo_has_update','off') else 'red'}}

I would love to make it blink, like we can do in js css with:

animation: >
          [[[
            if (entity.state == 'on') return 'blink 2s ease infinite';
          ]]]

but am not sure how to do so in jinja, or if this would even be possible in the current CH implementation.

maybe add a new option to tabs:

tabs_animation:
  developer: >-
      {{'none' if is_state('binary_sensor.github_repo_has_update','off') else 'blink 2s ease infinite'}}

As said, if you do find a moment of ease, could you have a look?
thanks!

717

Hi, these Errors came from time to time definately caused by the mobile app:

https://xxxc.ui.nabu.casa/hacsfiles/custom-header/custom-header.js:603:15224 Uncaught TypeError: Cannot read property 'setAttribute' of null

shall I open an issue on github or can I do something by myself?
I cleared the chrome cache yesterday on every device.

718

I want to show the weather tab icon with templates and i am using unsuccesfully this template:

  tab_icons:
    5: >-
      <ha-icon icon='mdi:weather-{%if is_state("weather.meteo_darksky", "partlycloudy") -%}night-partly-cloudy{%- else
      -%}{{ states('weather.meteo_darksky')}}{%- endif %}'></ha-icon>

Can someone help me to understand where is wrong?