Lovelace: custom sidebar card

Hello everyone. I just started with this awesome side bar and I loved, thank you
My question is about custom greeting, how I can move from bottom to top of the sidebar?
TY

title: НАШ ДОМ
sidebar:
  active: true
  width:
    mobile: 0
    tablet: 25
    desktop: 15
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024
  template: |
    <li>
      {% if now().hour  < 5 %} Good Night {{'\U0001F634'}}
      {% elif now().hour < 12 %} Goodmorning {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
      {% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}, {{user}}.
      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') }}. 
      Temperature   {{states('sensor.openweathermap_temperature') | int  }}°C
      {{states('sensor.openweathermap_condition') }}.

    </li>    
  style: |
    :host {
        --sidebar-background: transparent;
        --sidebar-text-color: dodgerblue;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #FFF;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
        --sidebar-icon-color: darkorange;
        --divider-color: dodgerblue;
    }
    .digitalClock {
        font-weight: 400!important;
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 100px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    .title h1{
        text-align: center;
    }
    .sidebarMenu li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 255px;
     }

    .bottomCard {
     icon-size: 185px;
    }
  digitalClock: false
  twelveHourVersion: true
  hideHassSidebar: false
  hideTopMenu: false
  date: false
  dateFormat: dddd DD MMM
  clock: false
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home1-mine
      name: Home
      active: true
      icon: mdi:castle

Hey there,

i have some issues with navigation and updating the selected sidebarMenu.
when i navigate on my dashboard using the sidebarMenu the selected sidebarMenu Item will be shown as selected → this works fine!

But when i use “action: navigate” on a normal button on my dashboard the selected sidebarMenu is not shown as selected. The selected sidebarMenu Item stays the page i’m coming from.

updateMenu is set to true!

Thanks a lot!

Looks like , this project not supported anymore. It’s sad. I found similar in HACS apps. It’s call HA-Dashboard by wassy92x, and it’s look the same but with more futures.
Yet another responsive Dashboard with Sidebar (HA Dashboard) - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

1 Like

I was playing with sidebar for a little bit, an here is what i got so far:

sidebar:
  active: true
  bottomcard: true
  width:
    mobile: 0
    tablet: 20
    desktop: 25
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024
  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 %}, {{user}}.
      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') }}. 
      Temperature   {{states('sensor.openweathermap_temperature') | int  }}°C
      {{states('sensor.openweathermap_condition') }}.
    </li>    
  style: |
    :host {
        --sidebar-background: transparent;
        --sidebar-text-color: white;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #FFF;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
        --sidebar-icon-color: darkorange;
        --divider-color: white;
    }
    .title h1{
        text-align: center;
    }
    .sidebarMenu li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 255px;
     }
  digitalClock: false
  twelveHourVersion: true
  hideHassSidebar: false
  hideTopMenu: false
  date: false
  dateFormat: dddd DD MMM
  clock: false
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: custom:text-divider-row
          text: '-'
          text-divider-color: white
        - type: vertical-stack
          cards:
            - type: custom:mushroom-template-card
              primary: Main Page
              secondary: ''
              icon: ios:house
              icon_color: teal
              fill_container: true
              tap_action:
                actio: navigate
                navigation_path: main-page
              card_mod:
                style: |
                  ha-card {
                    background-color: rgba(0,0,0,0) !important;
                    box-shadow: none;
                    margin-left:0rem;
                    #width:15px !important;
                  }
            - type: custom:mushroom-template-card
              primary: First Floor
              secondary: '{{ states(''light.first_floor_lights'') }}'
              tap_action:
                action: navigate
                navigation_path: first-floor
              icon: mdi:home-floor-1
              icon_color: >-
                {%if is_state('light.first_floor_lights', 'off') %} teal {% else
                %} amber {% endif %}
              card_mod:
                style: |
                  ha-card {
                    background-color: rgba(0,0,0,0) !important;
                    width: 50px !impotant;
                  }
                  ha-card:after {
                  content: " {{ states.light | selectattr('state', 'eq', 'on')
                    | rejectattr('name', 'search', 'First Floor')
                    | map(attribute='entity_id') | map('area_name')
                    | select('in', ['Living Room', 'Kitchen', 'Hallway','Kids Room','Garage','Outside', 'My Bathroom'])
                    | list | count }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: teal;
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50% 50%;
                    top: -5px;
                    left: 40px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                    }
            - type: custom:mushroom-template-card
              primary: Second Floor
              secondary: '{{ states(''light.second_floor_lights'') }}'
              tap_action:
                action: navigate
                navigation_path: second-floor
              icon: mdi:home-floor-2
              icon_color: >-
                {%if is_state('light.second_floor_lights', 'off') %} teal {%
                else %} amber {% endif %}
              card_mod:
                style: |
                  ha-card {
                    background: none !important;
                  }
                  ha-card:after {
                  content: " {{ states.light | selectattr('state', 'eq', 'on')
                    | rejectattr('name', 'search', 'Second Floor')
                    | map(attribute='entity_id') | map('area_name')
                    | select('in', ['Upstairs', 'Master Bedroom', 'Sonia Room','Artem Room'])
                    | list | count }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: teal;
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50% 50%;
                    top: -5px;
                    left: 40px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                    }
            - type: custom:mushroom-template-card
              primary: Basement
              secondary: '{{ states(''light.basement_lights_all'') }}'
              tap_action:
                action: navigate
                navigation_path: basement
              icon: mdi:home-floor-b
              icon_color: >-
                {%if is_state('light.basement_lights_all', 'off') %} teal {%
                else %} amber {% endif %}
              card_mod:
                style: >
                  ha-card {
                    background: none !important;
                  } ha-card:after {content: " {{ states.light and states.switch
                  | selectattr('state','eq', 'on')
                    | rejectattr('name', 'search', 'Basement')
                    | map(attribute='entity_id') | map('area_name')
                    | select('in', ['Basement', 'Basement Restroom', 'Utility'])
                    | list | count }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: teal;
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50% 50%;
                    top: -5px;
                    left: 40px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                    }
            - type: custom:mushroom-template-card
              primary: Outside
              secondary: '{{ states(''light.outside_lights'') }}'
              tap_action:
                action: navigate
                navigation_path: outside
              icon: phu:outside
              icon_color: >-
                {%if is_state('light.outside_lights', 'off') %} teal {% else %}
                amber {% endif %}
              card_mod:
                style: |
                  ha-card {
                    background: none !important;
                  }
                  ha-card:after {
                  content: " {{ states.light | selectattr('state', 'eq', 'on')
                    | rejectattr('name', 'search', 'Outside')
                    | map(attribute='entity_id') | map('area_name')
                    | select('in', ['Outside'])
                    | list | count }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: teal;
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50% 50%;
                    top: -5px;
                    left: 40px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                    }
                    
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-person-card
                  entity: person.yevgeniy
                  name: Yevgeniy
                  fill_container: true
                  icon_type: entity-picture
                  tap_action:
                    action: navigate
                    navigation_path: /our-home/family
                - type: custom:mushroom-person-card
                  entity: person.irina
                  name: Iina
                  fill_container: true
                  icon_type: entity-picture
                  tap_action:
                    action: navigate
                    navigation_path: /our-home/family
                - type: custom:mushroom-person-card
                  entity: device_tracker.life360_sonia
                  name: Sonia
                  fill_container: true
                  icon_type: entity-picture
                  tap_action:
                    action: navigate
                    navigation_path: /our-home/family
                - type: custom:mushroom-person-card
                  entity: device_tracker.life360_boris_bolembakh
                  name: Papa
                  icon_type: entity-picture
                  fill_container: true
                  tap_action:
                    action: navigate
                    navigation_path: /our-home/family
            - type: custom:mushroom-chips-card
              chips:
                - type: action
                  tap_action:
                    action: navigate
                    navigation_path: family
                  icon: mdi:family-tree
                  icon_color: primary
                - type: action
                  tap_action:
                    action: navigate
                    navigation_path: weather
                  icon: mdi:weather-hazy
                  icon_color: primary
                - type: action
                  icon_color: primary
                  tap_action:
                    action: navigate
                    navigation_path: ha-info
                  icon: mdi:memory
              alignment: center

