A different take on designing a Lovelace UI

1 Like

Does anyone here have a beautiful animated window icon, lol
Would very much appreciate it, or link maybe to where i can find it. think coding one is tidy bit too difficult for me as of right now :stuck_out_tongue:

Hi friend. I try to base myself on your code to start modifying mine. Try to use sidebar without success.
Now using your code I get this error. Can anybody help me. Thanks

If I copy the content of button_card_templates.ymal I have no errors but it looks like this

@elysium, did you ever figure out what caused this? I am having the same issue.

Hi Pablo,

I am not sure if you should be editing this with the lovelace ui web editor.

What I did was copy all files from the github repository to my own home assistant config. You won’t be able to edit it through web editor because of the way it is coded with includes etc.

So make sure you have a file editor that can access the files to do your personalizations

what @Vasco said, you need to use lovelace mode: yaml in configuration.yaml for !include

if you ignore !include and paste the contents it should look like this

button_card_templates:
  base:
    variables:
    ...

views:
  - type: custom:grid-layout
    ...

also go to your profile and choose “tablet” theme

Open your Home Assistant instance and show your Home Assistant user's profile.

Are you sure it’s not a cache thing?

The markdown card should be 100% width/height of the sidebar grid-area and the inside padding is the custom-layout-card-padding variable in themes

Unless something is intefering with the offset. Another theme perhaps or maybe a modified theme or wrong theme chosen?

Hi Elyisum,

I’m currently facing the same issue.
I purged my cache as Mattias suggested, however it stays the same.

The side bar text is too far left and too high up.
Also should the temperature line automatically break?

I did some poking around and here is what I’ve found. Padding of 0 seems to be inherited from #shadow-root. Here is what everything looks as it sits currently:

If I turn the padding off, it looks like (I think) like we are expecting it to.

I have found at least 8 different ways not to fix this :rofl:

Working with shadow DOM is definitely stretching the limits of my knowledge but I am eager to learn it. Any help in troubleshooting this would be greatly appreciated.

It also looks like the sidebar background isn’t being respected but that is a different issue for a different post.

Awesome work @Mattias_Persson . I am truly impressed!

After adding the cards back that I removed the complete alignement is working again :innocent:

1 Like

@Schocker @elyisum

Thanks @CarlitoDurr, I know what’s causing it

#themes
markdown-card:first-of-type = sidebar
markdown-card:last-of-type = footer

you guys removed the footer markdown from ui, so the sidebar gets BOTH the sidebar styles and corona styles

2 Likes

Awesome work Matthias! I am thinking about using some of your great animations in my own design.
However i found an issue with the button card and maybe you can help out.

So i am using one button card, inside of that button card i have put another button card in a custom field. That second nested button card then contains your animation in a custom field… :stuck_out_tongue:

              custom_fields:
                icon_closet: |
                  [[[
                    const state = entity.state === 'on' ? 'door' : 'door reverse';
                    const opacity = entity.state === 'on' ? 'room' : 'room reverse';

Problem is that “entity.state” seems to refers to my first button card and not to my nested button card that contains the entity id i would like to use. Is it possible to change the syntax so instead of refering to entity.state just use any entity_id ?

This should work

const state = states['light.hello'].state === 'on' ?...

Just spent about two hours trying to get this to work and you helped me in like 5 minutes :smiley: Whish i was better programmer. Tack !

Ah, I access some entities that way too. I’m curious, why are you putting a button card inside a button card?

Just for some experimentation. I am using the first button card as a “background/canvas” and then using custom fields to add other cards, in some cases more custom button cards. I am certain there is many ways to do it better. I guess i could just use the picture element card as the canvas or the markdown card as you have done in your design. But why make it simple :laughing:

1 Like

Hello. After fighting with the home assistant I managed to come up with what looks good. It’s amazing what you did. Very good work. Thank you so much for sharing it

Can you guide me? Thanks

I sorry for the English. I use a translator.

And that fixed it… so much to learn… :flushed:

Thank you @Mattias_Persson!

Thank you @Mattias_Persson for sharing your config with us. Since this now supports responsive rendering, I also ventured to change my previous frontend :slight_smile: I must say I like the result very much. Simple, beautiful and intuitive.

One little thing is a bit strange for me though. When I call the frontend, the clock of the sidebar is sometimes displayed large like in you Screenshots and sometimes small. No matter if I call it on the desktop or on the smartphone. Unfortunately, I have not yet found the cause. Does anyone of you also have the problem?

1 Like