Custom Header

Share your Projects! Dashboards & Frontend
64

ya, talked about that before :wink:

I was referring to the templates for tab_color and tab_icon where this doesn’t work:

tab_icons:
  alarm: >
    {{states('sensor.alarm_panel_icon')}}
  phones_tablets: >
    {{states('sensor.presence_icon')}}
  weer_klimaat: >
    {{states('sensor.weather_icon')}}
  alarmclock: >
    {{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}

and this does:

tab_icons:
  alarm: "{{states('sensor.alarm_panel_icon')}}"
  phones_tablets: "{{states('sensor.presence_icon')}}"
  weer_klimaat: "{{states('sensor.weather_icon')}}"
  alarmclock: "{{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}"
65

Your issue is probably using > and not >- (which strips white space)

66

trying this,(took out the icon first) there’s a strange ‘n’ at the end when I use:

button_text:
  options: >
    {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - {{state_attr('weather.home_darksky','temperature') }}°

38

not sure if this is related, but inspector says:

24
24871×202 44.1 KB

note inspector surprisingly still sees compact-custom-header… Ive of course taken that out of the ui-lovelace.yaml, and restarted a few times, clearing caches…


title: Hassio RPi4

resources: !include lovelace/resources.yaml
button_card_templates: !include lovelace/includes/button_card_templates.yaml
decluttering_templates: !include_dir_named lovelace/decluttering_templates
#cch: !include lovelace/includes/compact_custom_header.yaml
custom_header: !include lovelace/includes/custom_header.yaml

views:
  - !include lovelace/views/view_Home.yaml                #0
  - !include lovelace/views/view_Lights.yaml              #1

secondly, when trying to replace your icon template with this:

button_text:
  options: >
    {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon icon={{states('sensor.weather_icon')}></ha-icon>
    {{state_attr('weather.home_darksky','temperature') }}°

the whole text disappears, and the full header shows, even though I use compact_mode, with the config name:

08
08901×108 8.35 KB

and, a footer appears also:

16
16923×120 7.42 KB

apparently the icon_template for the button-text is not correctly formatted? Even so, putting of the rest of the config would be considered a bug?

with this in the log:

2019-12-17 12:07:14 ERROR (MainThread) [frontend.js.latest.201912041] https://redacted/local/lovelace/resources/custom-header.js?v=0.0.1:4774:21 TypeError: undefined is not an object (evaluating 'config.compact_mode')

Could you help me formatting the icon_template?]thanks

67

yes! that’s it. How odd. there are no white spaces in the output of the templates, and all other places in HA I use these work with those exact templates.

I’ve also found the issue in the weather icon… missed a closing } sorry for that.

still, have the suffixed ‘n’. What could that be?

57

68

n is probably from a stray new line (\n) somewhere

69

no, I’ve found it. It was not using the >- multiline but >

in this spot in the CH config the template did work without the >-, albeit suffixing the n.

Would really be nice if we could simply use > multiline notation in all places, without breaking the config, or unwanted newline acting up. No harm done, just noted for further development and ironing out some intricacies :wink:

thanks for your nudge, combining that with the whitespace remark made me find it.

70

Is there any way to disable Custom Header for laptop/desktop and have an option to change custom header settings? I’ve added media query exception but when I turn on disabled mode for this exception, I lose option to change CH settings.

71

Is it possible to hide/show a view on the fly with Custom Header, as it was with Compact Custom Header? With CCH, I had this code::

cch:
  conditional_styles:
    - entity: input_boolean.mode_christmas
      condition:
        state: 'off'
      tab:
        10:
          hide: true

Based on the documentation, where I found that the configuration for hiding/showing views has changed, this no longer seems possible.

72

@fanaticDavid Conditional things are all handled by jinja now

custom_header:
  hide_tabs: '{% if states.input_boolean.mode_christmas.state == "on" %}10{% endif %}'
2 Likes
73

Should be possible now in the latest release.

@jimz011

Should be fixed in the latest release.

1 Like
74

yes! this is what I had been looking for, and never realized had already been possible with CCH…

show_tabs: >
  {% if is_state('input_select.mode','Developer') %}22,23,24,25
  {% endif %}

magic!

(btw note no >- is necessary :wink: )

since @petro always tells me I need to make safe templates… how can I create an {% else %} clause here? maybe use ‘all’ or 0-28 ?

75

if @mayker allows an empty field for show_tabs, then there’s no reason to make it safe :wink:

1 Like
76

haha, well I’ve found the reason, need this:

show_tabs: >
  {% if not is_state('input_select.mode','Developer') %}0 to 21, 26 to 28
  {% else %} 0 to 28
  {% endif %}

feels safer than:

hide_tabs: >
  {% if not is_state('input_select.mode','Developer') %}22,23,24,25
  {% endif %}
77

Latest update still doesn’t move the first card up.

view_css: 'margin-top: -5px;'

It doesn’t do anything unfortunately. Is it no longer possible to have a negative value? I could eventually use a hacky fix and just make the top part of my wallpaper that color but that isn’t really great ofc. I still have the gap :frowning: thanks for the quick reply though.

image
image1125×2436 522 KB

78

try view_css: 'margin-top: -5px !important;
or even adjusting padding-top instead

79

not in Eindhoven are you @jimz011 :wink:

anyone else seeing this scrolling down to the bottom of the page:

using Mac Safari

38
38939×93 8.29 KB

or Chrome:
08

could this have to do with a footer setting (I don’t use)?

80

That looks like a bug and you should report it on the github page :slight_smile:

81

ok will do, cool.

82

Haha yes I am from Eindhoven (though I think people that have seen my project in the past already know that) :stuck_out_tongue:

@mayker I will try it thnx!

83

@mayker srry for the amount of questions (I don’t like asking questions haha). But I can’t seem to get it to work :frowning: when adding your suggested code it actually goes down :rofl::joy:

image
image1125×2436 574 KB

Itseems like negative values are not accepted. It gives the same result as using margin-top: 5px;

I have also tried padding but it only seems to want to go down instead of up.