A different take on designing a Lovelace UI

Share your Projects!
2827

I’m also struggling with understanding the themes.yaml and when certain CSS is applied… I am using the light-popup-card for the hold action on my custom buttons… According to the theme, this CSS should be injected into that light-popup-card:

        light-popup-card$: |
          #popup {
            margin: -2em 0 2.5em 0;
            isolation: isolate;
            padding-bottom: 1vw;
            background-color: red;
          }

I added the background-color: red to visually show me if the CSS is being inserted or not. No change to the light-popup-card. Can someone explain how this works to me? I know the button_card_template “light” sets this up and I’m using that button_card_template but for the life of me, I don’t see this CSS being inserted.

2828

Thanks, but all credits go to Mattias! I just added some parts to his great work.

I can share the file with all code, but I have changed quite some code. So that will take you some time to check and adopt if you are already using the originil file. Are there specific parts you are interested in? Maybe I can have a look and share the relevant parts.

2829

Somebody who can help me with the pop-up cards? When clicking no new window will “pop-up”… I have no clue where to start as I just straight copied his work and “should work out the box” I guess?

And where are all the icons stored?

2830

@ henkkeumus i just want to confirm that you have “browser mod” the HACS intergration installed that is needed for the popups.

icons are in button_card_templates.yaml starting at line 1390

2831

Hey @Mattias_Persson!

Loving this new take. I’m wondering if you’ve played with a way to hide certain cards that may not scale well based on the size of the display being utilized to view the dashboard and what a good way to go about doing that may be?

Any input would be awesome.

Thanks a million,
Corey

2832

Hey Corey,
There is a way to do this with the state-switch card.

I do it like this in my other dashboard Neon Lovelace UI & Theme for tablets

     - type: custom:state-switch
        view_layout:
          grid-area: kalender
        entity: mediaquery
        states:
          '(min-width: 1100px)':
            type: custom:atomic-calendar-revive
            entities: calendar.ical_daniel_kalender
            maxDaysToShow: 100
            maxEventCount: 4
            disableEventLink: true
            disableLocationLink: true
            showRelativeTime: false
            showCurrentEventLine: false
            showProgressBar: false
            showWeekDay: true
            showHiddenText: false
            dayWrapperLineColor: transparent
            dateSize: 150
            fullDayEventText: Hela dagen
            noEventsForTodayText: Inga händelser idag!
            noEventsForNextDaysText: inga händelser kommande dagar!
            card_mod:
              style: |
                ha-card {
                --ha-card-border-radius: 0px;
                background: transparent; 
                margin-top: -15px;
                margin-left: -22px;
                font-size: 12px; }  
                .hoursHTML { 
                font-weight: bold;
                background: rgb(0,0,0,0.2);
                border-radius: 5px;
                padding: 5px;
                }
                .event-left { 
                text-transform: lowercase;
                text-align: left !important;
                }
          '(min-width: 800px)':
            type: custom:atomic-calendar-revive
            entities: calendar.ical_daniel_kalender
            maxDaysToShow: 100
            maxEventCount: 4
            disableEventLink: true
            disableLocationLink: true
            showRelativeTime: false
            showCurrentEventLine: false
            showProgressBar: false
            showWeekDay: true
            showHiddenText: false
            dayWrapperLineColor: transparent
            dateSize: 150
            fullDayEventText: Hela dagen
            noEventsForTodayText: Inga händelser idag!
            noEventsForNextDaysText: inga händelser kommande dagar!
            card_mod:
              style: |
                ha-card {
                --ha-card-border-radius: 0px;
                background: transparent; 
                margin-top: -82px;
                margin-left: -22px;
                font-size: 12px; }  
                .hoursHTML { 
                font-weight: bold;
                background: rgb(0,0,0,0.2);
                border-radius: 5px;
                padding: 5px;
                }
                .event-left { 
                text-transform: lowercase;
                text-align: left !important;
                }

I guess you can also use card-mod and add
@media (max-width: 800px) { … } together with display: none but i have not tried it myself.
The extra styles field in the custom_button should also be able to to this.

2833

Hey there,
I just made an icon for some blinds, but they dont scale with the page properly. Is there any setting enable it? I didnt see any with the other svg icons
HAOS Icon Scaling

1 Like
2834

COOOOL

SO if I understand correctly, I can nest card_mod cards inside a state-switch card and use the

        states:
          '(min-width: 1100px)':

To define the max or min width where the entire state switch would be displayed?

2835

I did manage to fix this. For the people with the same problem: The problem was this part of the svg, illustrator generated

<svg id="ecd9de83-d9dc-4bcf-ae4e-56c92cf68072" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="150" height="90" viewBox="0 0 206.43 87.53">

It just needs to be like this (with different values)

<svg viewBox="0 0 206.43 87.53">
2836

well, you dont need card-mod to use min-width etc in the state switch card. That is a feature of the card itself.

