Custom Header

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

If you expand the card-mod error even more by using the drop down right before {type: "result" does it provide any more info? Is Custom Header listed anywhere in the errors? If you temporarily remove Custom Header from your resources do you still get this error?

[Thuurke]

Hello,

I used the following code in compact custom header. How do I implement the same in custom header? I don’t see (so maybe oversee ) such a conditional example in the docs.

  conditional_styles:
    template:
      - tab:
          1:
          - color: >
              if      (states["alarm_control_panel.egardia"].state == "armed_away") "red";
              else if (states["alarm_control_panel.egardia"].state == "armed_home") "orange";
              else "yellow";

[klogg]

It’s really not a big deal but why does this work…

button_text:
  options: "\U0001F31E"

But this (and no variation of it that I can find) does not?

button_text:
  options: >-
    {{ time }} ~ "\U0001F31E"

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

Just has to do with how templates are rendered. If you want to use something like that in a template, use the HTML equivalent:

  button_text:
    options: >-
      {{ time }} ~ 🌞

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

custom_header:
  tabs_color:
    1: >-
      {%- if is_state('alarm_control_panel.egardia','armed_away') -%}red
      {%- elif is_state('alarm_control_panel.egardia','armed_home') -%}orange
      {%- else -%}yellow{%- endif -%}

[hazio]

Hi, is it possible to link these card headers, to another tab page respectfully? thanks

[Album] Imgur

[Thuurke]

Yes! The colors are back! Thank you!

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

I’m not exactly sure what you’re asking. Custom Header does not affect cards, only the Lovelace navigation header.

[klogg]

@mayker

Just has to do with how templates are rendered.

Thanks and just for completeness here is what I was trying to do.
(Note that I didn’t need the joining ‘~’ or the trailing ‘;’

  options: >-
    {%- if states('sensor.elevation') >= '0' -%}
    {{ time }} &#127774 {{ states('sensor.dark_sky_current_temperature') | round }}°C
    {%- else -%}
    {{ time }} &#127772 {{ states('sensor.dark_sky_current_temperature') | round }}°C
    {%- endif -%}

[hentes]

It was a card-mod issue but recently in the log appears two Custom Header error right after HA restart:

• http://192.168.1.20:8123/community_plugin/custom-header/custom-header.js:145:58720 Uncaught TypeError: Cannot read property 'shadowRoot' of null
• http://192.168.1.20:8123/community_plugin/custom-header/custom-header.js:145:62297 Uncaught TypeError: Cannot read property 'current_view' of null
  Could you please point me in the right direction to resolve these errors. Thank you.

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

These have been reported already and a fix is in place for the next release. They shouldn’t effect anything and will only happen when having a Lovleace window open on restart.

[hentes]

Thank you very much. Really appreciate your help and thank you for this awesome work.

[Mariusthvdb (Marius)]

HI Ryan,
as of late I get this quite often on reloading/refreshing:

and after a while apparently auto reloads to what it is supposed to show:

in inspector the only thing showing is:

not even sure if this is related, but seems to coincide.

my option template is:

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 it has been working ever since you introduced that possibility.

version CH 1.3.2 Hassio 104.3

thanks!

[klogg]

@Mariusthvdb

I get this quite often on reloading/refreshing

Yes, so do I. I have the same format as you, time - icon - temp and often the time doesn’t show (until it refreshes itself at the next minute).

ALSO
As I’m here, I don’t know if it is related to CH (although I feel like it might be?) I always get the Refresh toast message after every refresh.

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

@Mariusthvdb @klogg Looking into the button text template thing

@klogg For the toast message: If it happens every refresh, then it should be easy to reproduce in order to troubleshoot. Temporarily remove CH from your resources and see if it still happens.

[klogg]

@mayker

Temporarily remove CH from your resources and see if it still happens.

Yeah good point. I hadn’t thought about it as it was just a mild irritation that I only mentioned as I was already posting. It looks like it isn’t CH.

Hmm… that’s a shame (for me, not you ) it’ll make it a bit harder to track down…

[klogg]

@klogg

It looks like it isn’t CH.

Well, not quite…

By a process of elimination I narrowed it down to my resources.
It turns out it seems to be this that is causing it.

- url: /community_plugin/custom-header/custom-header.js
  type: module

It doesn’t matter if I have this,

custom_header:
  !include lovelace/custom_header/custom-header.yaml  

in my ui-lovelace.yaml or not

Any idea how that could be?

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

Not sure I understand. So, after removing this from your resources:

- url: /community_plugin/custom-header/custom-header.js
  type: module

and refreshing the page (CTRL-SHIFT-R). You no longer see the toast message when refreshing?

[klogg]

That is correct.

Except that CTRL-SHIFT-R (or F5) never causes a problem, only the refresh from the top right menu (clicking on, in my case, the time/date)

…hhmmm, it’s a long shot but could it be connected with the above issue of time not always refreshing?

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

Okay, now I understand. Thought you were talking about a page refresh not a lovelace refresh. Not sure there is anything I can do about that, but I will look into it (not related to time template).