A different take on designing a Lovelace UI

Mattias_Persson · August 9, 2020, 8:45pm

old custom:hui-markdown-card, needs lovelace-card-preloader, with class from themes.yaml.

          - type: custom:hui-markdown-card
            class: sidebar
            style:
              {top: 9%, left: 11.1%}
            content: >
              <span>{{ states('sensor.time') }}</span>

main picture-elements style with card-mod

      - type: picture-elements
        image: /local/background.png
        style:
          "#root > hui-markdown-card, #key1":
            $: |
              ha-card > ha-markdown {padding: 0 !important;}

          "#root > hui-markdown-card, #key2":
            $:
              "ha-card > ha-markdown":
                $: |
                  ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw; 
                  font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}

custom:hui-element placed anywhere to fix load problem

          - type: custom:hui-element
            card_type: markdown
            style: {opacity: 0}
            content: preload

reference ui-lovelace.yaml

AlexGardner · August 9, 2020, 9:11pm

Amazing, thank you so much.

caiosweet · August 10, 2020, 4:29pm

Thanks for sharing…
Mattias Persson … worse than covid!
(worse than a virus. You are contagious!)
Me too like everyone here … i’m learning basic swedish

spudje · August 12, 2020, 7:50am

So I’m getting somewhere, after quite some weeks of work. My main layout is sort of done. Tweaking of alignment will follow when I debug on my tablet. I do need to work on the pop-ups now and update some code I fear, since I started with the older code where styles became broken due to home-assistant updates.

I still have an issue with markdown cards, that give errors the first time I load the page. After a refresh all is fine. I assume it has something to do with the preload stuff. So according to Mattias’ post a few posts above, should I change the custom:hui-markdown-card to custom:hui-element & card_type: markdown? That means reworking those cards I fear? And I still see both types of these cards in Mattias’ code.

ASNNetworks · August 12, 2020, 9:33am

Yes, that’s exactly what you need to do. You should get rid of the custom:hui-markdown-card method, it’s very hacky and chances are you’ll run into issues with later HA versions.

I tried it myself and simply rewritten one by replacing custom:hui-markdown-card with:

type: 'custom:hui-element'
card_type: markdown

Strangely, I only changed one of the multiple custom:hui-markdown-card I have (to test if it works), but the errors disappeared all together of all markdowns.

Mattias_Persson · August 12, 2020, 3:44pm

No

github.com/thomasloven/lovelace-hui-element

card-mod on picture-elements to style inside a hui-element markdown card.

opened 06:52PM - 12 Jul 20 UTC

closed 07:59PM - 01 Mar 21 UTC

matt8707

I'm having issues with styling inside a hui-element markdown card. Since it work…s sporadically maybe it's a timing issue, the markdown card loads before card-mod. Would love to have you look into it when you have time. ``` title: Hemma views: - panel: true path: default_view cards: - type: picture-elements image: /local/background.png style: "#root > hui-element > hui-markdown-card": $: "ha-card > ha-markdown": $: | ha-markdown-element > p > span {font-size: 2vw; color: red;} elements: - type: custom:hui-element card_type: markdown style: {top: 50%, left: 50%, width: 20vw} content: > <span>css styled text</span> other text ``` ### Editing lovelace and updating dashboard works ![style](https://user-images.githubusercontent.com/36163594/87253894-22165100-c47f-11ea-8fe3-6085d0c234fe.png) ### Refreshing the page after that seems to only load the style sometimes ![no](https://user-images.githubusercontent.com/36163594/87253897-26db0500-c47f-11ea-8419-b7028ac25f6a.png) I'm currently using [lovelace-card-preloader](https://github.com/gadgetchnnel/lovelace-card-preloader/) which has the reverse issue. Doesn't work on first refresh after editing lovelace, but works after that so the styling is correct.

Mattias_Persson:

old custom:hui-markdown-card, needs lovelace-card-preloader, with class from themes.yaml.

          - type: custom:hui-markdown-card
            class: sidebar
            style:
              {top: 9%, left: 11.1%}
            content: >
              <span>{{ states('sensor.time') }}</span>

main picture-elements style with card-mod

      - type: picture-elements
        image: /local/background.png
        style:
          "#root > hui-markdown-card, #key1":
            $: |
              ha-card > ha-markdown {padding: 0 !important;}

          "#root > hui-markdown-card, #key2":
            $:
              "ha-card > ha-markdown":
                $: |
                  ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw; 
                  font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}

custom:hui-element placed anywhere to fix load problem

          - type: custom:hui-element
            card_type: markdown
            style: {opacity: 0}
            content: preload

reference ui-lovelace.yaml

lucibuz · August 16, 2020, 9:36am

@Mattias_Persson

Hello again,
after updating browser_mod, popups start looking different.
Is there a quick fix beside reverting browser_mode to older version?
Thanks

before

Mattias_Persson · August 16, 2020, 5:12pm

style it from themes.yaml, search mine for card-mod-more-info-yaml

lucibuz · August 17, 2020, 8:26pm

Thanks for your help.
I copied the theme from your config and remove popups style and now the browser_mod popups are looking ok.
I have an issue with the regular more info popups, they have a transparent background when I use this theme.
Can you advice where to look into fix it.

Mattias_Persson · August 19, 2020, 2:21am

Didn’t think of that, this commit should fix it

If you have a popup with multiple cards and don’t want a background

lucibuz · August 19, 2020, 4:18am

That did the trick and you are right just when are multiple screens in popup the background needs to be transparent (none).
Thanks again for your help.

DekiEE · August 20, 2020, 7:50pm

I am running into style issues and have no clue how to fix them. Can anybody give me a hint? The popup is really messed up

enong · August 21, 2020, 2:02am

me too

gabrielmiranda · August 21, 2020, 10:09am

Hello buddy! Great job!

I’m trying to play a sound when I click a button but I haven’t found much information. Could you show me the way?

spudje · August 24, 2020, 7:35pm

I’m in the final tweaking phase
Just wondering, what are these “prefix” header cards about? Can’t find any reference about them. And can I add an icon to it?

Thanks!

Mattias_Persson · August 26, 2020, 11:47am

@DekiEE You’ll have to provide more info

@gabrielmiranda Search ui-lovelace.yaml or automation.yaml for ui_sound

@spudje a-different-take-on-designing-a-lovelace-ui/162594/224

Stimo · August 26, 2020, 7:16pm

I can’t get the Popup backdrop filter to work anymore. I can’t find that they changed anything, anyone got it to work in full kiosk browser?

Mattias_Persson · August 26, 2020, 7:54pm

Stimo · August 26, 2020, 8:19pm

Thanks, @Mattias_Persson, I will take a look at card-mod then

DekiEE · August 26, 2020, 8:54pm

The popup is squeezed to the center of the screen as you see in the Screenshot. I don’t know what configuration to change. I tried to change the width but it seems like any change to the style block has any effect on the popup.