Custom dashboard layout?

deanfourie · June 9, 2024, 8:52am

Hi, how can I create a dashboard layout like this? I want a large card in the middle, and the rest of the cards are standard around the large card.

Thanks, its rough drawing but you get the idea

a

d13g0m0nt3s · June 9, 2024, 9:11am

Hi you will need custom layout card from HACS for this layout , will be the easiest way. Maybe with a lot of horizon and vertical cards too but with custom layout card is more easy and controlable.

https://github.com/thomasloven/lovelace-layout-card

deanfourie · June 9, 2024, 9:13am

Thanks, I saw this,

Im just having some troubling figuring out how to set it up for this layout style.

d13g0m0nt3s · June 9, 2024, 10:05am

There are different approaches to accomplish this but this could be one.

grid-template-columns: 25% 25% 25% 25%
grid-template-rows: auto

grid-template-areas: |
     “cell1 cell2 cell3 cell4”
     “cell5 content content cell6”
     “cell7 content content cell8”
     “cell9 cell10 cell11 cell12”

And then in every card:

view_layout:
  grid-area: HERO GOES THE AREA NAME

deanfourie · June 9, 2024, 10:29am

Hmmm thanks,

This is the best I could come up with.

LiQuid_cOOled · June 10, 2024, 7:05am

It’s possible, but the dashboard cards have a huge influence on the layout. If you could share the card types, I may be able to assist.

I mocked up a rough version up with custom button-cards as an example.

deanfourie · June 10, 2024, 9:37am

Thanks, this looks good. It will be mainly made up of Apex Charts cards, and there will be a embedded webpage in the middle with windy.com,

Its for a weather dashboard,

deanfourie · June 27, 2024, 12:45pm

Any ideas, I never really got to the bottom of this, this is what I currently have.

This is what im trying to achieve.