Custom Header

[mayker (maykar (pronounced "maker" with a southern accent))]

@JKW

Would you consider to a two header?

I most certainly will

[iantrich (Ian)]

Added high/low and precipitation forecasts to my header

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon
      style='padding-bottom: 3px' icon='mdi:weather-
      {% if is_state('weather.dark_sky', 'partlycloudy') -%}partly-cloudy
      {% elif is_state('weather.dark_sky', 'clear-night') -%}night
      {%- else -%}{{states('weather.dark_sky')}}{%- endif %}'></ha-icon>
      {{states.weather.dark_sky.attributes.temperature }}°
      ↑{{states.weather.dark_sky.attributes.forecast[0].temperature
      }}°↓{{states.weather.dark_sky.attributes.forecast[0].templow }}°
      {{states.weather.dark_sky.attributes.forecast[0].precipitation | int }} in
  compact_mode: true

Note: This pretty much takes up the whole header on mobile. I personally use a single tab, so it doesn’t matter much for me

[mayker (maykar (pronounced "maker" with a southern accent))]

Could always use media query exceptions so that depending on the width of the device, more or less is shown. Damn cool though. Might work even better as header text. This is where a split mode (buttons top, tabs bottom) would come in handy.

[Mariusthvdb (Marius)]

reporting back: active tab changing now with version 1.1.2 also on ‘Overview’ Home tab! thanks @mayker. great job.

[cdrom1028]

@mayker, is there a thread for the Lovelace Swipe Navigation plugin? I have a couple questions …

[mayker (maykar (pronounced "maker" with a southern accent))]

Be kind , it needs a rewrite and is next on the list once Custom Header winds down a bit.

↔️ Swipe Navigation

Swipe Navigation Swipe through views on mobile. [image] Features: Animated swiping through views. Configure views to skip over. Set the swipe length needed. Option to disable a browsers default swipe actions. Wrap from first view to last view and vice versa. This project is currently maintained by @Zanna_37 : Big thanks to: @themoffatt for beating me to the punch and letting me make a duplicate project. @RomRider and his decluttering-card for the configuration method. @Zanna_37 …

[jcbbas]

@jwelvaert

Did you change something to get rid of the “error”

Yea, I switched over to custom header instead of using compact-custom-header. Somehow I overlooked the big giant triangles and large lettering that stated custom-card-header is deprecated and replaced by custom header haha

[sbmlat (shreram)]

@mayker

The bigger issues were the fact that there were many quotes in the second template that were not needed. I’m not in a position to test the templates (again, sorry), but will when I can. Here is another untested version for you and maybe one of the jinja folks from this thread can chime in.

Yes, this time it worked. Weird. I think I added extra quotes around the string in the first version. Thank you for fixing this for me.

[Mariusthvdb (Marius)]

Hi @mayker

latest version solved the active tab issue but introduced another, that is to say, on the mobile device iPhone:

If I click a tab, (and the indicator shows the clicked tab) it doesn’t always change to that tab.
secondly, very often, swiping to a tab currently out of sight, and clicking that tab, the browser does go to that tab, but the tab menu keeps moving left and right, and ends up without having the active tab in sight…

Can’t see the logic yet, and it doesnt happen all the time, but something isn’t right, on mobile.

my mobile settings:

  - conditions:
      user_agent: iPhone
    config:
      menu_hide: true
#      voice_hide: false
      options_hide: true

so I would think nothing special

let me know if this is on the radar, or you need a bug issue on GitHub

[ebnerjoh (Johannes Ebner)]

Hi,

I have the old version installed, but since a newer version of HA I cannot go to the lovelace config ui anymore.

How can I remove the old version?

Br,
Johannes

[mayker (maykar (pronounced "maker" with a southern accent))]

If you mean an old version of this project, Custom Header: add ?disable_ch to the end of your URL

If you mean Compact Custom Header: add ?disable_cch

[ebnerjoh (Johannes Ebner)]

I found it already, with Edge I was able to go into the Lovellace-UI and change to the new plugin.

Br,
Johannes

[mayker (maykar (pronounced "maker" with a southern accent))]

@Mariusthvdb

If I click a tab, (and the indicator shows the clicked tab) it doesn’t always change to that tab.

This is something that I’ve observed on both the iOS app and in Safari when not using Custom Header, so I’m not sure there’s much I can do about that one. As for the others though (tabs moving around etc), I’m working on it now.

[jncanches (jn)]

Hi,

HACS show that I have 1.1.3 version but DevTools on Chrome say 1.1.0.
Is it normal or is it suggesting I have a problem (my cache have been cleared and Home Assistant restarted already)

Also, I have lots of errors in DevTools

. Some one already reported that but says that it is fixed with 1.1.0…

Thanks for this great addon !

[mayker (maykar (pronounced "maker" with a southern accent))]

Have you tried uninstalling with HACS and then reinstalling? Also, be sure you don’t have a device that is connected and still using the old version (refresh it)

[Steven_Rollason]

I’ve been experimenting with @iantrich’s example of displaying the weather on the options button and found that, for me in Google Chrome, padding-bottom was tending to affect the text around it (possibly due to it affecting the height of the icon element). What ended up working for me was doing it like this:

button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <ha-icon style='top: -5px'
      icon='mdi:weather-{%- if is_state('weather.dark_sky', 'partlycloudy')
      -%}partly-cloudy {%- elif is_state('weather.dark_sky', 'clear-night')
      -%}night {%- else -%}{{states('weather.dark_sky')}}{%- endif
      -%}'></ha-icon> {{states.weather.dark_sky.attributes.temperature }}°

This uses the top css attribute to set the position of the icon to 5 pixels above the button, which corrects the alignment for me without affecting anything else on the button.

[Mariusthvdb (Marius)]

how odd this works for you. If I do that it shows like this:

im wondering if there isn’t a css setting to set it to vertically centered, so we dont have to set specific pixels? wouldn’t vertical-align: middle work?

well, I guess it does

should have thought about that immediately …

[Steven_Rollason]

It looks like how it looks depends on the particular icon. I tested it with the icon hardcoded as mdi:weather-pouring and it looked like yours. With mdi:weather-partly-cloudy, which is what it is currently here, it looks like:

Where did you put the vertical-align: middle? I tried that on the ha-icon like this:

button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <ha-icon style='vertical-align: middle'
      icon='mdi:weather-{%- if is_state('weather.dark_sky', 'partlycloudy')
      -%}partly-cloudy {%- elif is_state('weather.dark_sky', 'clear-night')
      -%}night {%- else -%}{{states('weather.dark_sky')}}{%- endif
      -%}'></ha-icon> {{states.weather.dark_sky.attributes.temperature }}°

but that made it look like this:

[Mariusthvdb (Marius)]

@Steven_Rollason

Where did you put the vertical-align: middle ?

indeed like this:

button_text:
  options: >-
    {{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='vertical-align: middle';></ha-icon> - {{states('sensor.temp_current') }}°

[mayker (maykar (pronounced "maker" with a southern accent))]

@Mariusthvdb @Steven_Rollason

Unfortunately, not all browsers are created equal. Many CSS options render differently depending on the browser, you can see this by viewing this site in multiple browsers. For me the star renders in a slightly different spot using the vertical-align demo in every browser I’ve tried (and none looked like their sample images below the demo).

Usually it’s not a big deal, but with something this small even one pixel difference is noticeable. It will take some tweaking to make it look how you want in the browser of your choice.