Level Up Your Smart Home with a Pro-Level Dashboard in Home Assistant!
So, you work with Home Assistant and struggle with setting up your dashboard? Those days are over now. With the tips in this Home Assistant tutorial, you will be able to create a dashboard layout exactly the way you want it to be! Get total control over your Home Assistant Dashboard now!
Check this follow-up video to make this layout responsive: • Discover the Power of ...
⭐ You can download the code that I created for this video at: ko-fi.com/s/8f21845272 ⭐
Links referred to in this video:
* Install HACS in Home Assistant: • Install HACS in Home A...
* CSS-Grid explained: css-tricks.com/snippets/css/c...
* Layout-card repository: github.com/thomasloven/lovela...
Blog version: www.smarthomejunkie.net/take-...
⭐⭐⭐
* Join this channel to get access to perks: 📺 / smarthomejunkie
* Please consider becoming my patron 🏅 at / smarthomejunkie
* Or please support me by buying me a ☕ at ko-fi.com/smarthomejunkie/
⭐⭐⭐
My Devices: github.com/smarthomejunkie/My...
Instagram: / smarthomejunkie
Twitter: / smarth0mejunkie
Facebook: / smarthomejunkie
TikTok: / smarthomejunkie
Discord: / discord
Music by:
* 2TECH-AUDIO: 2tech-audio.bandcamp.com/
* Mixaund: mixaund.bandcamp.com
00:00:00 Introduction
00:01:25 Install the custom Layout Card
00:02:03 Create a New Dashboard in Home Assistant
00:02:33 Take control of the Dashboard
00:03:15 View Types explained
00:04:19 Horizontal layout explained
00:04:44 Create Horizontal Layout
00:06:14 Vertical Layout explained
00:06:36 Create Vertical Layout
00:08:38 Grid Layout explained
00:09:06 Create Grid Layout
00:16:40 Conclusion
#homeassistant #dashboard #dashboards #dashboardlayout #tutorial #smarthome #homeautomation
Did you struggle with the layout of your Dashboards as well? What are your tips? Let me know! 👇
easiest way i do now untill there is drag and drop dashboard is create multiple dahboard layout with very few entities i need. form me at the given point it is much easier to do that then spend a enromus time copying codes to keep them in control
I have struggled with creating this grid layout for two hours, getting stuck at ". messages ." - which is simply not passing the yaml validation.
@@odhiambo0 That shouldn't be the case. There must by a typo in your code. You can download the code as well against a small fee. This might save you a lot of frustrations.
@@SmartHomeJunkiethat's the truth. After all the struggle, I purchased the code. I am just waiting for it to be delivered.
@@odhiambo0 You should be able to download it immediately after you purchased it. There's a download link on the final screen. I had one issue before that code was not delivered and it turned out that the payment was rejected. The client got a message via email after some time that the payment was rejected.
Happy New Year, Ed. I'm about to start a new HA setup in a new house in a few weeks, so this series and all your videos will be invaluable. Thanks.
Happy new year Ed. Just the inspiration I need to sort out my dashboard. Thank you.
It's like you read my mind - I've been looking for a good tutorial on HA layouts just the other day and then this video appears - brilliant work and love your channel!
This is fantastic. I wish these options were available inside Home Assistant officially. I know Home Assistant has vertical and horizontal stack cards, but they are a little limited compared to this layout-card functionality. Vertical looks great for portrait style layouts, but I do like the total control of the Grid, though it would take more time. :) Thanks for sharing. I really appreciate your videos.
Thanks great video. Will play more with lay-out card.
Very useful, Thankyou. Looking forward to the video on how you created your dashboard
Thanks Ed, very useful video that gives lots of ideas!
Thanks very much for this video, I'm beginning to understand grid layouts!
Thanks, this is exactly what I needed. I have recently set up a wall tablet and the layout keeps changing, so this will fix that perfectly!
Looking foward to your dashboard :)
You just earned my subscription. I love these unassuming "for Dummies" guides. I can't wait for the video on how you created your dashboard.
Thank you for your support. 🙏
Thanks for the tutorial, Ed - super helpful and I love your style and pace (especially the "turns to the laptop that isn't even switched on" move!!! 😂)
It is switched on... It's a macbook pro that does not light up the logo on the cover.
This is one of the MOST useful videos I've seen solving one of the most annoying issues with Home Assistant. I love your efficient presentation style that focuses on the content.
Thank you for this BIG compliment! 🙏🏻🙏🏻🙏🏻
Hi Ed, happy newyear. What a great video! Thank you so much. Running Ha for a year now and have a lot implemented but the Dashboard was always a mess. Now with this video I really having fun to start with configuring my dashboards from scratch. Thanks, Also for the code.👍
Thank you for your kind words! I must say that I think this video turned out great too. 🙃. I'm glad it helps!
I really love the part of working with CSS, I had already the layout-card from Thomas. But that of the CSS possibilities I did not know. It opens a lot of other things.
@@ictstelucjam3604 Yes indeed. And you can do much more to make it responsive. That part is not in the video otherwise it would get too big. Might create a separate video about it later.
@@SmartHomeJunkie That would be great!
"but the Dashboard was always a mess", LOL, yes, that's about it!
Very nice guide 👍
The information in this video has helped my dashboard so much
That's awesome to hear!
I like using the horizontal-stack inside the vertical-stack, thereby creating 4 columns per dashboard.
Nice, perfect fot the beginner.🙂
Nice Ed, as i suspected last but not least in 2022 brilliant idea to help us in struggling in HA dashboard Happy new year See you in 2023 continue your path to help us
I definately will Sevag. Thank you for all the support that you gave me this year. I use your mug daily by the way! 👌🏻
@@SmartHomeJunkie ❤
He Ed, heldere video ik heb een dashboard gemaakt voor mijn (toekomstige) tablet 👌🏼👍👍
Thanks Ed and Happy New Year. I followed your video but couldn't get the header section to work. (The messages section sat to the right of the header and not below.) After several tries at editing the code I had, I ended up paying for your code and it worked perfectly. I must have missed a subtle part of the code but happy now that it looks correct and exactly like your video.
Thank you for your support!
Hello, Nice video with clear explanation. I just have one question: is it possible to use 4 or 5 instead of 3 columns? So left(1) left middle right right(1). if so how do I set it up?
Nice work! I have been for a while using 3 vertical stack cards for the main tablet dashboard so that everything stays where I want it but it's a nightmare when making changes. This has allowed me to split each column into smaller chunks making it a lot more managable. 👍
Nice one! It's awesome that my video could help you out with your tablet dashboard. Keep rocking it and making those changes!
Grazie Junkie, rendi tutto più semplice 👏 Carlo italy
Thank you for the compliments! 🙏🏻🙏🏻🙏🏻
Brilliant tutorial for a noob like me. Love your accent too. 🧡
Thank you!
Please make a video how you did mount the fire HD to the wall? Cables, power adapter and stuff?
Thank you so much for this, relatively new to HA and was struggling to understand how everyone made these nice dashboards. due to your tutorial I now understand and was able to play around with different set-ups. If I wanted to have a bit of space between I.E the message and the entities (lights in your example) how would I do this? I tried to add .'s as a row but it seems to ignore these?
Maybe you can use a vertical stack card and in the second row add something which is empty. It's also possible to use the crtad-mod integration from HACS, but you need to know how CSS works to get that to work correctly.
Thank you for the explanation! This was driving me nuts, so I did what anyone would do and turned to KZhead lol.
And then you found my channel of all the channels out there. Thanks!
Hello, your Fire HD10 is it by chance PoE ? I'd like to place a table on my wall but only have RJ45 and possibility to PoE to power it ... have you done by chance a video on this ? Many thanks !!
@10:10 instead of going into the raw configuration, you can enter those options in the code box in the view settings, where you choose the view type.
Thank you for adding this Thomas. I totally forgot about it. Great info! 👍🏻
Hello How can I make automatic return to a specific tab after some time. Regards
Another excellent video. I find some of the cards a bit large. Is there a way to re-size them? I am using custom-button and custom-bar for most of my dashboards
You can use the card mod integration from HACS for that.
Another nice video. Is there a way to use this kind of layout to have to level of navigation? example: in the header, have a navigation by Type (global, Light, Heater...) and in the left panel have a navigation by room (with dynamic view in the center/right panels?) . not sure to be clear ;-) but more or less like the Dwains Dashboard?
I think you might be able to do this using mushroom cards to create a header and sidebar navigation, but it will be a tedious job. If you combine it with Kiosk mode it will work very well, but will take you quite some time to set up.
Top Video 👍👍👍
This is Amazing! Thanks so much! After months of watching multiple videos, a bazillion of trial and error, I finally found the perfect layout! It's been so frustrating to get the layout card to work for me and you simply nailed it! THANK YOU! I just have a question, if I may: - My biggest challenge so far was to create a layout for a 16:9 tablet in fully kiosk mode fixed to 4 columns. I'm planning to use Mushrooms cards, however, I'm still not sure if 4 columns won't make the cards too narrow. It will allow me to have more stuff in one view, but will it be too crowded?? I noticed that you kept your grid with 3 columns only. So, do you have any strong opinion on using either 3 or 4 columns? Thanks again, please keep working on more videos, you're the best (trust me, I've seen them all)!
Thank you for your kind words! I believe 4 columns would be too much indeed. But you can use grid cards within a column to show more "subcolumns" with one column. That makes this really flexible!
@@SmartHomeJunkie ok great, that makes sense, 3 columns layout is the way to go! Thank you!
I don't know what am doing wrong - but I have created a dashboard 3 times now - 1st and 3rd time the chips card appeared at the far right - and the 2nd time it appeared in the middle. Not once has it spanned the entire width.....any tips?
Using the grid and defining a VERTICAL stack for the left column, adding 2 cards in it, you mention that "The first and 4th cards are now showed below each other ... " ... in fact the card pin the 3rd column is taking the vertical space of the 2 cards in the right column. You mention there are multiple ways to fix this (at 15:36) ... but how ?? Many thanks !
I usually use the horizontal and vertical stack cards (usually nested) [ Title. ] [ Minibuttons. ] [B0][b1][b2][b3] [Big lamp card. ] IMO This is much easier to work with than grid as I can nest cards Only issue is that It looks bad on the phone if I made it for the PC So I usually make multiple versions of the same dashboard
You can do it with vertical and horizontal cards too, but in my opinion, it's way easier to set it up using the layout card. You can also create truly responsive dashboards with it that work on all kinds of devices.
Hi Ed, where did you get the wall mount for the HD10 tablet? Happy New Year
I printed it myself.
Hoi dankje wel voor deze tutorial dit heeft mij heel veel geholpen... En ik hoorde een snufje nederlands accent dus daarom is dit in het nederlands :)
Graag gedaan.
if you want to center the chips cards in the menu section: add view_layout: grid-area: header place-self: center
Thanks. The chips card itself also has an option to center it by the way.
Thanks! That's the easier way, indeed ;-)
Great video! But I am having one issue -- in my dashboard, under the "view configuration", my "view type" is not a drop down menu and I don't have the vertical and horizontal views. I just have the three standard view types. Any advice on how to fix this? I appreciate it!
Did you install the custom layout card from HACS and cleared your browser cache?
Thanks
Thank you for your support!
I did all steps untill 11:48 and bumped into issue on "visual editor" - its has a massage that visual "editor is not supported for that configaration" - At path: view-layout -- Expected a value of type `never`, but received: `[object Object]
Great video. Do you know how you can have a custom dashboard per user? Lets say you have two kids that have a dashboard with the devices in there rooms. Right now you can only lock down dashboards for admins but i want/need to lock down per user or per role.
Yes, that is possible. Will create a video about it shortly.
@@SmartHomeJunkie Great you are The best. Please tag me in that one. 😛
HI! Happy new year! Quick question: Is it possible to center the chips in the header area?
Yes you can. Set the chips card to align centered.
@@SmartHomeJunkie Can you point me exactly how? Is there an option or code?
@@CosminFrinculescu Yes, it's an option in the chips card.
@@SmartHomeJunkie Great, thanks!
Have you made a tutorial for the tablet dashboard?
Not yet!
Cant wait for it!
I followed this video and al seemed to work great 👍🏻🤔 but now if I enter a something in the "right" colum it gets bigger then 33% and brakes the layout Is there anyway I can prevent the right colum from extending more then the 33%?
That shouldn't be the case. I guess something is different in your case. Make sure that each column contains a vertical stack card first.
Is there a way to "fit in the screen" the dashboard? I have a 720p tablet (10 inch screen) and not all my dashboards are fitting properly. Thanks.
You need to create a dashboard that fits your device. So different dashboards for different devices. Or... Make it truly responsive. See the documentation of the layout card for that.
This is the eternal battle between responsive dashboards that change with the display device/display size, and specific placement of UI elements. There are arguments for both, but personally, I prefer the responsive layouts.
Wel, I have a surprise for you. 😉 Check this follow up video: How To Create a RESPONSIVE Dashboard in Home Assistant kzhead.info/sun/fKutnKWLjaxsoa8/bejne.html
Thanks for a great video. i get a error when i try to get your code with the link above.
Thanks. There was an error indeed. I fixed it now!
happy new year ed and all others. In my opinion using the HACS>dashboard layout integration is not the best way to do this. Its already possible within the ui to use horizontal, vertical and grid cards wich u can use to do what is showed in this tuturial and you dont need any css or other coding.
The layout card is way more flexible than that and much simpler to set up. On top of that you can create full responsive dashboards which you'll never be able to by using the default cards.
@@SmartHomeJunkie it will be a bit of work but playing with horizontal stacks in vertical stacks or the other way will make it responsive aswell the same aplies for the grid variant. If i find the time i will try to explain just that. HACS is a great way to archive stuff that will take a bit time to explore for yourself or integrate apps that do not yet exist in core but in my opinion the better way especially for beginners is to try to figure stuff out inside the ui since most things are already possible and it is very handy to learn to use HA the right way.
@@djjolit Let's agree to disagree :)
type: vertical-stack cards: - square: true columns: 3 type: grid cards: - show_name: true show_icon: true type: button tap_action: action: toggle name: Gate icon: mdi:gate - type: vertical-stack cards: - show_name: true show_icon: true type: button tap_action: action: toggle name: Power icon: mdi:power icon_height: 25px - show_name: true show_icon: true type: button tap_action: action: toggle name: Power icon: mdi:power-off icon_height: 25px - square: true columns: 2 type: grid cards: - show_name: false show_icon: true type: button tap_action: action: toggle - show_name: false show_icon: true type: button tap_action: action: toggle - show_name: false show_icon: true type: button tap_action: action: toggle - show_name: false show_icon: true type: button tap_action: action: toggle - type: horizontal-stack cards: - show_name: true show_icon: true type: button tap_action: action: toggle - show_name: true show_icon: true type: button tap_action: action: toggle - type: vertical-stack cards: - type: picture image: /local/Pic/AC.jpg tap_action: action: none hold_action: action: none - square: true columns: 3 type: grid cards: - type: vertical-stack cards: - show_name: true show_icon: true type: button tap_action: action: toggle name: '21' icon: mdi:snowflake icon_height: 60px - show_name: true show_icon: true type: button tap_action: action: toggle name: '24' icon: mdi:snowflake icon_height: 60px - show_name: true show_icon: true type: button tap_action: action: toggle name: 24 turbo icon: mdi:snowflake icon_height: 60px - type: thermostat name: Master Bedroom AC - type: vertical-stack cards: - show_name: true show_icon: true type: button tap_action: action: toggle name: '21' icon: mdi:weather-sunny icon_height: 60px - show_name: true show_icon: true type: button tap_action: action: toggle name: '24' icon: mdi:weather-sunny icon_height: 60px - show_name: true show_icon: true type: button tap_action: action: toggle icon_height: 60px name: 24 turbo icon: mdi:weather-sunny - show_name: true show_icon: true type: button tap_action: action: toggle
How can a dashboard be created for each user and have different permissions? Can you make a video tutorial about the Dashboard for each user and have different permissions, meaning that a specific Dashboard appears for each user and the user can only edit it through the admin?
Did you see this video? How To Create a USER SPECIFIC DASHBOARD in Home Assistant kzhead.info/sun/idqDlMeRb2Wefn0/bejne.html
Blijf deze fout houden: Kan YAML niet parseren: YAMLException: bad indentation of a mapping entry (11:9) 8 | grid-template-rows: auto 9 | grid-template-areas: 10 | "header header header" 11 | ". messages ." --------------^ 12 | "left middle right" 13 | ". footer ."
Loks like the code-link is not working. I'm getting an Invalid URL error.
Yes, there was an error. I found it and fixed it!
Can't find the layout card in hacs 😳
That's a bit strange. Maybe you can add the Layout card repository first in HACS and see if you can find it after that. Try adding this repo: github.com/thomasloven/lovelace-layout-card
Installed the Plugin, but it did not show. You also need to install card-tools. Now it is working.
You do not need card-tools to use the layout-card. I am using layout-card and do not use card-tools. The options come when you create a view, there is no visible plugin as such, other than in the HACS dashboard.
You probably forgot to clear your browser cache or reboot HA.
Yes, when you installed the card-tools it likely refreshed the cache to allow you to see the layout-card options. :)
Hello Ed, while trying to add "column to the editor I get this message: De visuele editor wordt niet ondersteund voor deze configuratie:. How to solve?
🤷🏼
What version of Home Assistant are you running? This message is indicating the visual editor is unable to view the card. Have you checked the spacing in the YAML code? Also, you have to use the YAML to edit the manual column position, so make sure you are not trying to edit it with the GUI or Visual editior. First point would be to check the spacing and spelling is all correct in the YAML.
Might be that you forgot to clear your browser cache after installing the layout card as well.
@@SmartHomeJunkie I have cleared my cache . I even tried in with Edge i.s.o. firefox. I use the latest version of HA.
@@EsotericArctos Hello Brendan, I use the latest version. Which YAML code do you mean?(which file?) I cannot find an YAML file where this configuration is stored.
Cannot find layout cards in Hacs, nothing with the words layout are found :(
I'm not sure why this happens at your side. Try adding this repository in HACS, by selecting for frontend, clicking on the three dots in the right corner, selecting custom repositories and add this repo as lovelace repository: github.com/thomasloven/lovelace-layout-card. You should be able to find the card after that.
@@SmartHomeJunkie I was in integrations and not frontend 🤦♀️ Lol
@@Dirt33breaks That explains a lot!
Hi, when I tried to install-card layout I get this "You have 1 Lovelace elements that are not loaded properly in Lovelace."
Did you refresh your browser cache and reboot HA?
@@SmartHomeJunkie Yes sir, I did
@@frankphilips5498 Maybe ik uninstall and reinstalling helps?
@@SmartHomeJunkie Will do that now
That did the trick. Thank you
really wish that HA would implement a drag drop tile system and resize icons by clicking and dragging to resize.. why has this to be so complicated..
Drag and drop is really complicated to implement.
Hee, ik heb de code gekocht, waar moet ik die implementeren?
See the video hits to use it.
@@SmartHomeJunkie Hmm cant find.
@@framevisionfilms ko-fi.com/s/8f21845272
Ik heb de code al maar waar plaats ik die in home assist? Zie dat nergens in de video waar je die plakt of in de tekst.
@@framevisionfilms Dat wordt toch echt uitgelegd. In de raw configuration editor. Of in de view settings kan ook.
I can't make it work. Header and messages are ok, but when I want to put something in left or right, it's get in to line of messages. It's like "." are not working.
It should work. Not sure why it won't work in your case.
@@SmartHomeJunkie Solved it 😉 it doesn't work with standard custom card's, when I changed it to mushroom, it worked 👍
@@marcinwalaszczyk2282 Great that you fixed it, but it should work with all types of cards. Does it work if you put a vertical stack card in the left area and put all other cards inside of that vertical stack card?
@@SmartHomeJunkie yes, it work that way. In my case it didn't work with classic button card and entity
where is the code for the grid dashboards?
Hi! The link is in the description.
@@SmartHomeJunkie Need to purchase it right?
@@gayanll Well, you can either choose to type it from the screen or download it for a small fee so it saves you a lot of time.
Why Layout Card if you have the vertical and horizontal stack cards?
Because it's way more flexible.
Just to complicated! 18 minutues to show solution which you already know (prepared upfront). For me HA sould not be "tamagotchi" where we spend our lives minutes. I don't mind your solution, but for home use, I can live with unpredicatable cards movement.
When did you monetize your code downloads Ed?.. just went to download this code and it wants 3 euro!
That is correct. I need to do this to be able to keep creating these tutorials as long as I do not have enough Patrons/Members. Otherwise I have to stop making this content unfortunately. But, you can still type the code from the screen for free if you want to.
@@SmartHomeJunkie no worries mate, just took me by surprise😁
@@davecl35 Thank you for understanding Dave. I really want to find a way to do this for free, but it's not realistic yet. 🙏🏻
@@SmartHomeJunkie Is the code also behind your Patreon?
@@RyanMurphy-ky6um No, it's not. It's not possible unfortunately.
Lack of drag and drop dashboard leads to extreme work around
Drag and drop is not easy to implement. I guess it will take at least a year before it will be there.
@@SmartHomeJunkie i tried to use chatgpt help it threw this out not sure how to implement what chat gpt said dashboard: title: My Dashboard widgets: - type: entity entity: light.bedroom name: Bedroom Light - type: entity entity: light.living_room name: Living Room Light This will create a dashboard with two widgets, one for each light. You can customize the widgets by adding additional options, such as a title or an icon. To enable drag and drop functionality, you will need to set the mode option to 'drag-and-drop': dashboard: mode: drag-and-drop title: My Dashboard widgets: - type: entity entity: light.bedroom name: Bedroom Light - type: entity entity: light.living_room name: Living Room Light any possiblity chatgpt can come to rescue?
@@bat3332 Chatgpt is often wrong. It also uses old code. I wouldn't recommend using it.The mode drag and drop does not even exist.
@@SmartHomeJunkie thank you for clarification