Lovelace: custom sidebar card

Does it (the sidebar card) also work with the section view?

Yes, it works well.

Hey
great work, thanks. But I have some Question:
First: I can’t activate the Icon in sidebar.

  style: |
    :host {
        --sidebar-background: #0f0f0f;
        --sidebar-text-color: #bcbebf;
    }
    .sidebarMenu li.active {
     background-color: #232729!important;
     icon-size: 225px;
     }
    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 15px
        font-size: 150px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
...
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace-tablet-wz/tablet_wz_0/
      name: Home
      active: true
      icon: 'mdi:home'

grafik

When activ
grafik

What is wrong?

I have found it:

    .sidebarMenu li ha-icon {
     color: white!important;
    }
1 Like

Hi guys,

This is a great card but I’m having a major issue. I can’t seem to get access to the edit mode/raw config once I hide the topmenubar & sidehassbar

I have tried ?sidebaroff but it just doesn’t work. Any ideas? I have tried clearly my browser cookies and using different browsers too.

Do you have a problem with the sidebar being hidden? The window loads and it’s OK, I select an entity, click on the journal/history, go back to the main window and the sidebar is gone. I have to refresh the window and it’s visible again.

2024-10-04_21h51_43

Hi, would really appreciate if someone could help. Unable to get the date on the side card to say Saturday, 5 October 2024 rather than just 5 October tried using custom code but nothing shows.

Any one have any ideas? No matter what I try I get nothing.

sidebar:
  bottomCard:
    type: custom:simple-weather-card
    cardOptions:
      entity: sensor.outdoor_temp
      icon: mdi:temperature-celsius
      state_color: false
  digitalClock: false
  twelveHourVersion: true
  date: false
  customClockDate:
    type: custom:hui-markdown-card
    content: |
      <div class="clock-date-container">
        <span class="clock">{{ states('sensor.time') }}</span>
        <span class="date">{{ states('sensor.custom_formatted_date') }}</span>
      </div>
    style: |
      :host {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .clock-date-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 10px;  
      }
      .clock {
        font-size: 30px;   
        color: white;      
        margin-right: 10px;  
      }
      .date {
        font-size: 20px;   
        color: white;      
        font-weight: bold; 
      }
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Control Rooms
      active: true
      icon: mdi:floor-plan
    - action: navigate
      navigation_path: /lovelace/home
      name: Control Lights
      icon: mdi:lightbulb-group
      active: true
    - action: navigate
      navigation_path: /lovelace/home
      name: All Devices
      icon: mdi:speedometer
      active: true
    - action: navigate
      navigation_path: /lovelace/home
      name: Media
      icon: mdi:play-circle-outline
      active: true
      sidebar: null
    - entity: media_player.kitchen
      hide:
        controls: true
        name: true
        power: true
        source: true
        volume: true
        progress: true
      idle_view:
        after: 0.1
        when_idle: true
        when_paused: true
        when_standby: true
      style: |
        :host {
          left: 11.7%;
          top:  41.5%;
          width: 20.5078125%;
          border-radius: 5vw;
          overflow: hidden;
          height: 3.8vw;
          box-shadow: none !important;
        }
        ha-card {
          border-radius: 5vw;
          overflow: hidden !important;
          box-shadow: none !important;
          padding: 0.1vw 0.9vw 0.7vw 1.05vw !important;
        }
        ha-card.--inactive .mmp-player{
          opacity: 0 !important;
        }
        #primaryProgress{
            background: #474A52 !important;
        }
        .entity__info{
          height: 2.6vw;
          width: 65% !important;
          max-height: 20vw !important;
          font-size: 0.9vw !important;
          margin:0 0 0 1.04vw !important;
          display: inline-block !important;
        }
        div.mmp__bg{
          background: #1E2022;
        }
        ha-card.--inactive div.mmp__bg{
          background: none;
        }
        div.mmp-player {
          padding: 0vw;
          height: 100%;
        }
        ha-card {
          height: 100%;
        }
        mmp-powerstrip {
          width: 100%;
          display: block;
          padding:0;
        }
        ha-icon{
          display: block !important;
          height: 2vw !important;
          width: 2vw !important;
          margin: 0.3vw 1.5vw 0 0vw !important;
        }
        .entity__icon{
          float:right;
          padding: 0.1vw;
          width: 3vw !important;
          height: 3vw !important;
          min-width: 0 !important;
          min-height: 0 !important;
          margin:0 !important;
          display: inline-block !important;
        }

        .mmp-player__core {
          height: auto;
          width: 100% !important;
          margin-bottom: 0.1vw;
          display: block !important;
          position: absolute !important;
          bottom: 0;
        }

        .entity__info__media{
          max-height: 20vw !important;
        }
        .entity__info__media span::before{
          content: none !important
        }
        .attr__media_title{
          display:block;
          color: white;
          font-weight: 300;
          font-size: 1.2vw !important;
        }
        .attr__media_artist{
          font-size: 0.8vw !important;
          font-weight: 200;
          color: white;
        }
        .entity__artwork{
          display:inline-block;
          float: right;
          margin-right: 0 !important;
          display: inline-block;
          float: right;
          width: 2.2vw !important;
          height: 2.2vw !important;
          min-width: 0 !important;
          margin: 0.2vw 1vw 0 0 !important;
        }
      tap_action:
        action: navigate
        navigation_path: /lovelace/2
      type: custom:mini-media-player
