Compact Custom Header

if you want the user “Test2” to have tabs 0 & 1 hidden for all devices they use, then remove:

        user_agent: Mobile
        media_query: "(max-width: 600px)"

Otherwise you’re telling it to only hide on mobile devices with a max width of 600px

1 Like

Working, Thanks.
one last thing i’m trying to define for a spefiec user let say also Test2 a speific path

let’s say for view number 2 “duckdns.org/lovelace/2

How i need to write it

It’s the menu in option.

Add it in the config for that user

    - conditions:
        user: Test2
      config:
        default_tab: 2
1 Like

I have a header with transparency configured. It has been working great until I updated to 0.99. Now, my header is opaque instead of showing the page background through it. Did something change with 0.99?

Done and working perfectly thank you.

1 Like

Latest update fixes this ^^^^

I’m seeing this issue in 1.3.8. Tried with both HACS and manually.

Edit: Chrome wasn’t completely clearing cache (despite Control + F5…). It is working now!

The issue still exists with custom layout cards:

but it works well with the “normal” cards:

have an ongoing issue with an icon for the tabs that wont auto update, or so it seems, have a look at the clouded icon:

while the icon template itself has been updated in the system, the tab is still on the previous state:

27

refreshing the browser window updates the tab:

00

I have the entity_ids in the sensor, thought hat shouldnt even be necessary:

      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 =
            {'clear-day': 'sunny',
             'clear-night': 'night',
             'sunny': 'sunny',
             'rainy': 'rainy',
             'snow': 'snowy',
             'sleet': 'snowy-rainy',
             'wind': 'windy',
             'fog': 'fog',
             'cloudy': 'cloudy',
             'partlycloudy': 'partly-cloudy',
             'partly-cloudy-day': 'partly-cloudy',
             'partly-cloudy-night': 'night-partly-cloudy',
             'hail': 'hail',
             'thunderstorm': 'lightning',
             'tornado': 'hurricane'} %}
          {% set icon = states('sensor.dark_sky_icon') %}
          {% set dark = states('weather.home_darksky') %}
          {% set woensdrecht = states('weather.woensdrecht') %}
          {% 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')}}

and the tab configures in cch:

      - tab:
          'weer_klimaat':
            icon: >
              var weer = entity['sensor.weather_icon'].state;
              weer;

do I need another setting to push the icon change automatically?

@krovachek Thanks, looking into it.

@Mariusthvdb Since there’s no “if” or “return” statement nothing is returned. Try this instead:

      - tab:
          'weer_klimaat':
            icon: "return entity['sensor.weather_icon'].state;"

a ok, will check that, its just that I thought you had instructed to leve out the ‘return’. This works fine without it:

      - tab:
          'alarm':
            icon: >
              var alarm = entity['alarm_control_panel.ha_main_alarm'].state;
              if (alarm == 'disarmed') 'mdi:shield-check';
              else if (alarm == 'armed_away') 'mdi:shield-lock';
              else if (alarm == 'armed_custom_bypass') 'mdi:security';
              else if (alarm == 'armed_home') 'mdi:shield-home';
              else if (alarm == 'armed_night') 'mdi:shield-home';
              else if (alarm == 'pending') 'mdi:shield-outline';
              else if (alarm == 'triggered') 'mdi:bell-alert';
              else 'mdi:shield-check';

Because there is an “if” statement involved there. Without either an “if” or a “return” then there is nothing to evaluate. You could use if (true) entity['sensor.weather_icon'].state and it would be the same as my example above.

I see. noted, and thanks for the explanation. It is somewhat different from the other JS templates I use throughout HA, so must make a note of this :wink:

the use of else if is different also (simply use if in other templates for all elif), and always use return in the exit, on all lines… so many variations to keep track of…

You can do it that way as well. CCH is just evaluating the string as javascript. So all of the following examples would work the same:

if (entity['input_boolean.home'].state == "on") "mdi:home";
else if (entity['input_boolean.home'].state == "off") "mdi:away";
else "mdi:emoticon";
if (entity['input_boolean.home'].state == "on") return "mdi:home";
if (entity['input_boolean.home'].state == "off") return "mdi:away";
return "mdi:emoticon";
let icon = entity['sensor.weather_icon'].state == "on" ?  "mdi:home" :  "mdi:away";
return icon || "mdi:emoticon";
1 Like

magic, thanks, you’re the best!

just to be 100% sure: I do need the ; after each line in the template do I?

Sorry, yes you do (for multi line statements). I’ll update my examples. Since the config renders it as one long string the semi-colon let’s it know when each statement ends.

( I’m sure there may be better ways to do it and will update you if things change. )

I have an issue with the header bar background colour in Firefox always appearing as white (Chrome appears to be ok):

In v1.3.6 it looks like this when editing in firefox:

However in v1.3.7 and v1.3.8 it looks like this:

This is particularly bad if my night theme is active:

1 Like

I have this issue as well and was about to post about it in github but was checking here first. I can confirm it works in chrome but not firefox and I have tested this on multiple machines (home/work/laptop).

Just an FYI / PSA for people using the babelized “legacy” version of CCH that I was maintaining for a while and then @mayker took over.

I just did a system update on my Fire 7 tablet and FireOS updated to verison 5.6.4.0 and wonder of wonders, they updated the system webview to v. 70+ and for me at least, Fully Kiosk now works perfectly with stock CCH (and any other .js that is included in Lovelace as type: module).

Halleluja!

1 Like