Also joined this awesome design, first of all thanks Mattias!. Looks really cool…
I have a lot of questions though :), especially considering the interchangeability of this design. Since it’s pretty awesome, I would love for this to become the default of Home Assistant in tablet format :). But going through the config, I’m just wondering if some things can’t become more ‘generic’ like defining your “lights” on multiple places, I would rather make this into a template and use that. Not even knowing if it’s possible… But I’m drifting…
My actual question is the following:
All the popup that I open are opened at a specific width, I would love for the popup to scale to the content (to some degree, the max of the screen ofcourse). I dont’ seem to be able to fix this.
could anyone assist me, for this case I would expect to also see the map. like:
I can get this to work by editing some styling through the developer tools… But next to editing a ‘main’ style like
ha-dialog {
--mdc-dialog-min-width: 900px;
}
I also am unable to do this (or don’t know how)
Is there a way to present different sidebar to tablet and phone?
There’s already /* phone */ @media screen to change the style (themes.yaml and button_card_templates.yaml). To change the content you could do something like this
sidebar_template:
...
name: |
[[[
if (window.navigator.userAgent.match(/iPhone/i)) {
return 'iPhone content';
}
else if (entity) {
let attributes = '';
for (const [key, value] of Object.entries(entity.attributes)) {
value != false ? attributes += `<p>${value}</p>` : null;
}
return attributes;
}
]]]
I don’t know if it’s possible. I use the default width unless I need more. There’s also large config var here.
You’re missing a lot of styling there, also is the vacuum card set up properly with coordinates etc?
Hi Guys.
i finally converted from the old dashboard to the new setup with button-cards. It is super cool.
I have one problem with the background image is not loading, and i simply can’t figure out why.
have the following config in my theme:
card-mod-theme: tablet
card-mod-root: |
ha-app-layout {
background: url('/local/img/wallpanel/uibg.png');
background-size: cover;
}
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
min-height: 100vh;
}
But looking at the debugger it does not seem to load at all:
Anyone experienced the same? (the image url is accessible and i dont get any load errors, it just doesnt seem to be there at all.).
Did you call frontend.reload_themes?
I actually do see the map. It’s only on the right. So I need to “scroll” to the right. Let me take a look again later today.
Weird, have you tried
card-mod-theme: tablet
card-mod-view-yaml: |
.: |
hui-view {
background: url('/local/background.png') !important;
background-size: cover !important;
min-height: 100vh;
}
Do you think there’s a way to change the columns number in ‘grid’ based on device?
I want to do something like that.
I know it’s not the correct syntax - what would be?
- type: grid
title: devices
view_layout:
grid-area: livingroom
columns: 2
mediaquery: 3
That worked, thank you very much for the hint.
Still weird that i had to put on another level in the CSS. 
Thank you Mattias, and thank you for the awesome work 
The problem with that, grid is not that customizable
but instead of layout-card → grid
you could do layout-card → layout-card
or wrap your grid card with config-template-card
I had a problem where the brightness in the circle was not display correctly. Because of a light group which contains dimmable and non dimmable lights. If there were only the non dimmable lights switched on, the button card showed “NaN%” as brightness.
I adjusted the template for the circle. Now it displays 100% when only non dimmable lights are switched on.
light:
variables:
circle_input: >
[[[ if (entity.attributes.brightness == null) return "100"; else return (entity === undefined || Math.round(entity.attributes.brightness / 2.54)) ; ]]]
Sooo is there a post in here somewhere that explains how to wrangle this into submission and use it on my own setup?
I can’t even save the ui-lovelace.yaml because of some error in the included files.
Yes, a few post up
If you put more effort into your question, I’ll attempt to answer
I’m guessing it’s this one?
I didn’t want to put more effort into something I’m probably doing the wrong way anyway 
I tried to do it by copy pasting your yaml files from the github into the file-editor.
Thank you for your time!
Hi All,
I recently started with HA and I really love this theme.
I’m playing around now with this theme to get everything working.
Some stuff is not working yet and I’m wondering why.
In the picture the date is not visible in the sidebar and for example my TV is turned on but that “button” is not white as like it is active.
In include/template.yaml, copy over the date attribute to
The tv should be on or playing, to check your tv state go to
This looks brilliant. I have been trying to convince myself to adapt your code for months! I’m so glad I did.
One thing I cannot find is the .otf font files.
I am loading the “font.css” file into my configuration.yaml, but the font (see below for example), seems to point to a /local/fonts folder which is not on the github?
I would have expected this to be in the www folder. Do I need to source these fonts myself or is there something I am missing?
Thanks again for all the effort!
@font-face {
font-family: sf display;
font-weight: 900;
src: url(/local/fonts/SF-UI-Display-Black.otf)