A different take on designing a Lovelace UI

That’s what seemed to me but even with that I can’t seem to have the same interface as you…

@Mattias_Persson I am trying to remove the shadow of the pictture element itself.
This is what I have soo far:

type: picture-elements
style:
  '#root > bar-card':
    $: |
      ha-card {
        background: none;
        box-shadow: none;
      }

However it isn’t working at all.

try removing spaces #root>bar-card

card_mod:
  style:
    '#root>bar-card':

I’m still stuck here. I have removed for the moment all the errors that were in red but I still have this:

I do not know how it is that I do not have this adaptation of the cards …

1 Like

does the grid look right if you select default theme? if not you have to make sure grid-template-
columns/rows/areas are ok

I have that if I don’t use theme tablet :

the content has to match the grid so look over grid-template- columns/rows/areas at the beginning of lovelace

the sidebar is shifted up and left in my case. where should I change the position?


This shift only happens with tab and desktop mode, not in phone mode. and also with other themes, it works fine. So I tried changing the padding in the following place of the theme yaml. but it didn’t change anything.

thanks, I didn’t realize there is a markdown-card:last-of-type. after adding the footer (a dummy footer), it fixed the issue for me.

now I see one problem. In the following picture, you can see there is a scroll. not everything fits in the windows. its true for desktop and tablet. where should I change the width? button width? section width?

Hey !

How do you make for new icon ?

Because I don’t no what is it :
<path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/>

I don’t no how can I have that for my icon

Thank you

This isn’t working!
Any other ideas?

Illustrator creates the svg icons (which are just xml data files with instructions on how an icon should look)
nano, is a website which tries to make svg code as short as possible (removes unnecessary junk)
Should google how to use illustrator to draw icons, or download ready svg icons and pull them through nano

Firstly a huge thank you to Mattias for sharing his awesome work, it’s given me some great inspiration!

Has anyone run into an issue with popups not working for the hold_action on the light buttons?

The information and vacuum popups work fine from the sidebar but when I hold a light button nothing is happening. It’s driving me nuts :slight_smile:

Thank you for your efficient response

@Mattias_Persson how are you working around these issues at the moment?

I am trying to add the vacuum map as follows:

problem is token of image. it changes after some time. how can I make this dynamic? I tried the following, but didnt work.

image: >
  {{ state_attr('camera.kajer_beti_ronbot_livemap', 'entity_picture') }}

it shows no map.

Hi Mattias,

I was wondering if possible to create a button template starting from your circle template to display the temperature from a sensor.
I attached the desired button template (but instead of text “entrance” I want to display temperature)light
Regards,

You need to point it to the temperature state/attribute

- type: custom:button-card
  entity: sensor.test
  name: >
    [[[ return entity.attributes.temperature; ]]]

You can see the attribute name in dev tools

Open your Home Assistant instance and show your state developer tools.

remove the token from the url?
or add camera as entity