Do you have this line? extra_styles fix
There’s this basic guide at least. You’re welcome to make a video 
Have you tried putting custom:thermostat-dark-card by itself and not inside custom:button-card?
I bet my templates are messing with your bottom right icons. Can you post how you’ve set those up?
Yeah, and to add to that I don’t think that markdown is inherently bad but styling it is a nightmare.
The nice thing about button card is that if one doesn’t want to convert all jinja templates to javascript, incorporating existing template sensors works fine too.
1 Like
The easiest way would be to swap out the svg
on = a.svg
off = b.svg
custom_fields:
icon: >
[[[
if (entity.state == 'on') {
return `
<svg viewBox="0 0 50 50">
<rect width="40" height="40" fill="blue" />
</svg>
`;
}
if (entity.state == 'off') {
return `
<svg viewBox="0 0 50 50">
<circle cx="20" cy="20" r="20" fill="red" />
</svg>
`;
}
]]]
I would probably just conditionally display the “light” path though
4 Likes
Do you have these sensors working?
- sensor.hass_version_latest_beta
- sensor.hass_version_latest
- sensor.hass_release_notes_rc
- sensor.hass_release_notes
Thanks, @anon36468094 assisted and everything went ok. for now my lovelace is like below, improving every day… your design is awesome.
2 Likes
Yes. equal
thanks for getting back to me.
in fact I haven’t, other than on the entity itself, the button-cards are very plain, and only use your templates as posted.
I’ve also carefully checked if I dont use any templates with the same name myself, which happened in another spot 
Just checked, and Firefox looks identical to Safari. Only Chrome shows the animated icons…
wait: I had edited the base: template and commented some code that I didnt use (screensaver, galaxy etc) but apparently commented too much. now looking like:
which is much better. Interesting to learn once again that not all browsers are equal…
1 Like
I solved it with a template sensor returning different icons if the entity is on or off and included the entity as tap_action to that template sensor button.
1 Like
Does anybody have problems with swiper-card and conditional-card? Accessing my Dashboard for the first time this weird visual error occurs, if i reload or change to another and back to that dashboard it seems fine 
Any ideas?
If the condition is met it looks like this
type: custom:swipe-card
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: conditional
conditions:
- entity: sensor.washer_status
state: 'True'
card:
type: picture-elements
aspect_ratio: 100%
image: /local/washer.png
elements:
- entity: sensor.power_washer
style:
color: black
font-size: 1rem
left: 15%
top: 93%
type: state-label
- entity: sensor.consumption_22
style:
color: black
font-size: 1rem
left: 70%
top: 93%
type: state-label
- entity: sensor.washer_status
state_image:
'True': /local/washer_on.gif
'False': /local/washer.png
style:
clip-path: circle(30% at center)
width: 100%
left: 50%
top: 50%
tap_action:
action: more-info
type: image
- type: grid
columns: 2
cards:
Thanks in advance!
First off, thanks @Mattias_Persson for sharing your work/design here. it has really helped me as a framework to work from to learn how lovelace UI works.
I have gotten stuck on 1 part, I was hoping someone here could help me. Its more CSS related but hopefully someone here knows the answer.
im trying to change how the gridlayout works for a particular card. I figured the simplest way to do this is to create a new button_card_template, that references the “base” template and change the grid layout. that seemed to work but i cant figure out what to change to get what i want.
for the bottom right tile, the text is “sync bedrooms” it is too long and gets truncated to “sync bedro…” I wanted the text to wrap onto the next line. I dont need the state displayed, it can be hidden as it is just a toggle switch and i will show the state by modifying the icon displayed.
this is what i have tried (code snippet for above image)
base2:
template:
- base
styles:
grid:
- grid-template-areas: |
"icon ."
"n n"
"n n"
- grid-template-columns: fit-content(100%) 1fr
- grid-template-rows: 1fr 1fr 1fr
- gap: 2%
- align-items: start
I assumed by change the last row of the grid would allow the text to occupy the whole area, but it didnt work. i tried a variety of settings like change grid template columns and rows etc. but never got good results. ideally it would be proportioned exactly like the others. (the “n” refer to name, and “s” to the entity state right?)
Thanks for any help
Nice one!
Could you please share the code for the colored circle ?
Thanks! 
Try in a horizontal-stack
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.washer_status
state: 'True'
1 Like
It’s the .ellipsis class in button-card truncating the name.
This should work
- type: custom:button-card
...
show_state: false
styles:
name:
- white-space: normal
- text-align: justify
1 Like
like the media swiper-card, yes i tried. But then i do have a empty horizontal-stack in the first swiper-card Any idea, what could cause this visual bug?
like the media swiper-card, yes i tried. But then i do have a empty horizontal-stack in the first swiper-card Any idea, what could cause this visual bug?
I also get a weird bug if im using swipe-card for a single grid button:
type: grid
title: Wohnzimmer
columns: 2
cards:
- type: custom:swipe-card
cards:
- type: custom:button-card
entity: light.wohnzimmer_stehlampe
name: Stehlampe
template:
- light
- icon_shade
- type: custom:button-card
entity: light.wohnzimmer_stehlampe
name: Stehlampe
template:
- light
- icon_shade
On mobile it looks like this:
