Lovelace: custom sidebar card

Use kiosk mode with the compact header instead of the hiding options the custom sidebar provides, works great!

I just tried that and still the sidebar here does not load until a refresh.

Edit: actually hang on. I might need to change yaml on that pageā€¦

Edit 2: Yea I added kiosk mode to the yaml on both pages and still does not work.

I only have this for my config:

custom_header:
  kiosk_mode: true
sidebar:
  digitalClock: true
  digitalClockWithSeconds: true
  sidebarMenu:
    - action: navigate
      active: true
      name: Home
      navigation_path: /hub-panel/home

etc

Maybe it has something to do with the bypass login? Or do you already use that? Maybe that makes any difference.

homeassistant:
  name: yourname
  auth_providers:
    - type: trusted_networks
      trusted_networks:
        - 192.168.1.0/24
      allow_bypass_login: true
    - type: homeassistant
      api_password: !secret http_password

I do use bypass as well. For casting to the hubs. I have an automation that casts a page to a shield on my bedroom TV when my alarm goes off that needed it too.

I have some stuff in ch that wraps around displaying info Iā€™ll try n remove that. Thanks for helping !!!

Hmm, I also had issues with additional info in the custom header, (like time, outside temp etc). That prevented the header to load.
It worked well for months and all of a sudden it stopped working. Maybe it was the latest update of custom header or Core, donā€™t know for sure. For the Nest Hub simply create a new Lovelace interface and only use the kiosk mode, should be enough.

man i dont know. I took it out on both pages and have exactly like you. it just wont load the side without a damn refreshā€¦

custom_header:
  kiosk_mode: true
sidebar:
  clock: false
  digitalClock: true
  sidebarMenu:
    - action: navigate
      name: Home
      navigation_path: /lovelace/arbos-h

ome

Strange, its really ignoring the kiosk mode.

Maybe it has something to do with caching? Did you try to reboot your host?
Try create a new lovelace dashboard with only the basic info of the custom header and custom sidebar?
I use Lovelace in strorage mode.

try reinstalling the custom header via HACS?

1 Like

good idea Ill try that. I use to use yaml mode but since this now im stuck in doing it in the guiā€¦i use the raqw config but stull sucksā€¦can you share your config for that? Id much rather have yaml mode back. Well I wanted that storage mode so first one is gui configuredā€¦but I havent got around to figuring that outā€¦tbis side bar killin me lol.

I just seen thisā€¦yours works thoā€¦

Iā€™ll share my config later today, not home atm.
Well, I have three dashboards. One for my pc with The compact header, works. One for my phone in kiosk mode, also works, and one for the Nest Hubs in my living room and bedroom with kiosk mode enabled, and that also works without any issueā€¦ Iā€™ll get back to you later today;)

2 Likes

Appreciate it.

So this is the most important part of the raw config of the lovelace interface i use for the Nest Hub:

custom_header:
  kiosk_mode: true
