Custom Header

Hi guys,

I tried using the weather option in my header and came across a minor thing, but maybe it’s just me that missed something.

If you look at the weather icon, it shows a sun behind a cloud, but if you look at my weather card it shows a moon (10:30 pm). Is that just because no icon is present for that?
Also, if I check the state of the weather it just shows partlycloudy with a cloud, but I guess that’s what already have been mentioned and is why I use the if is_state right?

  button_text:
    options: >-
      {{ time }}<br>{{ date }} - <ha-icon icon='mdi:weather-{% if
      is_state("weather.dark_sky", "partlycloudy") -%}partly-cloudy{%- else
      -%}{{ states('weather.dark_sky')}}{%- endif %}'></ha-icon>
      {{states.weather.dark_sky.attributes.temperature }}°

Please open an issue on github. :rofl:

Heheheh, well considering he added the translations I don’t think he’d have to make an iss…wait a minute:

2 Likes

The weather card is a much more robust icon set

Docs are temporarily offline as github hates me. Working on getting them back up. They all exist here even if it’s not a great way to view them:

Yes, that works for me too.
Obviously we need always use {%- and -%}

Thanks.

it all depends on which states the weather component you use takes, and which icon is mapped to that.
The Darksky weather integration (so not the sensor) doesn’t use the night-partly-cloudy icon, that’s why I made this template to use the icons I like to see in my setup, if the condition arises.

      weather_icon:
        entity_id: sensor.dark_sky_icon, weather.home_darksky, weather.woensdrecht
        friendly_name_template: >
          {{states('sensor.weather_icon').split('weather')[1]|replace('-',' ')|title}}
        value_template: >
          {% set mapper_icon =
            {'partly-cloudy-night': 'night-partly-cloudy'} %}
          {% set mapper_br =
            {'pouring': 'pouring',
             'lightning-rainy': 'lightning-rainy',
             'snowy-rainy': 'snowy-rainy'} %}
          {% set mapper_ds =
            {'sunny': 'sunny',
             'clear-night': 'night',
             'rainy': 'rainy',
             'snowy': 'snowy',
             'snowy-rainy': 'snowy-rainy',
             'windy': 'windy',
             'fog': 'fog',
             'cloudy': 'cloudy',
             'partlycloudy': 'partly-cloudy',
             'hail': 'hail',
             'lightning':'lightning'} %}
          {% set icon = states('sensor.dark_sky_icon') %}
          {% set woensdrecht = states('weather.woensdrecht') %}
          {% set dark = states('weather.home_darksky') %}
          {% set weather = mapper_icon[icon] if icon in mapper_icon else 
                           mapper_br[woensdrecht] if woensdrecht in mapper_br else 
                           mapper_ds[dark] if dark in mapper_ds else 'sunny-alert' %}
            mdi:weather-{{weather}}

        icon_template: >
          {{states('sensor.weather_icon')}}

weather.woensdrecht is using the buienradar integration.
these 3 have a set of icons that complement each other nicely.

You can then use that sensor in the CH template as follows:

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

33

I do think it is not vertically centered as it should, but maybe Ryan can have a look at that if and when time allows :wink:

ps my template above can even be a bit more compressed:

          {% set mapper_icon =
            {'partly-cloudy-night': 'night-partly-cloudy'} %}
          {% set mapper_br =
            {'pouring': 'pouring',
             'lightning-rainy': 'lightning-rainy',
             'snowy-rainy': 'snowy-rainy'} %}
          {% set mapper_ds =
            {'clear-night': 'night',
             'partlycloudy': 'partly-cloudy'} %}
          {% set icon = states('sensor.dark_sky_icon') %}
          {% set woensdrecht = states('weather.woensdrecht') %}
          {% set dark = states('weather.home_darksky') %}

          {% set weather = mapper_icon[icon] if icon in mapper_icon else 
                           mapper_br[woensdrecht] if woensdrecht in mapper_br else 
                           mapper_ds[dark] if dark in mapper_ds else
                           dark if dark in 
                             ['sunny','rainy','snowy','snowy-rainy','windy','fog','cloudy','hail','lightning'] 
                              else 'sunny-alert' %}
            mdi:weather-{{weather}}

do make sure the template sensor changes on the state changes of the individual integrations by adding the entity_id’s to the sensor config:

      weather_icon:
        entity_id: sensor.dark_sky_icon, weather.home_darksky, weather.woensdrecht
        value_template: 
etc
2 Likes

Just add some padding to the bottom in a style attribute for ha-icon

I’m not even sure it is not correctly aligned, it looks a bit too low, but it could be just the icon which is a bit unbalanced?
Could you show me how to do that, adding some padding to the bottom of the icon? like padding-bottom: 2px ? but where?

Shouldn’t it be transparant instead of transparent? The latter has never worked for me, that is why I ask.

Edit: Somehow I missed the fact that compact-custom-header is now just Custom Header. Makes plenty of sense now.

Anyone else see this in their startup logs lately? Not sure when it started showing up, but I did just update to .103.2 today.

“You have maykar/compact-custom-header installed with HACS this repository has been blacklisted, please consider removing it.”

tried to search around and I didn’t really find anything that seemed to point to why this is showing in the logs. CCH seems to be functioning without an issue.

I’m getting the spinning wheel when I try and update as well…

The documentation website is back online :tada:

Looks like HACS…
@DavidFW1960 Restart HA and it should work.

I did and it just kept spinning from before. Weird. Eventually it seemed to time out and I clicked uninstall and then installed and it’s updated now.

cool, I’ll check :wink:

suppose I need to set it for the icon specifically? I first thought maybe this Custom Header could be an option, but when using eg

button_text_css: padding-bottom: 2px

this would be set for the full header… Could I set it for the icon in the button_text in this section of the config also?

Moreover, the warning given here:

Keep in mind that this will be trial and error as these items already have CSS applied to them that you’ll be overriding

makes me wonder if it wouldn’t be better to center the icons vertically in the CH code itself?

anyways, this seems to be better:

button_text:
  options: >-
    {{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='padding-bottom: 3px';></ha-icon> - {{states('sensor.temp_current') }}°

21

but, when being really minute about things… checking the button_text vertical alignment against the header itself, it seems it is down a few pixels.

57

That would be a CH code thing I would think, because when trying the

options_css: 'padding-bottom: 10px;'

the full header moves up, and not only the options section right of the right chevron.

options_list_css doesnt seem to do anything

I just tried both ways and both worked for me.

1 Like

I was just trying to put it back to how I had it with the old CCH where you could control it within a theme.

@ObiKaiKenobi code worked so happy with this, thanks

1 Like

Unable to update to 1.1.0.

2019-12-20 04:22:10 ERROR (MainThread) [hacs] Tried to serve up '/config/www/community/custom-header/custom-header.js' but it does not exist
2019-12-20 04:23:02 ERROR (MainThread) [hacs.repository.plugin.maykar.custom-header] Download was not complete.

I see this now in the error logs:

local/lovelace/resources/custom-header.js?v=1.1.0:574:37682 TypeError: undefined is not an object (evaluating 'g.tabs[e].getBoundingClientRect')

hope anyone can shed some light what that means?