đŸŒ» Lovelace UI ‱ Minimalist

I took CM000n’s config and adjusted it to my needs. It means I have the custom layout card (just like the one you introduced in 1.0.0), with 2, 3 or 4 columns. I set the horizontal stack of the conditional chips to fill all the columns of the given orientation and resolution, and let the conditional chips fill it justified to the left Ʊ8but this is what not happening). If I put a standard grid card in the conditional horizontal stack I already have, I fear I will have empty-filled-filled-filled for example, if the 1st conditional chip in my list is not activated (for example there are no flowers to water, as it takes the 1st place in my list (see my screenshots here: đŸŒ» Lovelace UI ‱ Minimalist - #2317 by Andras)). Or did I misunderstand your instruction?

Never mind, build a little test setup with the grid card with 8 columns and chips with 4 of those conditional.
It fills up from the right
Although it works a bit differently than the horizontal stack it still leaves some gaps.


Another thing that might work is the state switch card. This is a more advanced conditional card.
Otherwise someone needs to find a solution to trickery the CSS grids with cardmod

Thanks for your time. as weekend is coming, I think I give the state switch card a try, if I can not figure it out, I have to live with the current one and wait for the magic regarding the conditional card. Thanks again.

UPDATE: couldn’t wait until weekend :smiley: However the situation is exactly the same with the state switch card, depending of the number of chips to be displayed, N columns are created and divided into equal parts. First line is with conditional card, second is with switch card, N=3:

If I add “display : flex” to element.style of hui-horizontal-stack-card in Chrome’s developer tool, I get this (1 step closer, however I have no idea what am I doing here):

How can I permanently add this to the dashboard and how can I fix the shrinkage? Anyone can help?

You should be able to hide the whole row with the same display: none !important stuff I was doing for the chips

Could somebody help me get different icons for the buttons in the room card ? I want e.g. a different icon on the small buttons on the right when the media player is on/off.

Other question: where can I define my custom templates (not cards or chips) ?

After upgraded to the lastest version, popup light do not open (I have the old UI). I’m alone ?

There are way more changes then mentioned in the changelog it seems


To change the icon color based on entity-state I used this here:

- type: 'custom:button-card'
  template: card_generic_swap
  entity: input_select.state_trockner
  name: Trockner
  state:
    - value: "Fertig"
      styles:
        icon:
          - color: green
    - operator: default
      styles:
         icon:
          - color: red

now I have to use this code snipped:

- type: 'custom:button-card'
  template: card_generic_swap
  entity: input_select.state_trockner
  name: Trockner
  custom_fields:
    item1:
      card:
        custom_fields:
          item1:
            card:
              state:
                - value: "Fertig"
                  styles:
                    icon:
                      - color: green
                - operator: default
                  styles:
                    icon:
                      - color: red

Does anyone know a better way to change the icon-color based on the entity-state?

Hello
 my light pop up is showing up like this
 any idea how to fix it? I am using yeelight bulbs if that helps.

Hey guys,
can we add Haptics to all of the cards?
It would look like this:

  tap_action:
    haptic: light

Or maybe optionally with a variable!?

Hi @benm7 , your design was so beautifull :smiley:
I’m a little bug with state-switch which does not show me its content in my “security” page:
image

I use your code:

title: "Sécurité"
path: security
visible: false
icon: "mdi:security-home"
cards:
  - type: custom:state-switch
    entity: alarm_control_panel.alarme
    default: disarmed
    states:
      disarmed:
        type: custom:stack-in-card
        mode: vertical
        keep:
          box_shadow: true
          margin: true
          border_radius: true
          background: true
          outer_padding: true
        style: |
          ha-card {
            background-color: rgba(var(--color-green),0.7);
            border-radius: var(--border-radius);
          }
        cards:
          - type: "custom:layout-card"
            layout_type: grid
            layout:
              grid-template-columns: 24% 76%
              margin: 0px 0px 0px 0px
            cards:
              - type: custom:stack-in-card
                mode: vertical
                keep:
                  box_shadow: false
                  margin: false
                  border_radius: true
                  background: false
                  outer_padding: false
                style: |
                  ha-card {
                    background-color: rgba(var(--color-green-bg),1.0);
                    border-radius: var(--border-radius-bar);
                    box-shadow: none;
                  }
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: 'custom:button-card'
                        template: chip_back
                        variables:
                          ulm_chip_back_path: /ui-lovelace-minimalist/settings
                      - type: 'custom:button-card'
                        template: chip_navigate
                        variables:
                          ulm_chip_navigate_path: /ui-lovelace-minimalist/home
                          ulm_chip_navigate_icon: mdi:home
          - type: "custom:button-card"
            template:
              - "card_title_icon"
            name: "Security"
            variables:
              ulm_card_navigate_title: "Sécurité"
              ulm_card_navigate_icon: mdi:shield-off
              icon_color: green
              background_color: green-bg
      armed_away:
        type: custom:stack-in-card
        mode: vertical
        keep:
          box_shadow: true
          margin: true
          border_radius: true
          background: true
          outer_padding: true
        style: |
          ha-card {
            background-color: rgba(var(--color-red),0.7);
            border-radius: var(--border-radius);
          }
        cards:
          - type: "custom:layout-card"
            layout_type: grid
            layout:
              grid-template-columns: 24% 76%
              margin: 0px 0px 0px 0px
            cards:
              - type: custom:stack-in-card
                mode: vertical
                keep:
                  box_shadow: false
                  margin: false
                  border_radius: true
                  background: false
                  outer_padding: false
                style: |
                  ha-card {
                    background-color: rgba(var(--color-red-bg),1.0);
                    border-radius: var(--border-radius-bar);
                    box-shadow: none;
                  }
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: 'custom:button-card'
                        template: chip_back
                        variables:
                          ulm_chip_back_path: /ui-lovelace-minimalist/settings
                      - type: 'custom:button-card'
                        template: chip_navigate
                        variables:
                          ulm_chip_navigate_path: /ui-lovelace-minimalist/home
                          ulm_chip_navigate_icon: mdi:home
          - type: "custom:button-card"
            template:
              - "card_title_icon"
            name: "Security"
            variables:
              ulm_card_navigate_title: "Sécurité"
              ulm_card_navigate_icon: mdi:shield-lock
              icon_color: red
              background_color: red-bg
  - type: "custom:button-card"
    template: "card_title_fixed_small"
    name: "SystÚme de sécurité"

Have you the same issue?
For information I tried with different version of state-switch.

Thanks in advance for your help :wink:

Hi there!
Sorry its not entirely clear to me what the issue might be. Does it work without the state-switch? You may also have different state options for your alarm to what I have, so perhaps check the entity state options for your alarm to make sure they match.

How do i implement conditional cards or especially chips?
I do not see that info in the docs.

Thank you all for your help.

After updating to the current version I got the same problem. With 0.9 it works like a charm.

There is some progress to add names and icons to variables for all cards in the upcoming release :wink:

Have a look in the docs :wink: Binary Sensor Card - UI Lovelace Minimalist

Morning team! Feel I maybe missing something here, I use the following for my light -

    - type: "custom:button-card"
      template: card_light
      entity: light.yeelight_color_0x52e8ea7
      variables:
        ulm_card_light_enable_popup: true
        ulm_card_light_enable_slider: true
        ulm_card_light_enable_color: true
        ulm_card_light_force_background_color: true

I then hold the light name or icon for a second and release and I don’t get the swanky looking popup as per these screenshots - Light Popup - UI Lovelace Minimalist

I just get your generic actions -

Hopefully this is something really similar but any ideas?

Check your custom_actions settings. And add popup to the actions you want.
https://ui-lovelace-minimalist.github.io/UI/setup/custom_actions/

Good Morning!
Maybe someone can help me with my “popup” problems. Everything worked perfectly a while ago. Somehow all of the button-card popups stopped working.

eg.

          - type: custom:button-card
            template: card_light
            entity: light.badhauptlicht
            variables:
               ulm_card_light_enable_slider: true
               ulm_card_light_enable_color: true
               ulm_card_light_force_background_color: true
               ulm_card_light_name: Hauptlicht
               ulm_card_light_enable_popup: true
               ulm_card_light_enable_popup_tap: true

this does not show up any popup at all at the moment. It just shows the more-info dialog instead.

But this one for example works perfectly:

          - type: 'custom:button-card'
            template: chip_icon_label
            label: WiFi
            icon: mdi:wifi
            tap_action:
               action: call-service
               service: browser_mod.popup
               service_data:
                  large: false
                  hide_header: false
                  card:
                      type: picture
                      image: /local/frame.png 
                      show_state: false
                      show_name: false
                  title: Scannen zum Verbinden

I have a few more popups that show up “original” Home Assistant Cards, that work perfectly. It just seems that all of the button-card popups from the Minimalist Integration just simply stopped working. Of coure everything (Minimalist, Browser Mod, HomeAssistant itself) is up to date.

Appreciate your help!

1 Like

See the post directly above yours to find a fix :wink:

Double popup posts :stuck_out_tongue: I do have mine set to popup in the above yaml, but sometimes it will do nothing and sometimes it will do the above :confused: No major one really can still live without but always nice to have the snazzy looking things eh!