If you have been using an older version of this dashboard, in the august update the way the clock is rendered has changed.
Check out your template.yaml somewhere between line 10-20 and compare it with the august updates, it adds span class=“time”
Which is referenced in button_card_templates.yaml in the sidebar block under extra styles (the .time block)
Hi everyone,
It’s been a long time but now it’s time to update the dashboard to have the responsive. Thanks for this feature
However, I have a problem on one of my button-card.
If we look at the old version of my dashboard.
I have a temperature button with a grah. To make this button I made a button + a minigraph using the same coordinates to merge in one and it worked fine.
My old yaml code :
- type: custom:mini-graph-card
entities:
- color: '#0066ff'
entity: sensor.temperature_chambre_william
style:
top: 23.9%
left: 23.8%
width: 47.7%
height: 47.7%
height: 325
line_width: 12
align_state: left
group: false
lower_bound: 18
points_per_hour: 2
hour24: true
hours_to_show: 12
show:
{fill: fade, icon: false, name: false, state: false, name_adaptive_color: true, legend: false, points: false, labels: false}
- type: custom:button-card
entity: sensor.temperature_chambre_william
name: William
style:
top: 23.9%
left: 23.8%
width: 47.7%
hold_action: !include popup/temperature_chambre_william.yaml
tap_action: !include popup/temperature_chambre_william.yaml
template:
- thermometre
- icon_thermometre
I want to reproduce this button with the new responsive dashboard.
Does anyone have a clue? I think I’ll have to do some custom css on the minigraph
I do have custom mini graph card setup in some cards
Relevant ui-lovelace.yaml code:
- type: custom:button-card
entity: sensor.lumi_lumi_weather_temperature
name: Temperatuur
tap_action: !include popup/temperature.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- sensor.lumi_lumi_weather_temperature
template:
- temperature
- icon_temp
variables:
popup_name: Woonkamer
relevant button_cards_templates.yaml code
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">${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:
[
top: 6.5%,
left: 54.5%,
width: 3.5vw,
position: absolute,
letter-spacing: 0.03vw,
]
icon:
- width: 67%
- fill: "#9da0a2"
I suspect you will be able to figure it out from this
To me it’s not really clear what you mean with “slice percent” can you elaborate?
Hi, friend. Could you share the code of the icon and the others you made? include, popup
Thank you
Sure, I have NOT created these myself, only converted them to a working format for this dashboard
Washer:
icon_washer:
styles:
custom_fields:
icon:
- width: 70%
- fill: >
[[[ return variables.state === 'none' ? '#9da0a2' : '#3181b7'; ]]]
custom_fields:
icon: >
[[[
return `
<svg viewBox="0 0 50 50">
<path d="M36.8 9.1H26.1V4.9h10.6v4.2zM41 .6v46.8H7V.6h34zm-2.1 2.1H9.1v42.5h29.8V2.7zM12.3 30.4A11.65 11.65 0 0 1 24 18.7a11.65 11.65 0 0 1 11.7 11.7c0 6.5-5.3 11.7-11.7 11.7s-11.7-5.3-11.7-11.7zm20.6 3.5c-.5.2-1 .2-1.5.2-1.1 0-2.2-.4-2.9-1.2a1.38 1.38 0 0 1-.3-.4c-1 1.2-2.6 1.8-4.2 1.8s-3.2-.6-4.2-1.8c-.8 1-2 1.5-3.3 1.5-.5 0-1-.1-1.5-.2 1.5 3.6 5 6.2 9 6.2s7.5-2.6 8.9-6.1zm-18.5-3.5c0 1 1.1 1.6 2.1 1.6.6 0 2.1-.3 2.1-2.7h2.1c0 2.3 2 2.9 3.2 2.9s3.2-.6 3.2-2.9h2.1c0 2.4 1.5 2.7 2.1 2.7 1 0 2.1-.6 2.1-1.6 0-5.3-4.3-9.6-9.6-9.6s-9.4 4.3-9.4 9.6zm-1-21.3c1.2 0 2.1-1 2.1-2.1 0-1.2-1-2.1-2.1-2.1s-2.1 1-2.1 2.1c-.1 1.2.9 2.1 2.1 2.1z"/>
</svg>
`;
]]]
Dryer:
icon_dryer:
styles:
custom_fields:
icon:
- width: 70%
- fill: >
[[[ return variables.state === 'none' ? '#9da0a2' : '#3181b7'; ]]]
custom_fields:
icon: >
[[[
return `
<svg viewBox="0 0 50 50">
<path d="M37.3 9.2H26.2V5h11.1v4.2zM16.2 30.3c0-4.1 3.5-7.4 7.8-7.4s7.8 3.3 7.8 7.4-3.5 7.4-7.8 7.4-7.8-3.3-7.8-7.4zm2.2 0c0 2.9 2.5 5.3 5.6 5.3s5.5-2.4 5.6-5.3c0-2.9-2.5-5.3-5.6-5.3s-5.6 2.4-5.6 5.3zM12.9 9.2c1.2 0 2.2-.9 2.2-2.1S14.1 5 12.9 5s-2.2.9-2.2 2.1c0 1.1 1 2.1 2.2 2.1zM41.8.7v46.5H6.2V.7h35.6zm-2.3 2.2h-31v42.3h31.1V2.9zM11.8 30.3c0-6.4 5.5-11.6 12.2-11.6s12.2 5.2 12.2 11.6S30.7 42 24 42s-12.2-5.2-12.2-11.7zm2.2 0c0 5.2 4.5 9.5 10 9.5s10-4.3 10-9.5-4.5-9.5-10-9.5-10 4.3-10 9.5z"/>
</svg>
`;
]]]
Curtains (opened and closed)
icon_curtains_combined:
styles:
custom_fields:
icon:
- width: 70%
- stroke: >
[[[ return variables.state === 'closed' ? '#3181b7' : '#9da0a2'; ]]]
custom_fields:
icon: >
[[[ if (entity.state === 'open') return '<svg viewBox="0 0 50 50">
<path d="M10 3v44.5M2 1.8v46.5M48 1.8v46.5M1 3h48m-6 44h6m-5.5-11.5v12.7M40 46h3.5m1-43v17.5M40 3v44.5M5.5 3v17.5m1 15l-.2 12.7M10 46H6.5m.5 1H1" stroke-width="2.5"/> </svg> ' ;
else return '<svg viewBox="0 0 50 50"> <path d="M2 3v44M48 3v44M.8 2.5h48.4M38 47.5h11.2M34.5 35v12m.5-.5h3M43.5 2v18M25 3v44M7.5 2v18m9 15v12m-.5-.5h-3m0 1H.8M38.5 32v15m-26-15v15m3.5.5h19M19.5 8v18m12-18v18" stroke-width="2.5"/> </svg>'; ]]]
Temperature
icon_temp:
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M32.8 28.2V8.4A8.28 8.28 0 0 0 24.5.1a8.28 8.28 0 0 0-8.3 8.3v19.7c-2.5 2.3-4.1 5.6-4.1 9.3 0 6.9 5.6 12.4 12.4 12.4s12.4-5.6 12.4-12.4c0-3.7-1.6-7-4.1-9.2zm-8.3 17.5a8.28 8.28 0 0 1-8.3-8.3 8.2 8.2 0 0 1 2.8-6.2l1.4-1.2V8.4c0-2.3 1.9-4.1 4.1-4.1s4.1 1.9 4.1 4.1V30l1.4 1.2c1.7 1.6 2.8 3.8 2.8 6.2a8.28 8.28 0 0 1-8.3 8.3zm-2.1-29h4.1v24.8h-4.1V16.7zm2.1 14.5c3.4 0 6.2 2.8 6.2 6.2s-2.8 6.2-6.2 6.2-6.2-2.8-6.2-6.2 2.8-6.2 6.2-6.2z"/>
</svg>
Thaks brother
how stupid…seems like a fckn basic thing to do 
is it weird that I got the stuff you described as difficult working but wasnt able to changr thr theme?
anyway, I have a completely different setup (like literally not using anything he does except plex)
But so far yesterday evening I was able to get the main dashboard and info screen working with my devices (replaced lights, user, NAS with QNAP, Device with iPad)
TVs are not replaced yet so its gonna take a bit more work but I think I made good progress. Thanks for your help! It finally looks how it is supposed to look fml
Until now it was mainly replacing entities but I guess there is much more coming up
@Mattias_Persson - Can I ask, is there a sensible way to merge the changes you make at your github repo with the local versions?
As obviously everyone is modifying the local lovelace-ui.yaml to add in their own entities etc. is the only option for us to edit in the changes you make by hand using github commit logs, or am I missing a smarter way to do this?
Thanks, my issue is solved !
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 } ]
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?
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