Lovelace: custom sidebar card

doktordoc · April 2, 2020, 5:43pm

Can’t get bottom card to work

[Album] Imgur

Tomiam · April 2, 2020, 6:39pm

Sorry, as above I am a simpleton at this, what do you mean?

doktordoc · April 2, 2020, 7:58pm

Bottom card won’t show up

Lundig · April 3, 2020, 6:04am

I can’t get the bottom card to work either.

sidebar:
  bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - type: "custom:button-card" 
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:home
        - type: "custom:button-card"
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:lightbulb
  style: |
    :host {
        --sidebar-background: #0f0f0f;
        --sidebar-text-color: #bcbebf;
    }
    .sidebarMenu li.active {
     background-color: #232729!important;
     }
    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
  width:
    mobile: 25
    tablet: 25
    desktop: 20
  breakpoints:
    mobile: 768
    tablet: 1024
  clock: false
  digitalClock: true
  digitalClockWithSeconds: false
  date: true
  dateFormat: dddd, D MMMM
  sidebarMenu:
    - action: navigate
      navigation_path: "/lovelace/default_view"
      name: "Hjem"
      icon: mdi:home

dankitchen · April 3, 2020, 6:16am

Problem I had was an old Lovelace reference to an earlier version of the module. I removed and reinstalled with HACS

odiv · April 3, 2020, 7:41am

Sorry, my bad! I used English, but when I switch backend language it changes! Everything is awesome!

DBuit · April 3, 2020, 7:43am

Hi,

Maybe start with just a basic lovelace card to make sure the config is not the problem.
Try this:

bottomCard:
    type: entities
    cardOptions:
      entities:
        - light.demo

Change light.demo with any entity in your HA check if this works.
If not check your browser console for an error.

DBuit · April 3, 2020, 7:47am

Hello,

Just released small update of the card: https://github.com/DBuit/sidebar-card/releases/tag/0.1.6
I should calculate the height for the sidebar based on screen height this should help with positioning the bottomcard.

Let me know if it works better now!?

soylant · April 3, 2020, 10:05am

how do i make space between lines in template? when using “markdown” i could do <br> is there any way to do this ??

karma · April 3, 2020, 10:19am

Hi,

I don’t know if it was resolved, at least for me …
I have now done the update and it is the same as the other version.
If I add “bottomCard” it does not appear correctly on the tablet screen. And if I add the “date: true” I don’t even see the “bottomcard”.

With “date:false” and bottoncard:

With “date:true” and bottoncard:

Lundig · April 3, 2020, 7:36pm

This does not work.
I see this in the console regarding sidebar-card:

sidebar-card.js:449 Uncaught (in promise) TypeError: Cannot read property 'offsetHeight' of null
    at HTMLElement.updateSidebarSize (sidebar-card.js:449)
    at HTMLElement.firstUpdated (sidebar-card.js:449)
    at HTMLElement.performUpdate (sidebar-card.js:134)
    at HTMLElement._enqueueUpdate (sidebar-card.js:134)

and this:

sidebar-card.js:403 Header found!

jackcoach · April 4, 2020, 9:50am

Can I define a style property with a condition?
Like that:

  style: |
    :host {
        --sidebar-background: '{% if is_state("input_boolean.dark_header", "on") %}#202d34{% else %}white{% endif %}';
    }

DBuit · April 6, 2020, 9:01am

Hi @karma,

Your menu is just to large so it just does not fit on the screen.

DBuit · April 6, 2020, 9:02am

Nope not possible

DBuit · April 6, 2020, 9:02am

Hi man, Gonna look into the errors you shared!

karma · April 6, 2020, 9:28am

@DBuit, I have set “width: mobile: 0” but the buttons still appear in the shadow even though I can’t load them, they are there.
Is it possible to solve?

doktordoc · April 7, 2020, 7:56am

how to get buttons with title above, just like in first post
really like it

doktordoc · April 8, 2020, 4:18pm

Bottom card still won’t work
What I’m I doing wrong

DBuit · April 9, 2020, 8:17am

Hi man,

“how to get buttons with title above, just like in first post
really like it” <- not sure what you want here

About the bottom card, you sure it is running latest version of the card? are you using HACS? try reinstall i also got problems when i just update sometimes.

Nizm0 · April 10, 2020, 7:57am

I have bottom card working, but template is not displaying

digitalClock: true
date: true
dateFormat: dddd, MMMM, YYYYr
# clock: true
hideTopMenu: false
style: |
  :host {
      --sidebar-background: transparent!important;
      --sidebar-text-color: #EEE;
      --face-color: #333;
      --face-border-color: #EEE;
      --clock-hands-color: #FFF;
      --clock-seconds-hand-color: #FF4B3E;
      --clock-middle-background: transparent!important;
      --clock-middle-border: #EEE;
  }
width:
  mobile: 0
  tablet: 15
  desktop: 18
breakpoints:
  mobile: 768
  tablet: 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 %}
  </li>

bottomCard:
  type: vertical-stack
  cardOptions:
    cards:
      - type: horizontal-stack
        cards:
          - type: "custom:button-card"
            color_type: card
            color: rgb(255, 255, 255)
            icon: mdi:home
          - type: "custom:button-card"
            color_type: card
            color: rgb(255, 255, 255)
            icon: mdi:lightbulb
      - type: horizontal-stack
        cards:
          - type: custom:weather-card
            entity: weather.dark_sky