Custom Header

@mayker it seems the reload function inside CH is not working anymore… I am forced to use the reload function of the browser to have the actual and real situation in the frontend.
For example, if i stop a media-control card the frontend is still showing the music playing also if the music is not playing, i try to reload the page and nothing change. Only if i do a browser reload i get the media-control showing the music stopped.

The reload option that I believe that you are referring to is not added by CH. This is a function of HA and exists with or without Custom Header. It’s function is to reload Lovelace after changes are made to the ui-lovelace.yaml file.

Try disabling CH by using the ?disable_ch method or by temporarily removing it’s resource to see if this is still an issue. If the issue persists after doing so, the issue is not caused by CH.

Found it, there’s a typo preventing reload resources from being hidden. Will be fixed in next release.

Ok, i’ll test it… So if i understand well the reload function works only if there is a change in ui-lovelace.yaml?

You don’t have to make changes in order to use it (I don’t think), but it’s only function is to reload for changes made to the file.

From https://www.home-assistant.io/lovelace/yaml-mode/ :

When you make changes to ui-lovelace.yaml, you don’t have to
restart Home Assistant or refresh the page. Just hit the refresh
button in the menu at the top of the UI.
1 Like

great! thanks for checking. Glad I could be of assistance :wink: always nice to find a bug… especially in such a mature and ‘core’ integration/custom card like yours

1 Like

question.

I have it “working” with exception per user when login in via a browser. But it does not work via the app? Is there something to do?

Edit: correction. Yesterday it worked… but now also not anymore in a browser :pensive:

Oh no, could it be 0.114.3?

Or optionally … I have excluded the username with small letters. Although the name in hass is with a capital. Also in the app. But if I make ita capital in ch and save reload it ar are all lowercase again…
Ok, I took the user id and now it seems te be working (again)…

I’m also trying to increase the icon size of the tabs, to make them more touch friendly, but I can’t figure out the CSS. May I ask for help?

This works like a charm to change the icon size:
all_tabs_css: 'zoom:1.50;'

But the bottom line indicating the active tab doesn’t scale at the same amount, so it doesn’t get positioned properly. Is there a way to also scale this to 150%?

Hi guys.
Is it possible to use an local svg file instead of a mdi:icon in the button_text?

I have seen a lots of people using this

  button_text:
    options: >-
      <ha-icon icon='mdi:weather-{{ states.weather.dark_sky.state }}'></ha-icon>

But is it possible to use my local icons from yr since I dont have any API for darksky?

{% if is_state('sun.sun', 'above_horizon') %}
        /local/icons/yr/{{states.sensor.yr_symbol.state}}d.svg
        {% else %}
        /local/icons/yr/{{states.sensor.yr_symbol.state}}n.svg
        {% endif %}

I have tried everything but I dont get it to work…
Br.
Tomas

Hi, I have a question. I am not able to add änother exception. I would expect the drop down menu to do something but it does not. Am I able to add addtional expectons (thus one for userid 1 and one for userid2)?

the red square does not do anything:

An element changed in a recent HA update and I need to update CH to fix the exceptions section of the settings. The dropdown’s and add exceptions portion of the settings aren’t functional currently, I just haven’t had the time to work on it yet. For now you can use the raw config editor to add another exception manually, then you’ll be able to edit it through the settings UI. Will be fixed in the next release.

@Emphyrio Not currently, but I’ll look into adding something

@Rondom The templates you see people using in those cases are using an unsupported feature that uses HTML & CSS in the text of elements. You could use HTML to add those as images, but your code as it is would not work.

To get you close, you’d be looking at something more along the lines of this:

{% set post = 'd' if is_state('sun.sun', 'above_horizon') else 'n' %}
<img src='/local/icons/yr/{{ states.sensor.yr_symbol.state }}{{ post }}.svg'>

You’ll probably have to add some styling to the image element.

These types of posts belong here:

https://community.home-assistant.io/t/custom-header-template-showcase-and-discussion

Oh thanks man I will try it out tomorrow when I am back home.

Yikes… sorry i thought I posted in that sub-forum… My bad :smiley:

Hi there, Im new to HA and I am trying to get the custom header program to show Kiosk mode on just one of my devices. Is that possible?

I highly recommend reading through the docs, especially the important notes section.

You would use an exception to set this up which has many different ways to differentiate devices, as mentioned in that doc’s link. You can set this up in the “CH Settings” UI in the exceptions section by adding a new exception or you can use the raw config editor to set this up manually and the link above shows many examples.

Thank you, I just got it to work :slight_smile: Awesome work on this!

Is there a way to just hide the sidebar and not disable it? Like a menu button next to the tabs?

That is a core feature you enable in your user profile.
image

1 Like

How do I center the tabs so they adjust to the width of the viewport?

Also, is it possible to keep the header intact but enable footer mode for the tabs only? Can padding be added at the bottom too?