Easily position elements in Picture Element cards

The other night I was getting really stuck in getting my Picture Element card setup - positioning via top/left properties was taking forever.

I reread the posts talking about manually calculating the right position and saw many recommend https://github.com/ciotlosm/custom-lovelace/tree/master/plan-coordinates but neither was really useful. Then friendly pointer from @ballob to use Chrome Developer tools got me moving.

Its pretty easy but thought I would make a small video demo it so others can learn it too.

Note - that in this video I just edit top/left positions but you can use this approach to edit any kind of transform/filter etc.

Also, in the video I edit lovelace in yaml mode but you can of course use this same approach with managed mode and just use “Configure UI” to enter in the values you find.

8 Likes