Custom Header

I reinstalled custom header and the resources has been added automatically in lovelace resources. Still having buttons invisibility problem

That could be a separate issue. i think some things have changed with icons, your not running custom-iu by any chance?

I don’t think it is theme related, the theme I use (Google Dark Theme) doesn’t contain anything relating to icon size and I get the same issue with the default theme (with the only difference being that the icon is almost indistinguishable from the background due to the icon colour).

With the change in the icon elements adding icons into button text has become problematic as you have seen. This will require a bit of work and since this isn’t really a supported feature it’s low on my list at the moment. Once everything else is stable I will be on it.

1 Like

With the next few updates of Custom Header I will be removing backwards compatibility. Meaning that moving forward all new versions will require 0.110 or above (anything past CH version ~1.4.5). This will likely speed things up and help immensely with development. If you choose to remain below HA 0.110 then you will need to use earlier versions of CH.

2 Likes

Hi,

Thank you for your clarification and all your hard work - very much appreciated.

Thanks. I’ve actually found something which seems to work. You need to wrap the ha-icon with a div like this:

<div style='display:inline-block; height:32px; width:32px; vertical-align:middle;'><ha-icon icon='...'></ha-icon></div>

Using this in my config like this:

button_text:
  options: >-
    {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <div style='display:
    inline-block; height:32px; width:32px; vertical-align:middle;'><ha-icon 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></div>
      {{states.weather.dark_sky.attributes.temperature }}°

Gives me this in my header:

4 Likes

Excellent, thanks for that. I’ll be sure to share this with folks asking about it on github and other places as well.

is this because of CH updates, or because of HA 110.+ ?
I ask because I use this:

button_text:
  options: >-
    {% if is_state('input_boolean.ch_use_options_text_template','on')%}{{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='vertical-align: middle';></ha-icon> - {{states('sensor.temp_current') }}°
    {% endif %}

and the options section is displayed as expected?

I believe it’s related to the changes in how HA 110 handles icons, as other cards and integrations have also had issues with large icons.

ok, sorry, had just clicked Reply…

will note your suggestion thanks.
And Ryan, my question on 145 compatibility with 109.6 is answered… (mentioned it on the Repo, so never mind( Will keep my eyes on the error and report back. https://github.com/maykar/custom-header/issues/159

Hi,

Thanks - works a treat.

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ ampm }}<br><div
      style='display:inline-block; height:22px; width:22px;
      vertical-align:bottom;'><ha-icon icon='mdi:weather-{% if
      is_state("weather.barfield", "partlycloudy") -%}partly-cloudy{%- else
      -%}{{ states('weather.barfield')}}{%- endif %}'></ha-icon></div>
      {{states.weather.barfield.attributes.temperature }}°
  compact_mode: true
  default_tab: '0' `

I agree it is HA 0.110.x change in how it handles icons.

many thanks for your solution.

Sorry to have to get back on this: though no formal issues in logger are displayed using 1.4.5 on Ha 109.6 causes issues in a terribly slow and sometimes unresponsive interface. Even my Hue light go back to unavailable, indicating timing issues of sorts.
Went back to 1.3.8 and all things well

You’re correct. Something’s wrong when I access the console even after reinstalling custom-header and restarting HA. Refresh tab and it’s working. My problem is that my previous configurations were not working

Recently I noticed bunch of following errors in Chrome console. Any tips to resolve these errors?

CUSTOM-HEADER Version 1.4.5
Home Assistant 0.109.6

Uncaught TypeError: Cannot read property 'querySelector' of undefined
    at styleHeader (custom-header.js:596)
    at Function.processAndContinue (custom-header.js:596)
    at unsub.subscribeRenderTemplate.template (custom-header.js:596)
    at Object.r.subscribeMessage.type [as callback] (custom-header.js:1)
    at l._handleMessage (connection.js:150)
    at WebSocket.<anonymous> (connection.js:30)

Upgrade HA to 0.110 or downgrade CH to 1.3.8 (or another version earlier than 1.4.5)

Sure. I will upgrade to 0.110. I usually wait for a few more releases before I upgrade. (ex: 0.110.3 or 0.110.4)

Btw, do you have an answer to this question?

I’m not quite sure what you’re asking. User2 has disabled_mode: true so the default UI is what they should be seeing. Is this changing for User 2 when the input_boolean.ha_ui.state is switched?

1 Like

Duah. My bad. :man_facepalming: I didn’t realize that I set disabled_mode to true for the second user. Thank you for pointing this out. :+1:

Btw, I upgraded to the latest HA version. Now I see a big icon (button_text) as others mentioned in this thread. I cleared the cache.

Nice! Thanks for sharing!