Lovelace: custom sidebar card

Hi @Eldudemeister,

Yes there is!

Open each line with <li>
and close each line with </li>

Check github example you will see the open and closing tag being used

Thanks for the reply! This is my code

  template: >
    <li>
     {% if now().hour  < 5 %} Good Night
     {% elif now().hour < 12 %} Good Morning
     {% elif now().hour < 18 %} Good Afternoon
     {% else %} Good Evening {% endif %}
    </li>

    <li>{% if states('sensor.number_of_lights_on') | float > 0 %} <li>There are
    currently {{states('sensor.number_of_lights_on')}} lights on</li> {% endif
    %}

    <li>The outside temperature is currently
    {{states('sensor.weather_temperature')}} degrees</li> <li>The forecast today
    is currently {{states('sensor.weather_condition')}}</li>

I thoguht I had what you are suggesting in the code?

Hi @Eldudemeister,

Yes that is strange.
Can you inspect the html what is shown in the sidebar and see if you see the <li></li> in there?

Thanks for this, not really sure how to do that? Is it in developer tools?

Is anybody else having issues with HACS reporting the repository isn’t loaded, despite the fact it’s working? I’ve uninstalled, restarted, reinstalled several times, worked through the FAQ at hacs.xyz but can’t clear the error! Any suggestions welcome :smiley:

Yes it is in developer tools

Hi DBuit,
amazing job. I really like your sidebar.
Being a newbie of Home Assistant, could you please explain me how you are able to show the cards on the right of the sidebar in that way? Are you using a specific tool?
Any help on this will be very appreciate.
Thanks a lot in advance.
Roberto

Hi @usercr70,

i think you want the homekit style? it is this card: https://github.com/DBuit/Homekit-panel-card

Hi DBuit,
thank you so much for your help.
I really appreciate.
Thanks again.
Roberto

A little late, but if you want to use multiple cards in the bottomcard, that is possible with the use of custom layout card! https://github.com/thomasloven/lovelace-layout-card

  bottomCard:
    type: custom:layout-card
    cardOptions:
      layout: vertical
      cards:
      - type: 'custom:mini-media-player'
        entity: media_player.spotify_mart
        style: |
            ha-card {
            border-radius: 12px;
            overflow: hidden !important;
            box-shadow: none !important;
            margin-bottom: 0px;
            }
        hide:
          name: true
          power: true
          source: true
          volume: true
      - type: 'custom:mini-media-player'
        entity: media_player.spotify_mart
        style: |
            ha-card {
            border-radius: 12px;
            overflow: hidden !important;
            box-shadow: none !important;
            margin-bottom: 0px;
            }
        hide:
          name: true
          power: true
          source: true
          volume: true

    cardStyle: |
       :host {
         width: 100%;
        }
        ha-card {
          border-radius: 12px;
          overflow: hidden !important;
          box-shadow: none !important;
          margin-bottom: 0px;
        }

example:

2 Likes

Really enjoying the sidebar!
Any way to change the yellow icon color of the highlighted tab?


Thanks!

Hi @heartkingz,

you can check this comment: Lovelace: custom sidebar card

Ah, missed that one. Thanks a lot! Works perfect.

Hi guys, I hope someone can help me.
After I recently updated to “lovelace-card-mod” 2.0.0, the display of my mini-graph-card in the sidebar has changed.

It looked like this before:
2343t

And now it looks like that:
8998t

My Lovelace code for the sidebar is this:

sidebar:
  digitalClock: true
  date: true
  style: |
    :host {
        --sidebar-background: #1c2127;
        --sidebar-text-color: #ffffff;
        --face-color: #0a0b0c;
        --face-border-color: #191c1e;
        --clock-hands-color: #ffffff;
        --clock-seconds-hand-color: #ffffff;
        --clock-middle-background: #bdbec0;
        --clock-middle-border: #000;
    }
    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    h1 {
          text-align:center;
      }
  bottomCard:
    type: custom:mini-graph-card
    cardOptions:
      entities: 
        - sensor.darksky_temperature
      color_thresholds:
        - value: -20
          color: "#0846c2"
        - value: -5
          color: "#087ec2"
        - value: 15
          color: "#eb9c00"
        - value: 28
          color: "#c0392b"
      show:
        icon: false
        labels: false
    cardStyle: |
      :host {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      ha-card {
        background: transparent;
        color: #FFF;
        overflow: hidden !important;
        box-shadow: none !important;
      }

Unfortunately I don’t know what I have to change exactly like the CardStyles of the Mini Graph Card. Everything I tried so far did not work. Maybe someone can help me.

Greetings and thanks

Hi guys,

i have some great news! I became a father this week :baby:
I won’t be able to work on my cards. If you have any request for cool new stuff or have a bug please add an issue on github https://github.com/DBuit/sidebar-card

5 Likes

Congratulations :champagne: Enjoy fatherhood!
It might be worth putting a note on the github page that issues etc. won’t get an immediate response for very good reasons!

Hi all,
does anyone know if it is possible to change the icons size in the sidebar? I searched on the web but I didn’t find any solution.
Many thanks in advance.

Congraturations.

Hi there,

Does anyone know how to add abit of spacing between the sensors? I find it a little clustered. Thank you for your help

any way to do background, picture behind sidebar, background image to be behind all