Lovelace: custom sidebar card

adamlaakso1 · December 11, 2020, 6:53pm

I have the same issue

DBuit · December 14, 2020, 7:50am

It works for me but i think the problem is the heigth of the sidebar it self.
You guys know developer console of your browser? Below i can see the height of the sidebar-inner please check how large it is and if the bottom card is at the bottom of the sidebar-inner.

If it is the problem is not the card but the sidebar it self. and than i need to find a solution let me know!

Umbe · December 14, 2020, 8:55am

Here is mine

but if i check the inner is another size

And i just made an update and my sidebar became grey … , the code there was making the bar same colour as the page , and now , not anymore.

Temporary fixed , changing the background and applying a fixed color to the bar , but if anyone get back the transparent , please let me know : )

adamlaakso1 · December 14, 2020, 3:52pm

adamlaakso1 · December 14, 2020, 4:00pm

So, I found that in the Dev console I can temporarily change the PX in the line element style. Changing it to 950 from 905 fixed it for me. Let me know if I can edit the style somewhere to force the change. Sorry, I’m techy but not a web dev kind of person!

yuval221183 · December 15, 2020, 2:26pm

hello everyone
I need help, I made the menu I what.
it works fine but I need to refresh the page to get a menu why ??
Only after the refresh does I see it.

royle · December 17, 2020, 12:59pm

Hi,

I really when to add my calendar to the sidebar,

Dose someone manage to do it and it looks good ?

Thanks

peteywhit · December 19, 2020, 2:25am

Yep, I’m having the same problem. I see most others are using the 24 hour clock.

I’ve tried making changes to the sidebar-card.js file, but it’s not reflecting the changes on my UI.

I can’t say definitively because I haven’t been able to get it to make any changes, but line 17421 defines variable ampm to pm if hours >= 12.

However hours is a constant defined below. This means the constant hours will always be less than 12. Which would lead to always being am.

const hours = ((date.getHours() + 11) % 12 + 1);

Here’s an example: It is currently 8:16pm CST.

date.getHours() = 20
20 + 11 = 31
31 mod 12 = 7
7 + 1 = 8
so...
8 < 12

It is the correct hour, but since ampm is pulling from this constant, then it is technically less than 12.

Hopefully, this is the problem, and @DBuit can verify.

There is an issue listed in the Git, so I will add this to that thread as well.

Update Dec. 20: I can confirm this is the case now, because anytime it is 12:00-12:59 am or pm, the clock shows PM. It also shows the day before when running the 12 hour format.

Update Dec. 20, 7:50pm CST:
So I ended up having to search how to modify a custom component, I found out that the .gz file can be renamed or deleted, and any changes in the .js file will then show. I don’t know if this will affect how HACS acts with the component then.

To correct the ampm function, I modified the following.

Before
17741        const hours = ((date.getHours() + 11) % 12 + 1);
...
17766            var ampm = hours >= 12 ? 'pm' : 'am';
After
17741        const realhours = date.getHours();
17742        const hours = ((realhours + 11) % 12 + 1);
...
17767            var ampm = realhours >= 12 ? 'pm' : 'am'; 
I also added a way to turn the period off if I want a 12-hour clock without the AM or PM. I did this because on my Lenovo tablet, the clock takes up 1 whole row, and the period is below it and I like the clean look with just the numbers in 12-hour format.

peteywhit · December 21, 2020, 3:28pm

@Umbe & @adamlaakso1

To bring the bottomCard down to the base of the sidebar, you can add a negative margin-bottom to the ha-card style. When I set it to -50px, it brings the bottomCard down to the bottom of the screen. Even though the size of the header is 58px tall.

    cardStyle: |
      :host {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      ha-card {
        background: transparent;
        color: #fff;
        overflow: hidden !important;
        box-shadow: none !important;
        margin-bottom: -50px;
      .state {
        font-size: 8px;
      }

Umbe · December 21, 2020, 5:14pm

Thanks!!! , it worked.

adamlaakso1 · December 21, 2020, 7:46pm

Amazing. Totally worked! Thank you

Jeroom_De_Muelenaere · December 22, 2020, 10:28am

I’m testing the media background (https://github.com/TheLastProject/lovelace-media-art-background) in combination with the custom sidebar.
The problem is that when i use the media background nothing is clickable in the sidebar.
The sidebar is showing, but i can’t click any of the links or controls in there.

i can’t really shows it on a picture but i hope you get what i’m explaining. Anyone who has tried this? Or fixed this?

winniko · December 27, 2020, 9:18am

Hello everyone!
The sidebar-card is fantastic, I have a problem I can’t remove the top bar, where am I wrong? thanks

Mikael_Kristensen · December 28, 2020, 1:33pm

Hi
The car overview on right side is just amazing! I’ve been looking for something linke that for some time, would you mind sharing the original picture?

I’ve found useable pictures but none like yours!

Mobiledude · December 29, 2020, 7:34pm

Hi Mikael. The picture was derived from de mobile app of MercedesMe. SInce Mercedes recently closed down (limited) their Api, I am not using it anymore. Also I migrated my HA instance, and the image is no longer there. I switched to Dwains Dashboard with HA as well. So a lot of changes the last couple of months. In short :-): I don’t have it anymore. Srry.

Mikael_Kristensen · December 30, 2020, 7:44pm

Ahh okay, thanks! How do you show it now then? Maybe you found some nice way of doing it?

Thanks to your “MercedesMe” info i found and made the folowing. I’m not the best photoshopper but I think I can make it work for me atleast. Sharing with others.
Adding my pictures for anyone to find them using Google
Keywords: Vehicle Car Overview Smart Home

pressure_new

Edit:
I actually found the original mercedesme android apg with a tons of nice pictograms inside including the original files

Taweesak_Srisakwarak · December 31, 2020, 3:09pm

Please anyone help me my selecting tab doesnot show up

Umbe · January 1, 2021, 2:55pm

Let me know if clear

  sidebarMenu:
    - action: navigate
      navigation_path: /home-kit/Page1
      name: System status
      active: true      
      icon: mdi:home-assistant

config.yaml:

lovelace:
  mode: storage
  dashboards:
    home-kit:  #must have a - in the name
      mode: yaml
      title: example
      icon: mdi:apple
      show_in_sidebar: true
      require_admin: false
      filename: ui-lovelacehk.yaml

and the cards pages :

views:
  - title: System
    path: Page1
    panel: true
    cards:

btw , which cards are you using for the entities ?
thanks

andrew47 · January 1, 2021, 6:43pm

Is it possible to use a background image for the sidebar instead of a color?

mikebol · January 6, 2021, 2:32am

This thread has a ton of good examples in it. Would love to see these pulled out and the sidebar-card documentation updated with these valuable “how-to” samples.

My question: I cannot get the .digitalClock font-size to adjust. I’d like the clock text to be smaller but nothing I’ve tried seems to change the default size including adding the !important. Suggestions?

.digitalClock {
    text-align: center;
    padding-bottom: 1px;
    padding-top: 20px
    font-size: 25px!important;
    line-height: 45px;
}

Mike