A different take on designing a Lovelace UI

use card mod In custom mushroom templace card

1 Like

Man. I can’t tell you how many times I searched this thread trying to find something like this. Using our widget code I was finally able to get my person cards 90% of the way there. The only item left is to somehow find a way to show the zone icon within the circle, but for now I am quite happy with the cards as they are.

image

Hi Laffer,
Do in need to download Mattias_Persson setup first to install yours?
Right now im runing Mattias config and it works.

I have try to download your config install and put all files in my setup. Its not working at all.
Do i need to make a clean install and install youre or is required to have a install from this config first.

Do you have a guide like Mattias Persson have in he´s repositorie?
Im kind of new here and im learn day by day.

Thx @Mattias_Persson for a really nice dashbord! <3

Hello, according to the settings you mentioned, it seems that only the correct translation of the switch can be changed, but the weather display is still in English

can you show your “sensor.pretty_date” ?

and get you your problem with the multilines ?

The problem is still persistent in 2023.06: when opening a popup all icons & text from the cards below are displayed over the popup. The problem is only shown on the iPad (and apperently MacBook, maybe also on iPhone?). No problems in windows / Android…

Anyone else having this issue and an idea on how to tackle it? Should I open an issue on GitHub as I’m not the only one facing this problem?

e9b496a233040c99befe653551da62b9fd6f567c_2_554x500

Hi @Emad131, I’d suggest installing Mattias’s config first and then take pieces from mine.
There are a couple of important differences to note:

  • configuration.yaml is setting lovelace mode to yaml, where as I have it set to storage
    – The main reason I’ve done this is because I’m used to having resources in the Web GUI. yaml mode means that one has to add resources with code.
lovelace:
  #mode: yaml
  mode: storage
  • packages are split up more then what I have. I prefer to have more of the yaml code in one file - just to be able to search faster.

Try copying bits and pieces - and try to read up and understand how everything is connected.
For example:

  • HA by default looks for “/config/ui-lovelace.yaml”
  • The contents of my ui-lovelace.yaml is: !include “/config/lovelace-homekitesq.yaml”
  • This points to my lovelace config which is based on Mattias’s config.
  • From there, lovelace-homekitesq.yaml is including:
    – button_card_templates: !include_dir_merge_named templates/lovelace-homekitesq/
  • …and so on.

There is also the following, which is placed in configuration.yaml:

lovelace:
  #mode: yaml
  mode: storage
  dashboards:
    lovelace-homekitesq:
      mode: yaml
      title: Homekitesq
      icon: mdi:view-dashboard-variant
      show_in_sidebar: true
      filename: lovelace-homekitesq.yaml

The filename expects the yaml file to be located under “/config”, so I’m just typing in ‘lovelace-homekitesq.yaml’ and place the yaml file in that directory. This config makes it so that ‘Homekitesq’ is found as a yaml file under Dashboards in the Web GUI.

Hope that was useful to you.

Anyone got a fix for the latest HA update that has broken popup titles?
image

1 Like

Someone already opened an issue for it on Github: Popup Title Styles Changed in 2023.6.0 · Issue #587 · thomasloven/hass-browser_mod · GitHub

2 Likes

Hi agin @Laffer !

I installed my setup ones agin with mattias config first to see all working and then installed everything bit by bit. on your config. This is how its looks… I dont know i’m doing wrong here. Can you help me?

Hey guys,

i finally managed to update the UI to the newest state. But somehow the borders in popup cards came back. I just can’t find the setting to delete them. Can somebody help me out please?
image

1 Like

this looks very good, would you share your code and maybe show more of your dashboard?

It’s only a lovelace card.

Here you go:

Feel free to reach out to me if you need further help to set it up

Not sure if I missed a bug or something, but the title of my pop-up cards is not appearing right and can’t figure out why this is happening…

image

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: AC Woonkamer
    card_mod:
  card:
    type: vertical-stack
    cards:

      - type: thermostat
        entity: climate.ac_woonkamer

It’s a known issue since 2023.06.

1 Like

Ah, thanks! I haven’t touched my dashboard for quite some time but kept on updating it… So just came to the discovery this happened. So, no real fix for it yet I see?

Thanks for your update.

2 Likes

Hello, may I ask if the section with an arrow on your air conditioning card will automatically change the title of the second grid card after sliding the card? I want to change the title of the card when sliding it, just like a media card. I don’t know how to achieve this function. If you know, can you tell me? Also, how did you keep the information at the bottom of your sidebar?

Going to feel like a moron, but where is this file located/ how can I access it? Can’t seem to find any folder called js somewhere…

js/plugin/popups.ts

I’ve editted the rest now, just need to do that last one… many thanks!