Custom Header

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

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

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

1 Like

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. :+1:

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 :wink:

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

1 Like

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

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

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

Br,
Johannes

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.

1 Like

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 !

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)

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.

1 Like

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

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

06

should have thought about that immediately …:wink:

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:

44

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:

55

indeed like this:

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

@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.

Hello folks,

So I setup my config this way. My goal is to restrict Sarah’s access to only one tabs with url pathway sea. However, once she logs in she can see all the tabs. LL UI specifies user by their unique ID number is this the case with custom header? If not how can I go about fixing this. Any help will be greatly appreciated. On the side note it is my first time using CH.

  header_text: Home
  conditions:
    user: Sarah
  config:
    hide_help: true
    menu_hide: true
    show_tabs:
      - sea
    hide_tabs:
      - admin
      - mp
      - cam
    default_tab:
      - sea

Are you sure that the user’s name (not username) is in fact “Sarah”? Also, there is no reason to use hide tabs and show tabs at the same time and you don’t need to specify a default tab if there is only one available tab. Try the config below and check that it is the correct user’s name.

  header_text: Home
  exceptions:  # <-- You were missing this.
    - conditions:
        user: Sarah
      config:
        hide_help: true
        menu_hide: true
        show_tabs:
          - sea

Edit: you’re also missing “exceptions” in your config.

https://maykar.github.io/custom-header/#configuration/exceptions

Thanks for prompt reply. The name shown in her user profile is Sarah with capital “S”. She uses “sarah” (with small “s”) to log into HA, which I assume is her username. Am I correct? Let me give it a shot and I will get back to you.

Oops, I am blind. It is working like charm. Thank you so much for the help.