Lovelace: custom sidebar card

[nadsy]

I seem to be having some issues where the sidebar card will not load after i click on links unless i refresh the page.

if i click via the normal HA side bar its fine.

is this a common issue or am i missing something in my code?

thanks

sidebar:
  active: true
  width:
    mobile: 0
    tablet: 25
    desktop: 20
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024
  style: |
    :host {
        --sidebar-background: #1C1C1C;
        --sidebar-text-color: #FFF;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #FFF;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
    }

    .sidebarMenu li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 255px;
     }
    .digitalClock {
        font-weight: 400!important;
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
     icon-size: 185px;
    }
    .template {
        font-weight: 400!important;
        text-align: center;

    }  
  digitalClock: true
  twelveHourVersion: true
  hideHassSidebar: false
  hideTopMenu: false
  date: true
  dateFormat: dddd DD MMM
  clock: false
  sidebarMenu:
    - action: navigate
      navigation_path: /dashboard-home
      name: Home
      active: true
      icon: mdi:home-account
    - action: navigate
      navigation_path: /dashboard-climate
      name: Climate
      active: true
      icon: mdi:home-thermometer-outline
    - action: navigate
      navigation_path: /daceboard-lights
      name: Lights
      active: true
      icon: mdi:lightbulb-group
    - action: navigate
      navigation_path: /dashboard-music
      name: Music
      active: true
      icon: mdi:music
    - action: navigate
      navigation_path: /dashboard-media
      name: Media
      active: true
      icon: mdi:play-box-outline
    - action: navigate
      navigation_path: /dashboard-misc
      name: Misc
      active: true
      icon: mdi:alpha-m-circle
  template: |
    <li>
      {% if now().hour  < 5 %} Good Night {{'\U0001F634'}}
      {% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
      {% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %} 
    </li>
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: picture
          image: https://i.imgur.com/PDgpYWg.jpeg
        - type: weather-forecast
          show_current: true
          show_forecast: true
          entity: weather.forecast_home
          secondary_info_attribute: humidity
    cardStyle: |
      :host {
        width: 100%;
      }
views:
  - title: ' Music'
    cards: []
    theme: back1
    type: sections
    sections:
      - type: grid
        cards:
          - type: custom:sonos-card
            sections:
              - player
              - volumes
              - groups
              - grouping
              - media browser
            heightPercentage: 110
            topFavorites:
              - ''
            dynamicVolumeSlider: false
        title: Sonos Panel
      - type: grid
        cards:
          - type: media-control
            entity: media_player.kitchen
            theme: back1
          - type: media-control
            entity: media_player.living_room
          - type: media-control
            entity: media_player.bailey_bedroom
          - type: media-control
            entity: media_player.ryan_bedroom
          - type: media-control
            entity: media_player.theatre_room
          - type: media-control
            entity: media_player.outside
          - type: media-control
            entity: media_player.toy_room
          - type: media-control
            entity: media_player.garage
        title: Zones
      - type: grid
        cards:
          - type: custom:spotify-card
            hide_top_header: false
            hide_currently_playing: false
            hide_playback_controls: false
            grid_show_title: false
            always_play_random_song: true
            display_style: grid
            limit: 12
            playlist_type: featured
            spotify_entity: media_player.wohnzimmer
            style: |
              #footer {
                display: none !important;
              }
          - type: custom:spotify-card
            hide_top_header: false
            hide_currently_playing: false
            hide_playback_controls: false
            grid_show_title: false
            always_play_random_song: true
            display_style: grid
            limit: 15
            playlist_type: default
            spotify_entity: media_player.wohnzimmer
            style: |
              #footer {
                display: none !important;
              }
        title: Spotify

[dos1973]

thanks for you help, but im not able to split the files.
what im doing wrong

  bottomCard:
    type: vertical-stack
    cardOptions:
      cards: !include myfile-bottomcard.yaml
    cardStyle: |
      :host {
        width: 100%;
      }

i cant save it, gets always this error.

the file exists, but is empty.

[ValMarDav]

First, it is not mandatory to use files to include. You can add the code directly below the cards: parameter. For your myfile-bottomcard.yaml file, it must not have a dash (-) for the first card as in my examples above. In the file, a single card must include all the other cards. You can use a vertical-stack for this. In your example, even if you have only one include, you must start the include with a dash (-) like this.

  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - !include Cartes/Carte-Controlesv.yaml
    cardStyle: |
      :host {
        width: 100%;
      }

[dos1973]

i know i dont need the include, but you know i have alot of chips… it becomes hard to read.

