2.8 KiB
layout, title, description, date, sidebar, comments, sharing, footer
| layout | title | description | date | sidebar | comments | sharing | footer |
|---|---|---|---|---|---|---|---|
| page | Lovelace Tips and Tricks | Helpful tips and tricks for using the Lovelace UI in Home Assistant. | 2018-07-23 21:57 +00:00 | true | false | true | true |
The Lovelace UI is a very powerful UI. Here are a few tips and tricks that might help you when working with Lovelace.
Have a tip or trick of your own? Click the "Edit this page on GitHub" at the top of this page to share it with everyone!
{% linkable_title Tips & Tricks %}
{% linkable_title Add your your own image to Lovelace %}
Home Assistant allows you to make files in <config dir>/www/example_image.jpg available to Lovelace as /local/example_image.jpg. When you create the www directory, you will need to once restart Home Assistant to pick it up. After that, any new file placed in the directory will automatically be available.
{% linkable_title Disable Click on Elements %}
If you do not want an element to be clickable you can add pointer-events: none
to the element's style: configuration. This is quite useful when building a
Picture Elements card that will be viewed mostly in a
mobile browser. (@Toast)
{% linkable_title Header Using Panel and Stacks %}
You can create a header by using panel: true with nested
Vertical Stack and Horizontal Stack
cards. See the code here. (@dale3h)
{% linkable_title Tools %}
We have some amazing users that have created various tools to help you get started with Lovelace.
{% linkable_title Lovelace Migration Script %}
The Lovelace Migration Script by @dale3h converts your current "old UI" configuration to the new Lovelace format. The idea behind this tool is to help give you something to start playing with right away.
{% linkable_title Lovelace Config Generator %}
The Lovelace Config Generator by @thomasloven provides you with the ability to split your Lovelace configuration into multiple files.
{% linkable_title Lovelace Config Generator (Jinja2 Script) %}
The Lovelace Jinja2 Script by @skalavala is a simple Jinja2 script that you run in the template editor to generate lovelace configuration based on the entities that are already setup.