Custom Header

Share your Projects! Dashboards & Frontend
185

@VDRainer and I were pointing you to the page that explains that if you want to use it in a theme it would be ch-background: 'rgba(150, 150, 150, 0.1)' not custom_header-background: 'rgba(150, 150, 150, 0.1)'

1 Like
186

@Mariusthvdb Looking into it

@GaryK Look a few posts up.

187

Doing css outside by CH would effect the whole menu element. You only want to do the single custom ha-icon element so you have to do it inline. I just tried 8px and it looks perfect

188

Did you change something to get rid of the ā€œerrorā€

189

Up to date now. Thank you.

190

Iā€™ll look into this, but as far as making exceptions in the css for the ha-icon element: This was just an example of one of the many things you can do with templates. I canā€™t start making separate styles for everything that would be possible to do, so itā€™s better to do it with inline styles inside the template as you have done in your one example. This isnā€™t a vertical aligning issue that can just be fixed with one bit of CSS, this would be CSS added per element.

191

of course, and I understand and appreciate that.

Itā€™s more that I think I see a general misalignment between the tabs on the left side of the option block, and the text/icons in the option block itself (left/right of the right chevron).

I managed to align the text and icon in that block correctly now, only need a few px and as the wind blew today, could see the middle line of the icon perfectly aligned with the dashes in the template output. Though admittedly, it now seems 1 px off againā€¦
Nonetheless, my quest was now to bring left and right side in balance.

Donā€™t think that would be a thing of individual taste or local detail. I would think that to be a global CH setting, to center align by default?

46

btw, as mentioned, I did try to css style the option block (options_list_css), but nothing changed the outcome, not even giving it a colorā€¦

192

I probably need to adjust the styling of the ā€œbuttonsā€ when they are a template or text, so that should be an easy enough fix. Iā€™m on it, bigger fish to fry at the moment though. Latest update is another attempt at fixing remaining iOS issues (overlapping header on safari & app and active tab issues).

193

Some of those will need !important added to the end of the css, but Iā€™ll look into that as well.

194

take it easy! none of this is truly bad for our healthā€¦ Itā€™s already a grand add-on to HA as it stands :wink:

never used or saw !important, but if it is, I must have a quick look ā€¦ thanks Ryan

195

really? 8px. Thats way too much in my settings. 13
what is you css code then? I only need 3 px here using:

<ha-icon icon='{{states('sensor.weather_icon')}}' style='padding-bottom: 8px';></ha-icon>

to see this:
18

196

Welp 8px looked good on my phone, on desktop it looks like yoursā€¦so Iā€™ll probably just remove it and not worry about it :wink: I donā€™t need perfection

1 Like
197

Funny you bring this up today. The weather component does not support partly cloudy at night, but does support clear at night. My proposal to include partly cloudy at night was rejected today.

See here: https://github.com/home-assistant/architecture/issues/322

198

For what is the notification_dot_color in styling?
The demo in the first post shows a notification icon, but i canā€™t find someting in the docs.

199

That icon in the demo is just the voice icon with a custom icon on it. notification_dot_color is to change the color of the dot that appears on the menu icon when the sidebar is hidden.

image

200

@mayker I love the new header! Especially the bottom option is great, much easier for navigation.
Would you consider to a two header? one on the bottom with all the tabs and one on the top, e.g. with the menu and options button?
Thanks JKW

2 Likes
201

I most certainly will

202

Added high/low and precipitation forecasts to my header
image

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon
      style='padding-bottom: 3px' 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>
      {{states.weather.dark_sky.attributes.temperature }}Ā°
      ā†‘{{states.weather.dark_sky.attributes.forecast[0].temperature
      }}Ā°ā†“{{states.weather.dark_sky.attributes.forecast[0].templow }}Ā°
      {{states.weather.dark_sky.attributes.forecast[0].precipitation | int }} in
  compact_mode: true

Note: This pretty much takes up the whole header on mobile. I personally use a single tab, so it doesnā€™t matter much for me

1 Like
203

Could always use media query exceptions so that depending on the width of the device, more or less is shown. Damn cool though. Might work even better as header text. This is where a split mode (buttons top, tabs bottom) would come in handy.

2 Likes
204

reporting back: active tab changing now with version 1.1.2 also on ā€˜Overviewā€™ Home tab! thanks @mayker. great job.

1 Like