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:
Panel mode:
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.
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.