style: |
  :host {      
      --sidebar-background: rgba(255, 255, 255, 0.1); 
      --sidebar-text-color: #FFFFFF; 
      box-shadow: none;  
      border-radius: 10px;  
    }
views:
  - title: Home

here is part of my sidebar

Today is {{ now().strftime('%A') }}, {{
                now().strftime('%B') }} {% set suffix = ['st', 'nd', 'rd'] %}{%
                set day = now().day %}{% set index = 3 if day // 10 == 1 or day
                % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
                day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
                <br/>

image

Thanks @Zenia. Any chance you also know a way to make the weather span the bottom of the bar? Tried using CSS to no avail.

You welcome
Try to use animated weather card( or other weather card )in place of bottomCard

Not quite working, it’s still showing as normal and not spanning the full bar. Also is your Today template in your title? Thanks for your help.

sidebar:
  bottomCard:
    type: custom:weather-card
    cardOptions:
      graph: line
      entity: sensor.outdoor_temp
      detail: 1
      icon: mdi:thermometer
    style: |
      :host {
        width: 100% !important;  # Ensures full width
        height: auto;            # Adjust height as needed
      }
      ha-card {
        width: 100% !important;  # Ensures the card itself spans the entire width
        box-shadow: none !important;  # Optional: Removes shadow if not needed
        border-radius: 10px;       # Optional: Customize border radius
      }
  digitalClock: true
  twelveHourVersion: true
  date: true
  dateformat: dddd DD MMMM
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Control Rooms
      active: true
      icon: mdi:floor-plan
    - action: navigate
      navigation_path: /lovelace/home
      name: Control Lights
      icon: mdi:lightbulb-group
      active: true
    - action: navigate
      navigation_path: /lovelace/home
      name: All Devices
      icon: mdi:speedometer
      active: true
    - action: navigate
      navigation_path: /lovelace/home
      name: Media
      icon: mdi:play-circle-outline
      active: true
      sidebar: null
    - entity: media_player.kitchen
      hide:
        controls: true
        name: true
        power: true
        source: true
        volume: true
        progress: true
      idle_view:
        after: 0.1
        when_idle: true
        when_paused: true
        when_standby: true
      style: |
        :host {
          left: 11.7%;
          top:  41.5%;
          width: 20.5078125%;
          border-radius: 5vw;
          overflow: hidden;
          height: 3.8vw;
          box-shadow: none !important;
        }
        ha-card {
          border-radius: 5vw;
          overflow: hidden !important;
          box-shadow: none !important;
          padding: 0.1vw 0.9vw 0.7vw 1.05vw !important;
        }
        ha-card.--inactive .mmp-player{
          opacity: 0 !important;
        }
        #primaryProgress{
            background: #474A52 !important;
        }
        .entity__info{
          height: 2.6vw;
          width: 65% !important;
          max-height: 20vw !important;
          font-size: 0.9vw !important;
          margin:0 0 0 1.04vw !important;
          display: inline-block !important;
        }
        div.mmp__bg{
          background: #1E2022;
        }
        ha-card.--inactive div.mmp__bg{
          background: none;
        }
        div.mmp-player {
          padding: 0vw;
          height: 100%;
        }
        ha-card {
          height: 100%;
        }
        mmp-powerstrip {
          width: 100%;
          display: block;
          padding:0;
        }
        ha-icon{
          display: block !important;
          height: 2vw !important;
          width: 2vw !important;
          margin: 0.3vw 1.5vw 0 0vw !important;
        }
        .entity__icon{
          float:right;
          padding: 0.1vw;
          width: 3vw !important;
          height: 3vw !important;
          min-width: 0 !important;
          min-height: 0 !important;
          margin:0 !important;
          display: inline-block !important;
        }

        .mmp-player__core {
          height: auto;
          width: 100% !important;
          margin-bottom: 0.1vw;
          display: block !important;
          position: absolute !important;
          bottom: 0;
        }

        .entity__info__media{
          max-height: 20vw !important;
        }
        .entity__info__media span::before{
          content: none !important
        }
        .attr__media_title{
          display:block;
          color: white;
          font-weight: 300;
          font-size: 1.2vw !important;
        }
        .attr__media_artist{
          font-size: 0.8vw !important;
          font-weight: 200;
          color: white;
        }
        .entity__artwork{
          display:inline-block;
          float: right;
          margin-right: 0 !important;
          display: inline-block;
          float: right;
          width: 2.2vw !important;
          height: 2.2vw !important;
          min-width: 0 !important;
          margin: 0.2vw 1vw 0 0 !important;
        }
      tap_action:
        action: navigate
        navigation_path: /lovelace/2
      type: custom:mini-media-player
  style: |
    :host {
      --sidebar-background: rgba(255, 255, 255, 0.1); 
      --sidebar-text-color: #fffff; 
      --clock-font-size: 30px;  
      box-shadow: none;  
      border-radius: 10px;  
    }
    .date {  
      font-size: 20px;  
      color: #ffffff;      
      font-weight: light; 
    }
    .clock {  
      font-weight: light; 
      font-size: 30px;  
views:
  - title: Home
    background: {}
    cards: []

Try this card:

Not keen on this layout - trying to get it to look like this. Like it’s part of the sidebar with no border.

Screenshot 2024-10-06 at 15.52.33

I am not an expert in yaml code. Try to add

                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(0,0,0,0) !important;
                        box-shadow: none;

With card_mod


Without:

Wondering if anyone could please help? Looking to remove the two lines in the sidebar menu and change the padding and margins.

If I change in the browser inspector and carry over to YAML I am getting nothing. I imagined that adding this under .sidebar would work but no. Any Ideas would be much appreciated.

I have attached my current view and the view that I am looking to achieve.

sidebar:
  bottomCard:
    type: sensor
    cardOptions:
      entity: sensor.outdoor_temp
      graph: line
      icon: mdi:thermometer
      card_mod:
        style: |
          ha-card {
            background-color: rgba(0,0,0,0) !important;
            border-width: 0px;
            width: 304px;
            margin-left: 0px !important;  # Ensure no margin on the left
            padding-left: 0px !important;
            border-radius: 0px !important;
            }
  digitalClock: true
  width:
    mobile: 0
    tablet: 25
    desktop: 20
  date: true
  dateformat: dddd DD MMMM
  debug: true
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Control Rooms
      active: true
      icon: mdi:floor-plan
    - action: navigate
      navigation_path: /lovelace/home
      name: Control Lights
      icon: mdi:lightbulb-group
      active: true
    - action: navigate
      navigation_path: /lovelace/home
      name: All Devices
      icon: mdi:speedometer
      active: true
    - action: navigate
      navigation_path: /lovelace/home
      name: Media
      icon: mdi:play-circle-outline
      active: true
      sidebar: null
    - entity: media_player.kitchen
      hide:
        controls: true
        name: true
        power: true
        source: true
        volume: true
        progress: true
      idle_view:
        after: 0.1
        when_idle: true
        when_paused: true
        when_standby: true
      style: |
        :host {
          left: 11.7%;
          top:  41.5%;
          width: 20.5078125%;
          border-radius: 5vw;
          overflow: hidden;
          height: 3.8vw;
          box-shadow: none !important;
        }
        ha-card {
          border-radius: 5vw;
          overflow: hidden !important;
          box-shadow: none !important;
          padding: 0.1vw 0.9vw 0.7vw 1.05vw !important;
        }
        ha-card.--inactive .mmp-player{
          opacity: 0 !important;
        }
        #primaryProgress{
            background: #474A52 !important;
        }
        .entity__info{
          height: 2.6vw;
          width: 65% !important;
          max-height: 20vw !important;
          font-size: 0.9vw !important;
          margin:0 0 0 1.04vw !important;
          display: inline-block !important;
        }
        div.mmp__bg{
          background: #1E2022;
        }
        ha-card.--inactive div.mmp__bg{
          background: none;
        }
        div.mmp-player {
          padding: 0vw;
          height: 100%;
        }
        ha-card {
          height: 100%;
        }
        mmp-powerstrip {
          width: 100%;
          display: block;
          padding:0;
        }
        ha-icon{
          display: block !important;
          height: 2vw !important;
          width: 2vw !important;
          margin: 0.3vw 1.5vw 0 0vw !important;
        }
        .entity__icon{
          float:right;
          padding: 0.1vw;
          width: 3vw !important;
          height: 3vw !important;
          min-width: 0 !important;
          min-height: 0 !important;
          margin:0 !important;
          display: inline-block !important;
        }

        .mmp-player__core {
          height: auto;
          width: 100% !important;
          margin-bottom: 0.1vw;
          display: block !important;
          position: absolute !important;
          bottom: 0;
        }

        .entity__info__media{
          max-height: 20vw !important;
        }
        .entity__info__media span::before{
          content: none !important
        }
        .attr__media_title{
          display:block;
          color: white;
          font-weight: 300;
          font-size: 1.2vw !important;
        }
        .attr__media_artist{
          font-size: 0.8vw !important;
          font-weight: 200;
          color: white;
        }
        .entity__artwork{
          display:inline-block;
          float: right;
          margin-right: 0 !important;
          display: inline-block;
          float: right;
          width: 2.2vw !important;
          height: 2.2vw !important;
          min-width: 0 !important;
          margin: 0.2vw 1vw 0 0 !important;
        }
      tap_action:
        action: navigate
        navigation_path: /lovelace/2
      type: custom:mini-media-player
  style: |
    :host {
      --sidebar-background: rgba(255, 255, 255, 0.1); 
      --sidebar-text-color: #fffff; 
      --clock-font-size: 30px;  
      box-shadow: none;  
      border-radius: 10px; 
      text-align: center;
    }
    .sidebarMenu {
     border-top: 0px solid rgba(255, 255, 255, 0.2);
     border-bottom: 0px solid rgba(255, 255, 255, 0.2);
    }
    .sidebar-inner {
      display: contents !important;   # Change display to contents
      padding: 30px !important;        # Remove any padding if needed
      margin: 0px !important;         # Ensure no margin is added
    }
    .date {  
      font-size: 20px;  
      color: #ffffff;      
      font-weight: light; 
      margin-bottom: 35px;
    }
    .digitalclock {  
      font-weight: light; 
      font-size: 30px;  
      padding-top: 10px;
      margin-bottom: 3px;
    }
views:
  - title: Home
    background: {}
    cards: []