Maybe a stupid question but what is the best way start using this amazing lovelace? I have tried different things like copy/paste all github files etc but it resultst in allot of config check errors. Is there any basic files that you can copy to get started.
Currently there is no better way, than copying everything and going through it by hand to solve the issues
Thanks for the quick response. For now I copied the main things I need for the Lovelace to work but I keep getting a error that custom: grid-layout can not be found? I also don’t see this specific linked in the ui-Lovelace.yaml and can’t find the js file in the zip folder.
@Mattias_Persson did you run into an issue with popups not working for the hold_action on the light buttons at any time?
The information and vacuum popups work fine from the sidebar but when I hold a light button nothing is happening, any tips on troubleshooting would be really appreciated!
Double sorry, it would have helped if i had updated the button_card to the latest version before posting!
Problem solved 
custom:grid-layout is part of lovelace-layout-card:
Make sure this is loaded, you can install through HACS but will need to enable it manually in configuration.yaml under the lovelace header (see configuration.yaml in matthias’ github)
lovelace:
mode: yaml
resources:
[ { url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module },
{ url: /hacsfiles/lovelace-valetudo-map-card/valetudo-map-card.js, type: module },
{ url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module },
{ url: /hacsfiles/swipe-card/swipe-card.js, type: module },
{ url: '/local/calendar-card.js?v=3.109.1', type: module },
{ url: '/local/custom_icons.js?v=28082021', type: module },
{ url: /local/font.css, type: css } ]
1 Like
I’ve also had this happen a few times during testing when I refreshed the lovelace dashboard before HA was completely done restarting
A simple F5 of the lovelace dashboard would solve it instantly
Hi everyone. Since the last update I saw that some had the same sidebar button problem. Lower the subject again with the correction and could not solve it. Do you have to modify any other file?
Another problem I have on an ipad is that the images of people are stretched to the top of the button. What could change without stopping working on android?
1 Like
Since the last update the previous “markdown” cards that were being used in the sidebar, have been replace by “custom:button-card” configs in a “vertical-stack”
So, first check your ui-lovelace.yaml, specifically the sidebar portion
Then check the button_card_templates.yaml for the sidebar portion
Ofcourse check themes.yaml for the new css configs
And lastly there is a minor change in the template.yaml which I mentioned here
I corrected it.
Now it only remains to correct the time that was left with a small size but I will review them to correct them.
Thank you.
This attribute is the one that changes the font size? I change it and it remains the same? What am I doing wrong?.
sidebar-time-font-size: 5vw
Someone with an iphone or ipad. I have the problem that the images of the people are stretched to the bottom of the button. I don’t know if it just happened to me.
If you can try it with a smaller screen size. The temperature circle loses proportion the smaller the screen
I will look into it when I have time, thanks for letting me know, don’t use small screens myself 
I Think this should do it…
temperature:
template:
- base
show_state: false
custom_fields:
circle: >
[[[ {
const temperature = Math.round(entity.state);
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="1.5" fill="#FFFFFF08" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${temperature}°</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
line_color: "#3182b7"
line_width: 4
font_size: 75
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: "#9da0a2"
1 Like
Yes friend. Thanks
after updating to HA 2021.9.4 from 2021.8.6, I noticed some problems in the dashboard. sidebar icons are bigger (marked as red). if I click one of them it opens the popup and the icons return to small, as it should be. it happens in chrome and kiosk browser. any one else having this problem? FYI i haven’t update the code for this theme (aug 2021)
From the used fonts it looks like you haven’t selected the “tablet” theme under your user account.
Could you check if the behaviour is still present when you use the correct theme?
i have the tablet theme selected. as before the update.
@wjbridge thanks. I have seen this before. but I have a problem with using new updates from @Mattias_Persson .
after I applied the new update (theme, not HA), all the buttons are destroyed. it looks like this.
I noticed the sidebar_template some styling has been used which is controlling/overriding the style of other buttons also (like lights in the pictures.). for example the #name part (don’t know what is the name for these) exist both in the sidebar and all buttons. so what I write in sidebar_template is overwriting what I wrote before in the base template’s #name section.
#name {
padding: 1.8vw 2.5vw 0 var(--custom-layout-card-padding);
white-space: normal;
text-align: left;
}
#name in sidebar
#name in buttons