if you dont would like to use the state-state swtich card i think you can do about the same thing with card mod using the css and min-width/max-width. But i have not tried that myself but i should be possible, look in matthias theme file for some inspiration, he does exactly that.

If you use the custom:button-card you can do it like this:

type: custom:button-card
extra_styles: |
  @media screen and (max-width: 1200px) {
    #card {
      display: none; } 
  }

this card is only shown if the screen is at minimum 1200px in width.

1 Like
2837
2838

If it’s just on/off light you could use the base template instead of light

2839

Hi, friend. Making the changes you put for this month I find this error that I can’t recognize.
Secret apexcharts_tibber not defined
Search all files and can’t find apexcharts_tibber
What to refer to?

Thanks

2840
2841

Forgiveness. I looked elsewhere and couldn’t find it. Thank you very much for continuing to share your changes.

2842

Hello. The card is personalized and therefore the appearance is different. The image in my case was inside the card with a margin and the blur appears above. For that I touch some attributes but I can’t make the blur have rounded edges at the bottom. @Mattias_Persson , can you think of something I can play?
Thank you very much

Sin título

    custom_fields:
      blur:
        - z-index: 1
        - left: -3px
        - top: 15px
        - width: 100%
        - position: absolute
        - border-radius: 25px
        - background-color: rgba(0, 0, 0, 0.2)
        - backdrop-filter: blur(0.4em)
        - -webkit-backdrop-filter: blur(0.4em)
      overlayx:
        - left: 0%
        - width: 100%
        - position: absolute
        - background-color: rgba(255, 255, 255, 0.8)
      media_image:
        - top: -1%
        - left: -1%
        - width: 103%
        - height: 101%
        - position: absolute
        - border-radius: calc(var(--custom-button-card-border-radius) / 2)
        - background-size: cover
        - background-image: >
            [[[
              return entity && variables.entity_picture
                ? `url(${entity.attributes.entity_picture})`
                : 'none';
            ]]]
2843

thanks @Mattias_Persson, no wonder i couldnt find where they got added.
love the work you have done so far keep it up.

1 Like
2845

@Mattias_Persson, can I ask for help on this question of mine?

I would like to have this sensor changing the icon color according to its percentage…
0% remains green and 5% to 100% red.

I already had it working, but it was dependent on a sensor in its “on” state. But I didn’t want to be dependent on that sensor because I don’t have it anymore.

                  - type: custom:button-card
                    entity: sensor.gas_sensor_tuyasns_gas
                    name: '% Gás'
                    tap_action:
                      !include lovelace_ui/another_ui_tablet/popup/segurança_gas_smoke.yaml
                    template:
                      - base
                      - icon_gas_1
                      - loader

  icon_gas_1:
    styles:
      custom_fields:
        icon:
          - width: 92%
          - margin-left: -14%
          - margin-top: -1%
    custom_fields:
      icon: >
        [[[
          const style = `
            <style>
              .on {
                animation: on 1s;
                transform-origin: -100% 46%;
                animation-fill-mode: forwards;
              }
              .off {
                animation: off 1s;
                transform-origin: -100% 46%;
                animation-fill-mode: forwards;
              }
            </style>
          `;       
          const path = `
            <path fill="#2fae81" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
            <path fill="#67c7a5" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
            <path fill="#a1ecd1" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
            <path fill="#a1ecd1" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
            <path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
            <path fill="#263238" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
          `;
          if (variables.state === 'on' && variables.timeout < 2000) {
            return `
              <svg viewBox="0 0 14 14"> ${style}
                <path fill="#ea3836" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
                <path fill="#fa584e" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
                <path fill="#ea3836" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
                <path fill="#ea3836" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
                <path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
                <path fill="#ea3836" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
              </svg>
            `;
          }
          if (variables.state === 'on' && variables.timeout > 2000) {
            return `
              <svg viewBox="0 0 14 14"> ${style}
                <path fill="#ea3836" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
                <path fill="#fa584e" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
                <path fill="#ea3836" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
                <path fill="#ea3836" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
                <path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
                <path fill="#ea3836" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
              </svg>
            `;
          }
          if (variables.state === 'off' && variables.timeout < 2000) {
            return `
              <svg viewBox="0 0 14 14"> ${style}
                <path fill="#2fae81" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
                <path fill="#67c7a5" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
                <path fill="#a1ecd1" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
                <path fill="#a1ecd1" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
                <path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
                <path fill="#263238" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
              </svg>
            `;
          } else {
            return `
              <svg viewBox="0 0 14 14"> ${style} 
                ${path}
              </svg>
            `;
          }
        ]]]

image

Thank you

2846 
if (parseFloat(entity.state) >= 0 && parseFloat(entity.state) < 5) {
  green svg
} else {
  red svg
}
1 Like
2847

overlayx etc are the old config, you have to add the new changes

1 Like