UPDATE SEPTEMBER 2021
Now using layout-card and a css-grid for changing between portrait and landscape. I always use this in porttrait so this one is only for you guys
Browser_mod is now used for popups !
Added a footer with som stocks and news info.
Added a “photoframe” popup that autoplays images with the swipe card.
Did some clean-up and added some stuff in the theme-file.
Added the ability to write notes straight on the dashboard. This has high WAF.
Moved media players into a separate popup.
Fine tuned some design elements.
Video demo of the responsive design and more:
If you like this you can always:
So i posted my theme/custom lovelace UI on reddit a and some folks really liked it. I promised to post my code and that is why i started this topic.
- Modern and clean design using 3D-elements and blur-effects.
- Popup windows.
- Auto switch between portrait and landscape.
- Notfications and more !
This is specific made for the screen resolution used in the iPad pro 10,5 model but It is works good on desktop and bigger tablets also. For smaller tablets some resizing of the cards and css-grid might be needed.
Well, i think it looks awesome
HOW TO SET UP:
1. In order for this to work/look as shown in my pictures and video you will need to have the latest versions of the following custom-cards installed:
optional: (someone was asking how i did to display my car information and that is done with:
I also use the Waze Travelsensor integration, Spotify integration, yahoo finance and more…
2. For the gradient icons/images used in the four top cards: Download them here and put them in your www folder.
The 3D weather icons can be downloaded here. For some weather conditions i have one pic for day and one for night. See my code for example and put them in your www folder.
3. Here is my lovelace code. I am not using yaml-mode. Just copy my code and overwrite the code inside your Raw config editor. (updated 15/9 2021)
4. And here is the needed theme file. Put it under /config/themes/Neon/neon.yaml (updated 15/9 2021)
5. You should also create a group for binary sensors and lights. This group should include the same sensors that you would like to show in your notifications.
6 Now it is up to you to change to your sensors, titels, etc. If you have a bigger tablet than the iPad 10,5 just increase the grid-gap to make it fit on your tablet. (see line 14 and 25 in the code) If you haver a smaller screen you can reduce the grid-gap but it will most likely look ugly if you make it to small. Then you will have to change the width of the grid itself and also change some of the width and margins of the elements/cards. Just ask me if you have any questions!
- @thomasloven for creating all amazing custom-cards. This design is only possible thanks to many of your cards.
- @Mattias_Persson for inspiration. I did steal the code for the tap action animation from your code.
- @tben for some inspiration. I borrowed the code for the colured img_cell behind the icons
- @RomRider for the mighty button-card !
- Creator of noctis theme https://github.com/aFFekopp/noctisI . I modfied this theme file with my own colors and parameters. .