Custom Header

Share your Projects! Dashboards & Frontend
353

yes! that would be awesome! I already had a go at that, didn’t exactly know how tbh, but if failed obviously. What would that template be? Since user-agent isn’t an attributes available in the states?

Also, if you’d add that template capability there, checking it for not Chrome would be possible too :wink:

354

Once it’s added as a template variable (will try to get it in next release) you’d start with something like:

{% if 'chrome' in userAgent %}
1 Like
355

yes, very very nice. So short and simple. beautiful. Hope you can make it, to would really step up CH even further!

thank you so very much.

that would solve all, because:

{{ 'Chrome' and 'Mac' in useragent }}

would then be possible also, as would

{{ 'Chrome' not in useragent }}

just tested it locally with the full useragent in the {% set useragent =  'copieduseragent' %} and that works perfectly.
1 Like
356

Yeah I have the same issue, makes the footer mode unusable on iOS unless it it possible to add some padding to the bottom.

357

OTOH, the footer is the perfect place for my Marquee :wink:

358

tab_container_css: 'padding-bottom: 10px;'

increase as needed

359

Hi,

Is there anyway to specify a different customer header behavior for one specific tab, i.e on one of the tab I would like to enable footer mode but on the others header should stay at top? I thought previously that query_string can help about that but after several try I believe I am on wrong track.

By the way I really like this custom components :slight_smile: great functionalities.

360

Is it possible to change the button text based on the user_agent?

361

@Langh_Tamas Not yet, but it is currently being worked on.

@slipx06 Yes, read through the exception & button config portions of the docs. Example:

custom_header:
  exceptions:
    - conditions:
        user_agent: Mobile
      config:
        button_text:
          menu: 'text'
2 Likes
362

Thanks, that worked perfectly. Any idea how I can change the color on the very top of the header in the iOS app from the default blue?

PNG image
PNG image1125×290 7.59 KB

363

Trying to get the custom header to work, but i put my lovelace to kiosk mode and can’t deactivate it anymore. How to get that?

364

2nd important note

365

I believe the iOS app uses the primary color from your theme as the status bar color, not sure if it can be changed any other way.

366

Not sure, but i think this only works if the theme is set to ‘Backend-selected’ and then set via service call.

367

Release 1.2.2

This one adds a bunch of new features for templates and exceptions, including the much requested per tab condition for exceptions.

New Exception Conditions:

  • is_admin : Set to true or false to match admin or not
  • is_owner : Set to true or false to match owner or not
  • tab : Can be a single tab or comma separated list of tabs. Accepts ranges, paths, and titles.
  • template: Accepts a Jinja template that returns true or false.

Also added the ability to use a user’s ID number in the user: condition.

New Template Variables:

  • deviceID : This uses card-tools device ID implementation, but doesn’t require card-tools.
  • isAdmin : Returns true or false if user is an admin
  • isOwner : Returns true or false if user is the owner
  • userID : User’s unique ID number
  • userAgent : Full user agent string
  • viewTitle : Title of the current view
  • viewPath : Path of the current view
  • viewIndex : Index number of the current view
  • url : Full current URL

Fixes:

  • Tabs not hiding while in kiosk mode (fixes swipe-navigation swiping to hidden tabs as well).
  • Respects new app-header theme variables for header text and background.
  • Extra space on bottom of view in kiosk mode causing scrollbar to always be visible.
2 Likes
368

must be getting daft here, but clicking https://github.com/maykar/custom-header/releases/tag/1.2.2 and the sourcecode zip file button gives me the source in all its glory, but no custom-header.js …

am I missing the obvious here?

manual install.

369

Hi All, stumbled across this beauty of an addon whilst trying to figure how to use a POS Chinese Tablet as a locked down interface for HA for my Airbnb guests. Kudos to all involved!

I have however noticed a very obvious work around. Despite making the exception run kiosk mode for a specific user/device, and also only allowing access to one specific tab, if the user swipes down and refreshes the page, then the sidebar appears for about 2 or 3 seconds before Custom Header kicks in with its magic. In this time the User is able to tap items in the sidebar such as Map or Logbook. Once he does that, those sections will load and the Airbnb guest can see way more information that I am comfortable with.

Now I know I can just disable Map and Logbook by disabling default_config from my configuration.yaml but I actually like those sections being in the sidebar for me and my partner. Was wondering if there is any other workaround?

370

Build failed for some reason, its there now.

371

I don’t think this is something that I can prevent due to the nature of how custom elements are loaded in Lovelace, the amount of custom elements you use, and the speed of the device. I will look into it, but cannot promise anything.

372

Can you just disable the pull to refresh feature in the browser you are using or use a browser that allows you to disable it?