A different take on designing a Lovelace UI

[D34DC3N73R]

That’s pretty much what I did, but I set a variable in the theme as well that’s subtracted from the regular font size.

button_card_templates/extra_styles.yaml

       /* * * * * * * * * * * * * * * * * *
        *                                 *
        *              BASE               *
        *                                 *
        * * * * * * * * * * * * * * * * * */

        #container {
          text-align: left !important;
          z-index: 1;
        }

        #card {
          padding: 10.9% 9.9% 8.9% 10.9%;
        }

        #state::first-letter {
          text-transform: uppercase;
        }

        #name {
          font-size: var(--button-card-font-size);
          font-weight: var(--button-card-font-weight);
          letter-spacing: var(--button-card-letter-spacing);
        }

        #state {
          font-size: calc(var(--button-card-font-size) - var(--button-card-state-size));
          text-transform: uppercase;
          font-weight: var(--button-card-font-weight);
          letter-spacing: var(--button-card-letter-spacing);
        }

        /* portrait */
        @media screen and (max-width: 1200px) {
          #name {
            font-size: calc(var(--button-card-font-size) * var(--card-portrait));
          }
          #state {
            font-size: calc(calc(var(--button-card-font-size) - var(--button-card-state-size)) * var(--card-portrait));
          }
        }
        /* phone */
        @media screen and (max-width: 800px) {
          #name {
            font-size: calc(var(--button-card-font-size) * var(--card-phone));
          }
          #state {
            font-size: calc(calc(var(--button-card-font-size) - var(--button-card-state-size)) * var(--card-phone));
          }
        }

themes/tablet.yaml

...
  button-card-state-size: 0.3vw
...

I didn’t refine the portrait view as I don’t use it, so you may need to fine tune that if it’s something you do use.

[bra83]

I’m having problems using popups. The elements do not load inside them. They are all configured in configuration.yaml file. What could be causing this?

[Kaspermaat]

I am curious if someone has already tried this here by any chance. I would like to make the titles of all the Grid boxes clickable. This way, when I click on the respective “Living Room,” I can display all the lamps in a pop-up. Does anyone have an idea how to do this?
Thanks!

[Kaspermaat]

Why not trying it this way?

lovelace:
  mode: yaml
  resources:
    [
      { url: /hacsfiles/apexcharts-card/apexcharts-card.js,                         type: module },
      { url: /hacsfiles/bar-card/bar-card.js,                                       type: module },
      { url: /hacsfiles/button-card/button-card.js,                                 type: module },
      { url: /hacsfiles/custom-icons/custom-icons.js,                               type: module },
      { url: /hacsfiles/kiosk-mode/kiosk-mode.js,                                   type: module },
      { url: /hacsfiles/lovelace-layout-card/layout-card.js,                        type: module },
      { url: /hacsfiles/lovelace-more-info-card/more-info-card.js,                  type: module },
      { url: /hacsfiles/lovelace-mushroom/mushroom.js,                              type: module },
      { url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js,            type: module },
      { url: /hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js,  type: module },
      { url: /hacsfiles/swipe-card/swipe-card.js,                                   type: module },
      { url: /hacsfiles/tabbed-card/tabbed-card.js,                                 type: module },

[arifroni]

can anybody tell me how sensor.current_version is defined?

[D34DC3N73R]

The “Version” integration.

Version

[kkqq9320 (KKQQ)]

Thank you for your kind explanation.
Strangely it’s not working for me…
I’ll try changing the name and state to English later.
Thanks again

[D34DC3N73R]

Might be because you don’t have a unit for 0.6 in calc(var(--button-card-letter-spacing) * 0.6);? try adding a unit whether that’s % or vw etc and see if it has any effect. Otherwise, inspect that element with dev tools and see if there’s any CSS rule that has an error.

[pascal91]

Hi all,

First, thank you all for the great support.
I’m still facing the issue that the title in the pop-ups is not correct. I already replaced the browser_mod.js and browser_mod_panel.js and I tried to clear the cache in my apps. Only in chrome the title in the pop-ups is correct, but in safari or in the IOS/IpadOS application it is not correct.

Can anyone help me?

[bra83]

Hi! Mine doesnt work too. How did you fixed that?

[bra83]

Hi, Daniel. How are you?
Im trying to use your cards, but no success.
I created widgets.yalm on template folder and paste lovelace code exactly like you posted here (only changed entities).
But nothing appears in dashboard.

Can you help me?
Thanks.

[RaraKira (Martin)]

Hi there!
Loving this theme but I cannot get the media card to work properly and after a week of trying to figure this out my last option is to ask here for help.
I’m obviously new to home assistant and yaml coding but I’m willing to learn I just don’t even know what I should be looking at.

So my issue is that the media card does not show currently active device at all and i can’t get the plex card to work (it’s giving me a huge error when i try to add the sensor)
I think i need to define my entities somewhere for the conditional media to work but i can’t even figure that out.

I know this is for more advanced users but i would love to get this working somehow.

This is what i see if i add plex sensor:

[bjortte]

Sure sorry for late response.

• type: vertical-stack

    view_layout:
  
      grid-area: sidebar
  
    cards:
  
      - type: custom:button-card
  
        entity: sensor.template_sidebar
  
        template: sidebar
  
      - type: "custom:atomic-calendar-revive"
  
        entities:
  
          - entity: calendar.ene***.com
  
            name: "Kalender"
  
            color: white
  
          - entity: calendar.helgdagar_i_sverige
  
        showWeekDay: true
  
        showMonth: true
  
        showLoader: false
  
        refreshInterval: 60
  
        hideFinishedEvents: true
  
        style: |
  
          ha-card {
  
          border: none ;

[walkerjohnson]

hello! thanks for contributing!Sorry to trouble u!
There is an error occur in me.
Custom element doesn’t exit: grid-layout.
Is it according to the installation instructions that I have not installed any plugins?
Thanks！

[jeanini (Hannequin)]

Hello every one.
Is there a way to have a 8 icons sections like this?

(the red square icons)

Thanks

[bra83]

Hey, folks.
There´s a way to use templates with yaml storage mode? !include doesnt works.
If you could point me in a direction…
Thanks.

[TexasAssistant]

Jeanini,
What happens when you change the columns value of Exterieur from 2 to 4? Something like this:

      #################################################
      #                                               #
      #                   GAMEROOM                    #
      #                                               #
      #################################################

      - type: grid
        title: Gameroom
        view_layout:
          grid-area: gameroom
        columns: 2  <--- change that to 4
        cards:

[TexasAssistant]

Anyone solve for a device that keeps toggling its state value on and off while always on?? I have a TV that, when ‘Off’ properly reports ‘Off’. When it is ‘on’, it will report ‘On’ for 15 seconds and then ‘Off’ for 10 seconds, over and over and over. The whole time, the TV is on. This is not a code issue or HomeAssistant issue, this is the TV being problematic. I come to that conclusion by watching the entity state in the Developer Tools>Template area. So, I am looking for a way to tell it not to display as ‘off’ until I get at least 30 seconds of a stable-off state. Any suggestions???

[jeanini (Hannequin)]

Hi, when i change it, I have this.

I would like to keep the same size of toil as if my column was at 2.

[jeanini (Hannequin)]

Can you share your source?