A different take on designing a Lovelace UI

[diegot (Diego)]

I am not that advanced, unfortunately this is not working for me to get a background.

1. I upload the image in /config/www/
2. I use the code like below:

####################################################

CARD-MOD

####################################################

card-mod-theme: tablet

card-mod-root: |
  ha-app-layout {
    background: url('/config/www/bg.png'); 
    background-size: cover;
  }x

card-mod-view-yaml: |
  .: |
    hui-view {
      background: none !important;
      min-height: 100vh;
    }

Am I doing something wrong? (maybe the background: none !important; is wrong but not sure

[Laffer (André)]

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.

[diegot (Diego)]

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!

[Mattias_Persson]

@djoaza @slofii

After updating, sensor.hacs was removed

Yea, https://github.com/hacs/integration/releases/tag/1.28.0

fix footer_updates

I merged all update.* entities and “other”

[diegot (Diego)]

It is working right now! Many thanks:D

[arifroni]

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?

[masoncrawford1994 (mason)]

see above A different take on designing a Lovelace UI - #3754 by Mattias_Persson

[Dave81 (Dave)]

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

[djoaza]

I did it differently at home assistant and replaced the sensor.hacs with my own one
{{states.update | selectattr ("state", "eq", "on") | letter | count}}

[diegot (Diego)]

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.

[slofii (Michael)]

I changed everything, but see no “other Updates” in the Updates-Popup.

Do I miss something?

[Mattias_Persson]

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

[Mattias_Persson]

@Dave81

I already tried to change custom-layout-card-padding: 3.3vw without any result.
What should i check?

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

[djoaza]

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

[mgroup]

I think the problem is here sensor.template_updates_available

[Mattias_Persson]

damn, you’re right! sorry @slofii!

rm restored test entity

[Mattias_Persson]

@djoaza

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

That’s fine! I’m also doing that L58 but a single template sensor that can be referenced instead

[Dave81 (Dave)]

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!

[Laffer (André)]

Have you created the template sensors?

A screenshot of the error message would be helpful.

[diegot (Diego)]

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