Hi all,

is it possible, to let the Template Text blink or flashing?

Having a hard time getting the bottom card transparent. I’ve tried “transparent”, “none”, and the actual color of the sidebar background with no luck.

  active: true
  width:
    mobile: 0
    tablet: 20
    desktop: 20
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024
  style: |
    :host {
        --sidebar-background: #393646;
        --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: 200!important;
        text-align: left;
        padding-bottom: 1px;
        padding-top: 1px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: left;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
     icon-size: 185px;
    }
    .template {
        font-weight: 100!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-tablet/home
      name: Home
      active: true
      icon: mdi:home-account
    - action: navigate
      navigation_path: /dashboard-tablet/weather
      name: Weather
      active: true
      icon: mdi:weather-lightning-rainy
    - action: navigate
      navigation_path: /dashboard-tablet/security
      name: Security
      active: true
      icon: mdi:cctv
    - action: navigate
      navigation_path: /dashboard-tablet/lights
      name: Lights
      active: true
      icon: mdi:lightbulb-group
    - action: navigate
      navigation_path: /dashboard-misc/0
      name: Misc
      active: true
      icon: mdi:alpha-m-circle
  bottomCard:
    type: grid
    theme: Mushroom
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: custom:stack-in-card
          mode: vertical
          theme: Bubble
          cards:
            - type: weather-forecast
              entity: weather.forecast_35th_silver_palm
              forecast_type: daily
              show_current: true
              show_forecast: true
              secondary_info_attribute: humidity
              theme: Bubble
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-person-card
                  entity: person.justin
                - type: custom:mushroom-person-card
                  entity: person.lisa
            - type: conditional
              conditions:
                - entity: sensor.nws_alerts
                  state_not: '0'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: '{{state_attr(''sensor.nws_alerts'', ''Alerts'')[0].Headline}}'
                icon: mdi:alert
                icon_color: red
                tap_action:
                  action: navigate
                  navigation_path: weather
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: sensor.nws_alert_type
                multiline_secondary: true
          cardStyle: |
            ha-card {
              background: none;
              overflow: hidden !important;
              box-shadow: none !important;
             }

Thanks for any help.

Try this In :host, it makes the bar transparent but uniform in color.

background: none;

Hi guys,

I dont’t get the bottomCard working. The cards are not visible. I allready installed/reinstalled the newest version 0.1.9.7

What am I doing wrong?

sidebar:
  title: "Sidebar title"
  digitalClock: true
  clock: false
  date: true
  dateFormat: dddd DD.MM.YYYY
  width:
    mobile: 0
    desktop: 20
  style: |
    :host {
        --sidebar-background: transparent !important; 
      }
    h1.digitalClock {
        padding-top: 50px; 
        color: #B4B7B7;
        font-weight: 400;
        font-size: 70px!important;
        text-align: center; }
    .date {
        color: #B4B7B7;
        font-size: 40px;
        text-align: center;
        font-weight: 200;
        line-height: 35px;} 
    .template li {
        padding-left: 0px;
        padding-top: 10px; 
        font-size:.1.3vw!important;
        font-weight: 200!important;
        opacity: 0.85;
        letter-spacing: -0.05vw!important;
        text-align: left;}
  sidebarMenu:
    - action: navigate
      navigation_path: "/lovelace/home"
      name: "Home"
      active: true
    - action: navigate
      navigation_path: "/lovelace/lampen"
      name: "Lampen"
    - action: navigate
      navigation_path: "/lovelace/music"
      name: "Muziek"
    - action: navigate
      navigation_path: "/lovelace/4"
      name: "Geen idee"
  bottomCard:
    type: "horizontal-stack"
    cardOptions:
      cards:
        - type: "custom:button-card"
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:home
  template: |
    <li>
      {% if now().hour  < 5 %} Goede nacht {{'\U0001F634'}}
      {% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Goedenmiddag {{'\U0001F44B\U0001F3FB'}}
      {% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
    </li>
views:
  - title: "Home"
    cards:
      - type: "custom:sidebar-card"

Regards,

Karim

Try this.

 bottomCard:
    type: custom:button-card
    cardOptions:
       color_type: card
       color: rgb(255, 255, 255)
       icon: mdi:home

But your button doesn’t seem to do anything???

This is the example code from HACS. The button doesn’t show up at the bottom of the sidebar panel. And in this topic many people had problems with it. But it should be fixed.

Thanks for the suggestion. Unfortunately, it doesn’t work to make the bottom card transparent.

Hi

Im using the sidebar card a long time now.
However i recently adjusted it, to contain some mushroom chips.
I do have problems with this

Sometimes i see the chips, but some times they dont show up, this happens especially when i view another view…
If i refresh then hey come back sometimes

Any idea?

@DBuit any idea?

This issue is with mushroom cards in the sidebar itself?

I have had this issue randomly ever since I started using sidebar card. However, it seems to be happening a lot more frequently since the update to HASS 2024.09
Just trying to understand if it is the same issue I am having. Unfortunately I dont have any solution.

yes
Think its the same issue

if you are talking about the bottomCard, try removing type: horizontal-stack and specify the card you want to add directly. That’s what I did and I haven’t had any problems since,

IMG_9748

Mm
How can i make sure then that some are in horizontal stack and some are beneath it in horizontal stack?

Heres my code

bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: alarm_control_panel.risco
                  icon_color: red
                  name: Alarm
                  use_entity_picture: false
                  content_info: name
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: transparant;
                        --text-color: white;
                      }
                - type: conditional
                  conditions:
                    - condition: numeric_state
                      entity: sensor.huidig_stroomopbrengst_watt
                      above: 0
                  chip:
                    type: template
                    icon: mdi:transmission-tower-export
                    icon_color: green
                    content: >-
                      {{(states('sensor.dsmr_reading_electricity_currently_returned')

                      | float * 1000) | round(0)}}W
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: transparant;
                          --text-color: white;
                        }  
                - type: conditional
                  conditions:
                    - condition: numeric_state
                      entity: sensor.huidig_stroomverbruik_watt
                      above: 0
                  chip:
                    type: template
                    icon: mdi:transmission-tower-import
                    icon_color: red
                    content: >-
                      {{(states('sensor.dsmr_reading_electricity_currently_delivered')

                      | float * 1000) | round(0)}}W
                    card_mod:
                      style: |
                        ha-card {
                          --chip-background: transparant;
                          --text-color: white;
                        }  
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: sensor.current_lights_on
                  icon: mdi:lightbulb-multiple
                  icon_color: amber
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: transparant;
                        --text-color: white;
                      }
                - type: entity
                  entity: sensor.current_media_players_on
                  icon: mdi:play-circle
                  icon_color: amber
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: transparant;
                        --text-color: white;
                      }  
                - type: action
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-tablet/lab
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  icon: mdi:test-tube
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: transparant;
                        --color: white;

how did you icons full color

Hi

I installed Cupertino icons from HACS and I added colored icons from the Free SVG site.

1 Like

is this project still alive?