damn, that was indeed the culprit – thanks so much. I owe you a beer, that’s for sure
maybe it’s a bit naïve, but now always has to edit the ui-lovelace.yaml in notepadd++? so you don’t see his changes at all?
or gives a edior with preview what i do?
Anyone has an idea what just happened? The alignment of the full home assistant environment is going nuts!
Or is this an april fools day joke from the Home Assistant team?
2 Likes
@martheijnen
Same for me, glad that I am not the only one affected, I was worried it somehow had something to do with my backend nginx changes and it was driving me nuts that I couldn’t figure out what could possibly lead to this 
Edit: it has to do with card-mod:
Sure 
#################################################
# #
# GRAPH #
# #
#################################################
graph:
template:
- base
show_name: true
show_state: false
custom_fields:
circle: >
[[[ {
let temperature = entity.state;
return `<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" 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="13" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${temperature}°</text></svg>`; }
]]]
graph:
card:
type: 'custom:mini-graph-card'
color_thresholds:
- value: 21.5
color: "#307FFD"
- value: 22.5
color: "#018001"
- value: 23.5
color: "#FF9801"
entities:
- "[[[ return variables.entity_id; ]]]"
line_width: 4
animate: true
hours_to_show: 24
points_per_hour: 1
height: 140
align_icon: left
align_header: left
show:
name: false
icon: false
state: false
legend: false
labels: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[[ return "Klima " + variables.title ]]]'
style:
.: |
:host .content {
width: calc(385px + 385px);
max-width: 90vw;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(2, 1fr)
grid-template-rows: 1fr
grid-template-areas: |
"temperature humidity"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(3, 1fr)
grid-template-areas: |
"temperature"
"humidity"
cards:
- type: entities
view_layout:
grid-area: temperature
title: Temperatur
show_header_toggle: false
card_mod:
class: header
style: |
ha-card {
margin: 0px !important;
}
h1 {
padding: 1em 0 0 1.3em !important;
}
entities:
- type: custom:mini-graph-card
entities:
- "[[[ return variables.entity_id; ]]]"
animate: true
hours_to_show: 24
points_per_hour: 1
height: 200
hour24: true
action: none
color_thresholds:
- value: 21.5
color: "#307FFD"
- value: 22.5
color: "#018001"
- value: 23.5
color: "#FF9801"
show:
graph: line
icon: false
name: false
labels: false
points: hover
extrema: true
average: true
labels_secondary: false
- type: entities
view_layout:
grid-area: humidity
title: Luftfeuchtigkeit
show_header_toggle: false
card_mod:
class: header
style: |
ha-card {
margin: 0px !important;
}
h1 {
padding: 1em 0 0 1.3em !important;
}
entities:
- type: custom:mini-graph-card
entities:
- '[[[ return variables.entity_id + "_2"; ]]]'
animate: true
hours_to_show: 24
points_per_hour: 1
height: 200
hour24: true
action: none
color_thresholds:
- value: 40
color: "#307FFD"
- value: 50
color: "#018001"
- value: 60
color: "#FF9801"
show:
graph: line
icon: false
name: false
labels: false
points: hover
extrema: true
average: true
labels_secondary: false
styles:
name:
- margin-bottom: 2.1vw
- color: rgb(239, 239, 239)
- text-shadow: rgb(18 22 23 / 90%) 1px 1px 5px
custom_fields:
graph:
[
position: absolute,
bottom: 0,
left: 0,
width: 100%,
padding-top: 0,
]
2 Likes
https://community.home-assistant.io/t/if-your-frontend-looks-weird-today/407225
I’ve seen some unreasonably hateful comments on other sites, the code is harmless. It’s admirable that he admitted his mistake. Please keep it civilized.
1 Like
have you or some else a idea how to add there more space?
i added the columns to 3 from the grid
and i try to replace the icon here with a standard mdi icon but i had no success
here the original code:
- type: custom:button-card
confirmation:
text: '[[[ return `Abendbeleuchtung, aktivieren?` ]]]'
entity: script.home_arrive
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.abendbeleuchtung
name: Abends
hold_action:
action: none
template:
- base
- icon_home
here my code :
`- type: custom:button-card
confirmation:
text: '[[[ return `Abendbeleuchtung, aktivieren?` ]]]'
entity: script.home_arrive
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.abendbeleuchtung
name: Abends
hold_action:
action: none
template:
- base
##- icon_home
icon: mdi:weather-sunset
show_icon: true
styles:
icon:
- width: 72%
- margin-left: -1%`
i deleted the template - icon_home and set my mdi picture but he shows nothing
I can only laugh about it there’s no hate or anger from my side haha
1 Like
what if the svg image has more than one path line?
i tried it so, but no it dont work
<class="${state}">
<path d="m350 354.67c-154.39 0-280-71.176-280-158.67s125.61-158.67 280-158.67 280 71.176 280 158.67-125.61 158.67-280 158.67zm0-298.67c-144.1 0-261.33 62.805-261.33 140s117.23 140 261.33 140 261.33-62.805 261.33-140-117.23-140-261.33-140z"/>
<path d="m350 532c-154.39 0-280-71.176-280-158.67 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332 0 77.195 117.23 140 261.33 140 144.1 0 261.33-62.805 261.33-140 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332 0 87.492-125.61 158.67-280 158.67z"/>
<path d="m79.332 382.67c-5.1562 0-9.332-4.1797-9.332-9.332v-168c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v168c0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m620.67 382.67c-5.1562 0-9.332-4.1797-9.332-9.332v-168c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v168c0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m350 168c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332 65.332 16.051 65.332 37.332-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
<path d="m191.33 233.33c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332c37.246 0 65.332 16.051 65.332 37.332s-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
<path d="m508.67 233.33c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332c37.246 0 65.332 16.051 65.332 37.332s-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
<path d="m350 298.67c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332 65.332 16.051 65.332 37.332-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
<path d="m350 205.33c-2.4727-0.035156-4.8359-1.0039-6.625-2.707-0.82422-0.90625-1.4883-1.9492-1.9648-3.082-0.47656-1.1211-0.73047-2.3281-0.74219-3.5469 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332-0.015625 1.2188-0.26953 2.4258-0.74609 3.5469-0.47656 1.1289-1.1367 2.1719-1.9609 3.082-1.7891 1.7031-4.1562 2.668-6.625 2.707z"/>
<path d="m350 74.668c-5.1562 0-9.332-4.1797-9.332-9.332v-18.668c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v18.668c0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m98 205.33h-18.668c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h18.668c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m620.67 205.33h-18.668c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h18.668c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m284.67 74.668c-2.4766 0.003906-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
<path d="m219.33 93.332c-2.4766 0.003907-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
<path d="m154 121.33c-2.4766 0.003907-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
<path d="m116.66 158.67c-1.4531 0-2.8867-0.33984-4.1836-0.99219l-17.828-8.9609c-4.6094-2.3125-6.4688-7.9219-4.1602-12.527 2.3125-4.6094 7.9219-6.4688 12.527-4.1602 0.003906 0.003906 0.011719 0.003906 0.015625 0.007812l17.828 8.9609c4.6055 2.3125 6.4648 7.9258 4.1484 12.531-1.5859 3.1562-4.8203 5.1484-8.3516 5.1445z"/>
<path d="m415.33 74.668c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
<path d="m480.67 93.332c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98437-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
<path d="m546 121.33c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
<path d="m583.34 158.67c-5.1562 0.007812-9.3398-4.168-9.3438-9.3203-0.003906-3.5312 1.9844-6.7656 5.1445-8.3516l17.828-8.9609c4.6055-2.3203 10.215-0.46875 12.535 4.1367 2.3203 4.6055 0.46875 10.215-4.1367 12.535-0.003906 0.003907-0.011719 0.003907-0.015625 0.007813l-17.828 8.9609c-1.2969 0.65234-2.7305 0.99219-4.1836 0.99219z"/>
<path d="m350 205.33c-2.4727-0.035156-4.8359-1.0039-6.625-2.707-0.82422-0.90625-1.4883-1.9492-1.9648-3.082-0.47656-1.1211-0.73047-2.3281-0.74219-3.5469 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332-0.015625 1.2188-0.26953 2.4258-0.74609 3.5469-0.47656 1.1289-1.1367 2.1719-1.9609 3.082-1.7891 1.7031-4.1562 2.668-6.625 2.707z"/>
<path d="m350 354.67c-5.1562 0-9.332-4.1797-9.332-9.332v-18.668c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v18.668c0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m275.33 345.33c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
<path d="m210 326.67c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
<path d="m144.67 298.67c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98437-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
<path d="m98.848 260.96c-5.1562 0.007812-9.3398-4.168-9.3438-9.3203-0.003906-3.5312 1.9844-6.7656 5.1445-8.3516l17.828-8.9609c4.6094-2.3125 10.219-0.44922 12.527 4.1602 2.3086 4.6016 0.45312 10.203-4.1445 12.52l-17.828 8.9609c-1.2969 0.65234-2.7305 0.99219-4.1836 0.99219z"/>
<path d="m424.67 345.33c-2.4766 0.003907-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
<path d="m490 326.67c-2.4766 0.003906-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
<path d="m555.33 298.67c-2.4766 0.003906-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
<path d="m601.15 260.96c-1.4531 0-2.8867-0.33984-4.1836-0.99219l-17.828-8.9609c-4.6055-2.3203-6.457-7.9336-4.1367-12.535 2.3164-4.5977 7.918-6.4531 12.52-4.1445l17.828 8.9609c4.6055 2.3125 6.4648 7.9258 4.1484 12.531-1.5859 3.1562-4.8203 5.1484-8.3516 5.1445z"/>
<path d="m396.67 420h-93.332c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h93.332c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
<path d="m396.67 457.33h-93.332c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h93.332c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
</class>
First of all thanks for this amazing work.
I’m struggling a bit with the frontend. Some text and position vary each time I’m reloading my browser/app (Doesn’t have anything to do with the April fools prank, started way before that). It obviously sounds like a cache problem but it keeps happening on multiple devices/programs, also after deleting the cache. I didn’t notice it for a while because I only opened the dashboard via the sidebar. Another dashboard was set as default. With this method I get the wanted appearance every time. But when I set the UI as default or reload the page multiple times the appearance keeps varying.
Very strange problem. Maybe someone here had an similar issue or know where to start the troubleshooting. 
solved: I accidentally removed this line in ui-lovelace.yaml:
- type: custom:button-card #extra_styles fix
styles: {card: [display: none]}
I made a little cctv animation and svg icon.
here from state “idle” to “streaming” and back.
and for a “decken light”
can you perhaps expalin me how i must style or add parameters to the sidebar? in your Version here?
or how to hide the original bar ?
on your pciture in the first post is the sidebar with a time and more, but on github there is nothing in the sidebar, or not nothing but no time and no states only a boolean
i tried to add to ui-lovelance.yaml my code over views but it happens nothing
custom_header:
hide_header: true
sidebar:
title: "BLA BLA"
digitalClock: true
width:
mobile: 20
tablet: 25
desktop: 20
sidebarMenu:
- action: navigate
name: Home
icon: mdi:home
navigation_path: /lovelace/default_view
active: true
- action: navigate
name: Media
navigation_path: /lovelace/media_path
icon: mdi:youtube-tv
And my Lay-out makes problems. The second row ist not correct there are all icons too small have you perhaps a idea ?
On my iPhone 12
And the space right is too much or ?
Hold action popups (fire-dom-event) stopped working for me… any ideas why?
Did you already update to the latest version of card-mod? That fixed it for me.
Hi Pimp, can you please explain how did you make those animations? I am quite familiar with After Effects and animating in general, but I can’t seem to find in which format it has to be made. Maybe you can help me getting in the right direction?
Okey new week, new issues 
I have a problem with popup cards and the button card.
The buttons are not resizing in the same way they do in the main UI.
Am using the nas.yaml as base and experimenting with adding button cards according to the below yaml.
- type: grid
view_layout:
grid-area: nas
title: Klimat
columns: 2
show_header_toggle: false
card_mod:
class: header
style: |
ha-card {
margin: 0px !important;
}
cards:
- type: custom:button-card
entity: light.vrumfonster
name: Fönster
template:
- light
- icon_windows
- type: custom:button-card
entity: light.byra
name: Byrå
template:
- light
- icon_window
Am guessing that it has something to do with the styling of the popup?
action: fire-dom-event
browser_mod:
command: popup
title: Vardagsrum
style:
.: |
@media screen and (min-width: 1200px) {
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
}
layout-card:
$grid-layout:
$:
hui-entities-card:
$: |
.card-content {
padding: var(--card-content-padding);
padding-bottom: 0.8em;
}
ha-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
letter-spacing: normal;
}
/* portrait */
@media screen and (max-width: 1200px) {
ha-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
margin-top: 1.7em;
max-width: 82vw; /* iphonex */
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 385px 385px 385px
grid-template-rows: 1fr
grid-template-areas: |
"hass tablet nas"
mediaquery:
#portrait
"(max-width: 1200px)":
grid-template-columns: 1fr
grid-template-rows: repeat(3, 1fr)
grid-template-areas: |
"hass"
"tablet"
"nas"
cards:
hi
i take the hard way, no adobe.
i choose and download me a icon from Material Design Icons
then i open it in a editor, or notepad++ , take the "path d=“XXXX” code and paste it on SVG Path Editor · aydos.com.
there i change the size under options, 1:1.9 or 1:1.7. then i go to Tryit Editor v3.7 (w3schools.com)
and cut the codes to choose what i want to animate and what not.
then you go in the button_card_template.yaml and look for example at the other animation, for example icon_spot:, then i play a little bit with the code to get what i want, i look for inspiration to w3schools. there are many css examples and what possible. search easy “css animation”.
actually i play a little bit with a roller shutter svg image and animations, until now i dont have ther perfect timings but it works
4 Likes
Solved this on my own with a little trial and error.
It was the style part of the popup that was messing things up.
If you adjust the width calc and the column px down a bit it looks great.
(am a novice in CSS so perhaps there is a better way but hey, it worked )
it’s not finished yet, I have to refine it and set the timings. but then gladly, think perhaps today I get them finished.
and add a mask, i must play a little bit with it until its ready.
can perhaps someone help with the problem of my aligment of the grids
i think its because i added in the grid 3 columns.
its posible to change the gap?
