Did you choose the right theme?
I dont get it. Any hints?
If I only add the camera as a entity and use the entity_picture then I get empty bars at top and bottom.
So i started to nest a picture-entity into the button-card. Then changed to picture-elements to get rid of the bar from picture-entity.
Now you telling me that there is an easier way. I want that way, because I prefer cleaner code. But dont understand what you are trying so say. 
As far as i understand, this is the bare minimum. Like you did in the media-controls. But now I am getting an error “Unknown type encounterd: picture-elements” 
- type: picture-elements
camera_image: camera.garten_kamera_hof
elements:
- type: state-badge
entity: binary_sensor.garten_kamera_hof_bewegung
style:
top: 20%
left: 15%
style:
top: 64.5%
left: 55.18%
width: 10%
tap-action:
action: more-info
template: base
€: got it!
The whole thing is a picture-elements card, and you to say, that i can easily make an element called “image” in this. 
obviously never understood the whole thing.
- type: image
camera_image: camera.garten_kamera_hof
elements:
- type: state-badge
entity: binary_sensor.garten_kamera_hof_bewegung
style:
top: 20%
left: 15%
style:
top: 64.5%
left: 55.18%
width: 10%
tap-action:
action: more-info
template: base
But the problem now is, that the camera picture is widescreen and wont fit. Keep working on it…
I really like your climate card, but i´m unable to recreate it. i copied your code to button_card_templates.yaml and also your example for ui-lovelace. I don´t get error messages. thermostat-popup-card is installed. Any idea why nothing is shown?
thanks!
Double check that everything is on the right place. Also check that the style attribute is correct.
This is reliable for the position.
And what exactly is the problem? Just nothing shown? Can you post a screenshot of your dashboard?
Well, that’s a new one 
1 Like
www/sidebar.png
thanks for pointing me on it, the file actually was there, but corrupted for some reason (0 bytes).
download it again, all looks good now, thanks!!
Where’s a place to reduce top space/padding?
This is the actual status.
But where do I have to these elements that they get saved? The problem is that I just want a specific part of the image displayed.
- type: image
camera_image: camera.garten_kamera_hof
style:
top: 64.5%
left: 55.18%
width: 10%
border-radius: 0.8vw
tap-action:
action: more-info
styles:
entity_picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
I tried it with style, and also with styles. Under styles I tried image, entity_picture, camera_image, camera and a few others.
Im not the best in css.
What would be the right place? Within the button_card_templates.yaml I just pasted it at the end of the yaml file.
Inside the ui-lovelace yaml i placed the climate code where i have the Bathroom light in the picture like that:
- type: custom:button-card
entity: climate.livingroom
name: Livingroom Climate
style:
top: 64.5%
left: 55.18%
width: 10%
template: climate
…so the location (top,left) are correct. Any idea what else i could do/chance to make it work?
thanks!!
styles is only valid for button-card, not picture elements. Heres a simple clip trick.
- type: image
image: local/mattias.png
style:
top: 50%
left: 50%
width: 800px
clip: rect(0px,400px,200px,0px)
I don’t have a camera so I can’t test.
If you can’t make it work just use button-card like you did before.
If you want to delve deeper use card-mod
Ah, after three days of trying and failing I will go back to the old way. Maybe it is a little bit over engineered, but it works the way I want and I dont have any negative aspects, expect a few more lines of code.
Will concentrate to the rest of the dashboard. The tablet is arriving tomorrow, so I need to get it finished. 
But thank you for your assistance.
Is the picture your actual dashboard? Looks like your browser didnt load the new.
If yes, please restart HA and do a fresh reload of the page.
Hello!
Thanks for sharing this. I took a lot of inspiration for my Lovelace UI.
But I’m stuck at one thing, which is the blurry background.
I installed popup-backdrop-filter in hacs: https://github.com/gabe565/popup-backdrop-filter
But I’m not able to get it up and running. I’m using the default theme and want to add the blurry background to popup cards.
Can someone help me get this done?
oh okay, that explains some things.
I’m using cardmod altready for other things. Does that mean ich can specify this effect within the button config? Sorry for the newbie questions. I’m indeed quite new to all this.
Right now it looks like:
styles:
card:
- border-radius: 15%
- width: null
- height: null
- padding-bottom: 12px
- margin-left: null
- background-color: '#262626'
- font-size: 15px
So if I’m right, it has to be set in the theme.yaml. But can it also applied when using the default theme?