Styling lovelace with CSS..?

Configuration Frontend
1

Hello, I’m trying to create or modify some downloaded themes to get the perfect looking dashboard but I’m really confused about the CSS-like ymal format. First of all WHY is it done in ymal and not just regular CSS? It would be so much easier. Where is the documentation on styling themes for HA? The best I found so far is this page but it’s not complete or official.

So I’m running lovelace in kiosk mode. I want a grid layout that takes up 100% of the screen width, but has the same margin/padding at the edges of the screen as on the cards. For example when i have a lovelace page in sidebar mode, it has the padding, but it doesn’t take up 100% of the screen, everything is floating to the left. When I have it in panel mode, it takes up 100% of the screen, as I want except for there is no padding at all at the top and edges. See the two images.

Sidebar mode:

ha-lovelace-sidebar
ha-lovelace-sidebar1920×1080 132 KB

Panel mode:
ha-lovelace-panel
ha-lovelace-panel1920×1080 134 KB

There is a div tag with the ID root, if I give this a padding of 10px in google chrome’s developer tool it does exactly what I want, but of course it goes away when i reload the page.I can’t figure out how to implement this padding in the ymal theme itself. The image bolow shows what I’m trying to achieve.

ha-lovelace-panel-with-padding
ha-lovelace-panel-with-padding1920×1080 135 KB

I have also tried to add a link to a custom css file in the lovelace dashboard itself, but it seems to have no effect at all.

1 Like
2

This covers the basic setup for themes in Lovelace.

For more advanced styling, you probably should investigate Thomas Lóven’s custom card-mod. There is a discussion thread dedicated to styling Lovelace cards - Ildar Gabdullin’s posts are highly recommended - and one for setting styles at the theme level, which includes creating and setting theme level CSS classes.

You can also install themes through HACS (Home Assistant Community Store) if you want to see what others have done rather than build one completely from scratch.

1 Like
3

I think the solution is not using lovelace at all and going with TileBord, it’s a million times better, except that is not up to date with all the new helper/entity types.

4

I’m not sure if it’s possible to style the outer margins of the dashboard with card_mod, that’s focussed on cards and their content.

You could do it using layout-card though