Edit themes.yaml like this
card-mod-root: |
ha-app-layout {
background: url('/local/your_bg_image.jpg');
background-size: cover;
}
Place your_bg_image.jpg in \config\www\
Then reload the themes service in Developer Tools:
Refresh your browser. If you have the correct theme selected in your profile, the background should be updated.
Thanks! I did everything you said but the background is not changing for me.
In profile I selected tablet and dark mode, but no background for me.
Thanks for al your help!
After updating, sensor.hacs was removed
Yea, https://github.com/hacs/integration/releases/tag/1.28.0
I merged all update.* entities and “other”
It is working right now! Many thanks:D
after browser mod update i changed the codes for my popup windows, but now the background of the popup window is transparent. how can I easily fix this?
Hello @Mattias_Persson sorry for bothering you but I’m getting mad in fitting my config inside my tablet screen (Samsung SM-T500 2000x1200 resolution).
It looks like that I’m a few pixel larger than 1200 and consequentially I can scroll the screen. Moreover footer buttons are aligned to the end to the screen without any free space.
I already tried to change custom-layout-card-padding: 3.3vw without any result.
What should i check?
Here’s my grid config:
layout:
margin: 0
height: 100vh
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 24% repeat(4, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(80%)) 0fr
grid-template-areas: |
"sidebar . . . . ."
"sidebar soggiorno bedroom babyroom bagnomain ."
"sidebar cucina ingresso corridoio bagno ."
"sidebar tv studio media home ."
"sidebar footer footer footer footer ."
Here’s a screenshot of the dashboard:
Thanks!
Davide
I did it differently at home assistant and replaced the sensor.hacs with my own one
{{states.update | selectattr ("state", "eq", "on") | letter | count}}
Hey Laffer,
Sorry to interrupt you again, but I really like to combine the config of you and Mattias.
For example the weather icon is really cool but if I implement the code in the lovelaceui.yaml and in the button_card_templates.yaml I still get an error (ButtoncardJSTemplate Error).
Not sure of there is anything else I should do.
I changed everything, but see no “other Updates” in the Updates-Popup.
Do I miss something?
How is anyone supposed to know what you missed if you provide no info at all? console log
popup/footer_updates.yaml - fill in ALL entities. missing one? track it down by searching my repo
try this A different take on designing a Lovelace UI - #2726 by Mattias_Persson
also increasing the sidebar from 24% to maybe 30% would shrink the main layout
I preferred to stay with the previous version, so I replaced the sensor.hacs by myself with a created one that counts the hacs update
I think the problem is here sensor.template_updates_available
That’s fine! I’m also doing that L58 but a single template sensor that can be referenced instead 
Hello @Mattias_Persson changing size of sidebar to 26% fixes the problem, what is strange is that changing the other values you suggested does not have any impact on layout. how is this possible? I expect that those values should change the spacing between items.
Thanks!
Have you created the template sensors?
A screenshot of the error message would be helpful.
Looks like there was something wrong with my sensors excuse me for that.
Could you tell me how to put the text in the right spot etc?
Yours look more to the right…
Sorry for being this kind of beginner but I learned a lot already
by the looks your font size is not correct, or your button is not the same size, also the padding is not correct.
all of this is from the theme so I would look at the theme from @Mattias_Persson and the theme from @Laffer and find what is missing