sidebar:
  digitalClock: true
  digitalClockWithSeconds: true
  sidebarMenu:
    - action: navigate
      active: true
      name: Home
      navigation_path: /hub-panel/home
    - action: navigate
      active: true
      name: Lights
      navigation_path: /hub-panel/lights
    - action: navigate
      name: Media
      navigation_path: /hub-panel/media
    - action: navigate
      name: Alarm
      navigation_path: /hub-panel/alarmpanel
    - action: navigate
      name: Camera
      navigation_path: /hub-panel/security
    - action: navigate
      name: Navigate
      navigation_path: /hub-panel/navigate
  style: |
    :host {
        --sidebar-background: 'rgba 50, 50, 50, .5';
        --sidebar-text-color: #B9B9B9;
        --face-color: 'rgba 50, 50, 50, .5';
        --face-border-color: 'rgb 84, 84, 84';
        --clock-hands-color: #000;
        --clock-seconds-hand-color: #216491;
        --clock-middle-background: 'rgb 4, 84, 84';
        --clock-middle-border: #000;
        --border-radius: 5px;
    }
  template: >

    {% if "gft" in states('sensor.trash_today') %} <li>Vandaag GFT</li> {% endif
    %}

    {% if "papier" in states('sensor.trash_today') %} <li>Vandaag papier</li> {%
    endif %}

    {% if "plastic verpakkingsafval" in states('sensor.trash_today') %}
    <li>Vandaag plastic</li> {% endif %}

    {% if "restafval" in states('sensor.trash_today') %} <li>Vandaag
    restafval</li> {% endif %}

    {% if "gft" in states('sensor.trash_tomorrow') %} <li>Morgen GFT</li> {%
    endif %}

    {% if "papier" in states('sensor.trash_tomorrow') %} <li>Morgen papier</li>
    {% endif %}

    {% if "plastic verpakkingsafval" in states('sensor.trash_tomorrow') %}
    <li>Morgen plastic</li> {% endif %}

    {% if "restafval" in states('sensor.trash_tomorrow') %} <li>Morgen
    restafval</li> {% endif %}

    {% if states('sensor.current_lights_on_living_room') | float > 1 %}
    <li>Beneden {{states('sensor.current_lights_on_living_room')}} lampen
    aan</li> {% endif %}

    {% if "1" in states('sensor.current_lights_on_living_room') %} <li>Beneden 1
    lamp aan</li> {% endif %}

    {% if states('sensor.current_lights_first_floor_on') | float > 1 %}
    <li>Boven {{states('sensor.current_lights_first_floor_on')}} lampen aan</li>
    {% endif %}

    {% if "1" in states('sensor.current_lights_first_floor_on') %} <li>Boven 1
    lamp aan</li> {% endif %}
          
    {% if states('sensor.current_lights_second_floor_on') | float > 1 %}
    <li>Zolder {{states('sensor.current_lights_second_floor_on')}} lampen
    aan</li> {% endif %}

    {% if "1" in states('sensor.current_lights_second_floor_on') %} <li>Zolder 1
    lamp aan</li> {% endif %}

    {% if "1" in states('sensor.current_windows_open') %} <li>Boven 1 raam
    open</li> {% endif %}

    {% if states('sensor.current_windows_open') | float > 1 %} <li>Boven
    {{states('sensor.current_windows_open')}} ramen open</li> {% endif %}

    {% if "playing" in states('media_player.sonos_woonkamer') %} <li>Sonos
    Woonkamer actief</li> {% endif %}

    {% if "playing" in states('media_player.sonos_kantoor') %} <li>Sonos Kantoor
    actief</li> {% endif %}

    {% if "playing" in states('media_player.sonos_badkamer') %} <li>Sonos
    Badkamer actief</li> {% endif %}

    {% if "armed_home" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
    thuis actief</li> {% endif %}

    {% if "armed_away" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
    afwezig actief</li> {% endif %}

    {% if "disarmed" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
    inactief</li> {% endif %}

    {% if "pending" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
    bezig...</li> {% endif %}

    {% if "on" in states('binary_sensor.updater') %} <li>Core update
    beschikbaar!</li> {% endif %}

    {% if "1" in states('sensor.hacs') %} <li>Er is 1 HACS Update
    Beschikbaar</li> {% endif %}

    {% if states('sensor.hacs') | float > 1 %} <li>Er Zijn
    {{states('sensor.hacs')}} HACS Updates Beschikbaar</li> {% endif %}

    {% if "on" in states('binary_sensor.door_sensor_front_door') %} <li>Voordeur
    Geopend</li> {% endif %}

    {% if "on" in states('binary_sensor.door_sensor_back_door') %}
    <li>Achterdeur Geopend</li> {% endif %}
title: Nest Hub Panel Interface
views:
  - badges: []
    cards:
      - entities:
          - height: 80
            size: 20
            type: 'custom:gap-card'
        type: 'custom:layout-card'
      - cards:
          - cards:
              - color_type: icon
                entity: input_boolean.lights_livingroom
                icon: 'mdi:home-assistant'
                show_name: false
                tap_action:
                  action: toggle
                template: living_room_navigate
                type: 'custom:button-card'
              - color_type: icon
                entity: input_boolean.lights_dining
                icon: 'mdi:silverware'
                show_name: false
                tap_action:
                  action: toggle
                template: living_room_navigate
                type: 'custom:button-card'
              - color_type: icon
                entity: input_boolean.lights_movietime
                icon: 'mdi:movie-roll'
                show_name: false
                tap_action:
                  action: toggle
                template: movie
                type: 'custom:button-card'
            type: horizontal-stack
          - entities:
              - height: 20
                size: 20
                type: 'custom:gap-card'
            type: 'custom:layout-card'
          - current: true
            details: false
            entity: weather.buienradar
            forecast: true
            type: 'custom:weather-card'
        mode: vertical
        style: |
          ha-card {
            font-variant: small-caps;
            background-repeat: no-repeat;
            background-color: rgba(50,50,50,0.3);
            background-size: 100% 68px;
            }
          .card-header {
            font-size: 20px;
          }
        type: 'custom:stack-in-card'
    icon: 'mdi:home-assistant'
    panel: false
    path: home
    theme: default
    title: cast_overview

Is that what you mean by sharing my config? Or are you interested in another config?

2 Likes

Under Resources (Configurationā€“>Lovelace Dashboardsā€“>Resources) is the custom header correctly declared as a JavaScript Module? Do you also use the new path for HACS? /hacsfiles/ ?

Thanks. I verified the resource is correct. I meant in your configuration.yaml. You mentioned you use storage mode. I never used the GUI config until 107 and want yaml back.

I also upgraded custom header. I see a lot of guys on that thread have issues and some say the new beta fixed it but not for me

btw love the templates:)

here is mine in caseā€¦

Ive been testing with kiosk mode and just disable sidebar. Ive tried different browsers as well/ā€¦and of coarse I hold shift to clear cache when doing this.

custom_header:
  disable_sidebar: true
  header_text: >-
    <style> #flipper {color:#999;} #flip {height:24px;overflow:hidden;} #flip >
    div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
    #flip div:first-child {animation: show 10s linear infinite;} @keyframes show
    { 0% {margin-top:-144px;} 5% {margin-top:-96px;} 33% {margin-top:-96px;} 38%
    {margin-top:-48px;} 66% {margin-top:-48px;} 76% {margin-top:0px;} 100%
    {margin-top:0px;}} #flipper p {position:fixed;color:#999; } </style> <div
    id=flipper><div id=flip><div><div> Currently -
    {{states('sensor.dark_sky_temperature')}}F
    {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
    Chronovirus Numbers US - {{states('sensor.us_coronavirus_confirmed')}}
    People and {{states('sensor.us_coronavirus_deaths')}}
    Deaths</div></div><div><div> {{states('sensor.doors_open')}} Doors Open and
    {{states('sensor.windows_open')}} Windows Open</div></div><div><div>
    {{states('sensor.lights_on')}} Lights On</div></div><div><div> <style>
  voice_hide: true
1 Like

In configuration.yaml I have nothing going on for Lovelace. Did you also try without the header text? Mine was also ignoring the complete custom header with additional header configā€¦ After that I am a little bit out of options tbhā€¦ I have no clue what stops the custom header from loading. What do you see when you use the element inspector (f12) of your browser when you load for the first time?

yea Ive been testing without it. I dont understand, this is killing me.

1 Like