Dashboard with custom Layout/CSS?

I’d like to build a tablet/touchscreen specific layout that uses horizontal scrolling. What I hand in mind was 3 rows, with each element having approximately 300px in width. The elements that don’t fit on the screen would be off the page, and could be accessed via horizontal scrolling (swiping in the case of tablets).

An more generally, I’d like to find a way to modify styling/layout of dashboard element without having to rely solely on the HomeAssistant dashboard layout builder.

Some things come to mind.

HACS to install all this stuff. Then look in the front end section for:

Custom layout card (use CSS grid to define a card layout, including the entire panel)
Custom button card (most extensible button, huge customization available, also supports CSS Grid inside the button - it basically becomes an actionable container… )
Card mod (css most things in the HA Lovelace UI)

And once in HACS - Frontend, check out Mushroom Cards.

1 Like