im getting the error wit or without the dash (-). I have tried a lot of version…
cant understand this.

  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - !include myfile-bottomcard.yaml
    cardStyle: |
      :host {
        width: 100%;
      }

[ValMarDav]

Can you show me what’s in the file myfile-bottomcard.yaml?

[dos1973]

the file is only created and empty

[ValMarDav]

Where did you put the file?

[dos1973]

In the root folder.
I had also a try with creating a folder
myfile/file.yaml

[ValMarDav]

Your file must be in the config directory. In the same place as the configuration.yaml file.

[dos1973]

it is there: /homeassistant/myfile-bottomcard.yaml

[ValMarDav]

Ok, and the definition of the sidebar is in the same place?

[dos1973]

dont understand your question?

edit: no sidebar is not created, the code is in the dashboard yaml file

[dos1973]

This frustrates me now
I’ve been sitting on the “include” for hours.
watched a lot of YT Video, nothing helps

Have to go to sleep, try again tomorrow

[dos1973]

@ValMarDav any ideas?
just a note, i’m HA Starter - are there any pre-configuration required to get Include working?

[ValMarDav]

If you have followed the installation instructions that are here Raspberry Pi - Home Assistant it should work. Make sure that the dashboard.yaml and myfile-bottomcard.yaml files are in the same directory.

[dos1973]

Im running HA in Proxmox in a VM container.
Setup was executed by the HA Helper Scripts.

I have an configuration.yaml but i don’t have an dashboard.yaml??? The bottomcard.yaml is in the same folder as the configuration.yaml

Currently i modify it by opening

• the 3 dots top right
• manage dashboard
• raw editor

What about this file, where is it stored?

[dos1973]

ok, if i understand this correct i need

lovelace in yaml mode

the to get the “include” working. As i understand, if i active the

yaml mode

the UI will not work anymore.
based on this - i will stay on UI level.

if im wrong, would be nice if someone can comment. thanks

[nadsy]

*Edit, nevermind i changed it in the theme.yml

Im having some trouble matching the weather card to the side bar colour if anyone could give me a hand?

I have Card-Mod installed

type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
card_mod:
  style: |
    ha-card {
       background: rgba(28,28,28);
         }

Thanks

sidebar:
  active: true
  width:
    mobile: 0
    tablet: 25
    desktop: 20
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024
  style: |
    :host {
        --sidebar-background: #1C1C1C;
        --sidebar-text-color: #FFF;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #FFF;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
    }

    .sidebarMenu li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 255px;
     }
    .digitalClock {
        font-weight: 400!important;
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
     icon-size: 185px;
    }
    .template {
        font-weight: 400!important;
        text-align: center;

    }  
  digitalClock: true
  twelveHourVersion: true
  hideHassSidebar: false
  hideTopMenu: false
  date: true
  dateFormat: dddd DD MMM
  clock: false
  sidebarMenu:
    - action: navigate
      navigation_path: /dashboard-home/0
      name: Home
      active: true
      icon: mdi:home-account
    - action: navigate
      navigation_path: /dashboard-climate/0
      name: Climate
      active: true
      icon: mdi:home-thermometer-outline
    - action: navigate
      navigation_path: /dashboard-lights/0
      name: Lights
      active: true
      icon: mdi:lightbulb-group
    - action: navigate
      navigation_path: /dashboard-music/0
      name: Music
      active: true
      icon: mdi:music
    - action: navigate
      navigation_path: /dashboard-media/0
      name: Media
      active: true
      icon: mdi:play-box-outline
    - action: navigate
      navigation_path: /dashboard-misc/0
      name: Misc
      active: true
      icon: mdi:alpha-m-circle
  template: |
    <li>
      {% if now().hour  < 5 %} Good Night {{'\U0001F634'}}
      {% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
      {% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %} 
    </li>
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: picture
          image: https://i.imgur.com/PDgpYWg.jpeg
        - type: weather-forecast
          show_current: true
          show_forecast: true
          entity: weather.forecast_home
          secondary_info_attribute: humidity
    cardStyle: |
      :host {
        width: 100%;       
      }

[SaintTDI (Stefano Triff)]

Hi all!

I’m starting using this custom sidebar card for my desktop dashboard. I really like the concept

I have one question, I would like to use only cards inside this sidebar card, showing at the top the time and date… and them some mushroom template cards, mushroom chips card, the weather and some other stuff.

I’m doing it with the bottomCard attribute, but is it possible to use cards inside the sidebar other than bottomCard ? Let’s say instead of sidebarMenu: can I put cards: and then the cards that I want?

Thanks!

[Harti13 (Patrick)]

hi,
how can i show the greetings over the Clock oder under the date?