🌻 Lovelace UI • Minimalist

[mariusvdwerff (Marius van der Werff)]

Just a little question, is there a way to activate a scene or automation by a button?

I would like to activate a scene or automation turning all the lights off.

Thanks

[SildeHoop]

Create an pr and I will also take a look at your code, it is easier for people to help there.

[Minh]

I’m facing the exact same issue as you, with nest as the thermostat. Probably have to proceed with some workaround to mark the thermostat for now, but hopefully I get to finish all the setup to further dive in to debug this issue.

I noticed having the same problem with another custom card (customcard_tpx01_aircodition), so for now the suspect is most likely as @http_edo13 suggest (we might missed some icon templates somewhere). Just for information, do you mind sharing the current frontend integrations you are having @http_edo13 & @micdejo ? For me currently I have:

• button-card
• mini media player
• mini-graph-card
• card-mod
• my cards bundle

[micdejo (Michiel)]

I have tried a few things but wasn’t able to get it to work. If i’m correct the “custom_card_httpedo13_thermostat” is based of of the “custom_card_tpx01_aircondition”. Therefore, the problem occurs for both of the cards. I don’t know what is causing the problem though. For now i’m using the “custom_card_mpse_thermostat” which works fine.

[http_edo13]

yes, my card is based on tpx01 air condition. This is my entire configuration code:

---
custom_card_httpedo13_thermostat:
  template:
    - "ulm_language_variables"
    - "custom_card_httpedo13_thermostat_language_variables"
  tap_action:
    action: "toggle"
  icon: |
    [[[
        if (entity.attributes.hvac_action == 'heating') {
          return "mdi:radiator";
        }
        return "mdi:radiator-off";
    ]]]
  label: >-
    [[[
        if (entity.state =='off') {
          return variables.custom_card_httpedo13_thermostat_off;
        } else if (entity.state =='heat') {
          return variables.custom_card_httpedo13_thermostat_on;
        } else if (entity.attributes.hvac_action == 'heating') {
          return variables.custom_card_httpedo13_thermostat_heating;
        }
        return entity.state;
    ]]]
  state:
    - operator: "template"
      value: >
        [[[
          return entity.state != 'off';
        ]]]
      styles:
        label:
          - color: |
              [[[
                if (entity.attributes.hvac_action == 'heating'){
                  return "var(--card-background-color)";
                }
                return "rgba(var(--color-theme),0.9)";
              ]]]
        name:
          - font-weight: "bold"
          - color: |
              [[[
                if (entity.attributes.hvac_action == 'heating'){
                  return "var(--card-background-color)";
                }
                return "rgba(var(--color-theme),0.9)";
              ]]]
        icon:
          - color: "rgba(var(--color-red),1)"
        img_cell:
          - background-color: |
              [[[
                if (entity.attributes.hvac_action == 'heating'){
                  return 'var(--card-background-color)';
                }
                return 'rgba(var(--color-red),0.2)';
              ]]]
        card:
          - background-color: |
              [[[
                if (entity.attributes.hvac_action == 'heating'){
                  return '#ff8100';
                }
                return 'var(--card-background-color)';
              ]]]

custom_card_httpedo13_thermostat_with_buttons:
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - background-color: |
          [[[
            if (states[variables.entity].attributes.hvac_action == 'heating'){
              return '#ff8100';
            }
            return 'var(--card-background-color)';
          ]]]
  tap_action:
    action: "call-service"
    service: "climate.set_hvac_mode"
    service_data:
      entity_id: "[[[ return variables.entity ]]]"
      hvac_mode: |
        [[[
          if (states[variables.entity].state == "off"){
            return 'heat';
          } else if (states[variables.entity].state == "heat"){
            return 'off';
          }
        ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "list_items_favorite"
        styles:
          card:
            - background-color: |
                [[[
                  if (states[variables.entity].attributes.hvac_action == 'heating'){
                    return '#ff8100';
                  }
                  return 'var(--card-background-color)';
                ]]]
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template:
                - "icon_info"
                - "custom_card_httpedo13_thermostat"
              tap_action:
                action: "call-service"
                service: "climate.set_hvac_mode"
                service_data:
                  entity_id: "[[[ return variables.entity ]]]"
                  hvac_mode: |
                    [[[
                      if (states[variables.entity].state == "off"){
                        return 'heat';
                      } else if (states[variables.entity].state == "heat"){
                        return 'off';
                      }
                    ]]]
              name: >
                [[[
                    if (variables.name == null) {
                      return variables.entity;
                    }
                    return variables.name;
                ]]]
              entity: "[[[ return variables.entity ]]]"
          item2:
            card:
              type: "custom:button-card"
              template: "widget_current_temperature"
              tap_action:
                action: "toggle"
              entity: "[[[ return variables.entity ]]]"
              icon: "mdi:temperature-celsius"
    item2:
      card:
        type: "custom:button-card"
        template: "list_3_items"
        styles:
          card:
            - background-color: |
                [[[
                  if (states[variables.entity].attributes.hvac_action == 'heating'){
                    return '#ff8100';
                  }
                  return 'var(--card-background-color)';
                ]]]
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon_for_thermostat"
              entity: "[[[ return variables.entity ]]]"
              tap_action:
                action: "call-service"
                service: "climate.set_temperature"
                service_data:
                  temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5)  ]]]"
                  entity_id: "[[[ return variables.entity ]]]"
              icon: "mdi:minus"
          item2:
            card:
              type: "custom:button-card"
              template: "widget_temperature"
              tap_action:
                action: "toggle"
              entity: "[[[ return variables.entity ]]]"
              icon: "mdi:temperature-celsius"
          item3:
            card:
              type: "custom:button-card"
              template: "widget_icon_for_thermostat"
              entity: "[[[ return variables.entity ]]]"
              tap_action:
                action: "call-service"
                service: "climate.set_temperature"
                service_data:
                  temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5)  ]]]"
                  entity_id: "[[[ return variables.entity ]]]"
              icon: "mdi:plus"


custom_card_httpedo13_thermostat_with_buttons_collapse:
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - background-color: |
          [[[
            if (states[variables.entity].attributes.hvac_action == 'heating'){
              return '#ff8100';
            }
            return 'var(--card-background-color)';
          ]]]
  tap_action:
    action: "call-service"
    service: "climate.set_hvac_mode"
    service_data:
      entity_id: "[[[ return variables.entity ]]]"
      hvac_mode: |
        [[[
          if (states[variables.entity].state == "off"){
            return 'heat';
          } else if (states[variables.entity].state == "heat"){
            return 'off';
          }
        ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "list_items_favorite"
        styles:
          card:
            - background-color: |
                [[[
                  if (states[variables.entity].attributes.hvac_action == 'heating'){
                    return '#ff8100';
                  }
                  return 'var(--card-background-color)';
                ]]]
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template:
                - "icon_info"
                - "custom_card_httpedo13_thermostat"
              tap_action:
                action: "call-service"
                service: "climate.set_hvac_mode"
                service_data:
                  entity_id: "[[[ return variables.entity ]]]"
                  hvac_mode: |
                    [[[
                      if (states[variables.entity].state == "off"){
                        return 'heat';
                      } else if (states[variables.entity].state == "heat"){
                        return 'off';
                      }
                    ]]]
              name: >
                [[[
                    if (variables.name == null) {
                      return variables.entity;
                    }
                    return variables.name;
                ]]]
              entity: "[[[ return variables.entity ]]]"
          item2:
            card:
              type: "custom:button-card"
              template: "widget_current_temperature"
              tap_action:
                action: "toggle"
              entity: "[[[ return variables.entity ]]]"
              icon: "mdi:temperature-celsius"
    item2:
      card:
        type: "conditional"
        conditions:
          - entity: "[[[ return states[variables.entity].entity_id ]]]"
            state: "heat"
        card:
          type: "custom:button-card"
          template: "list_3_items"
          styles:
            card:
              - background-color: |
                  [[[
                    if (states[variables.entity].attributes.hvac_action == 'heating'){
                      return '#ff8100';
                    }
                    return 'var(--card-background-color)';
                  ]]]
          custom_fields:
            item1:
              card:
                type: "custom:button-card"
                template: "widget_icon_for_thermostat"
                entity: "[[[ return variables.entity ]]]"
                tap_action:
                  action: "call-service"
                  service: "climate.set_temperature"
                  service_data:
                    temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5)  ]]]"
                    entity_id: "[[[ return variables.entity ]]]"
                icon: "mdi:minus"
            item2:
              card:
                type: "custom:button-card"
                template: "widget_temperature"
                tap_action:
                  action: "toggle"
                entity: "[[[ return variables.entity ]]]"
                icon: "mdi:temperature-celsius"
            item3:
              card:
                type: "custom:button-card"
                template: "widget_icon_for_thermostat"
                entity: "[[[ return variables.entity ]]]"
                tap_action:
                  action: "call-service"
                  service: "climate.set_temperature"
                  service_data:
                    temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5)  ]]]"
                    entity_id: "[[[ return variables.entity ]]]"
                icon: "mdi:plus"


widget_current_temperature:
  color: "var(--google-grey-500)"
  show_icon: false
  show_name: false
  show_label: true
  size: "20px"
  label: |-
    [[[
        var temperature = entity.attributes.current_temperature;
        if (temperature == null) {
          var temperature = '-';
        }
        return temperature + '°C'
    ]]]
  styles:
    label:
      - font-weight: "bold"
      - color: |
          [[[
            if (entity.attributes.hvac_action == 'heating'){
              return 'var(--card-background-color)';
            }
            return 'rgb(var(--color-theme),0.9)';
          ]]]
    grid:
      - grid-template-areas: "'l'"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "14px"
      - place-self: "center"
      - height: "42px"
      - background-color: |
          [[[
            if (entity.attributes.hvac_action == 'heating'){
              return '#ff8100';
            }
            return 'var(--card-background-color)';
          ]]]

widget_temperature:
  color: "var(--google-grey-500)"
  show_icon: false
  show_name: false
  show_label: true
  size: "20px"
  label: |-
    [[[
        var temperature = entity.attributes.temperature;
        if (temperature == null) {
          var temperature = '-';
        }
        return temperature + '°C'
    ]]]
  styles:
    label:
      - color: |
          [[[
            if (entity.attributes.hvac_action == 'heating'){
              return 'var(--card-background-color)';
            }
            return 'rgb(var(--color-theme),0.9)';
          ]]]
    grid:
      - grid-template-areas: "'l'"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "14px"
      - place-self: "center"
      - height: "42px"
      - background-color: |
          [[[
            if (entity.attributes.hvac_action == 'heating'){
              return '#ff8100';
            }
            return 'var(--card-background-color)';
          ]]]

widget_icon_for_thermostat:
  tap_action:
    action: "toggle"
  show_icon: true
  show_name: false
  styles:
    grid:
      - grid-template-areas: "'i'"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - background-color: |
          [[[
            if (entity.attributes.hvac_action == 'heating'){
              return 'var(--card-background-color)';
            }
            return 'rgba(var(--color-theme),0.05)';
          ]]]
      - border-radius: "14px"
      - place-self: "center"
      - height: "42px"
    icon:
      - color: "rgba(var(--color-theme),0.9)"
  size: "20px"
  color: "var(--google-grey)"

list_items_favorite:
  styles:
    grid:
      - grid-template-areas: "'item1 item1 item2'"
      - grid-template-columns: "1fr 1fr 1fr"
      - grid-template-rows: "min-content"
      - column-gap: "7px"
    card:
      - box-shadow: "none"
      - padding: "0px"

icon_info:
  color: var(--google-grey)
  show_icon: true
  show_label: true
  show_name: true
  state:
    - styles:
        custom_fields:
          notification:
            - border-radius: 50%
            - position: absolute
            - left: 24px
            - top: -2px
            - height: 16px
            - width: 16px
            - border: 2px solid var(--card-background-color)
            - font-size: 12px
            - line-height: 14px
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]
      value: unavailable
  styles:
    icon:
      - color: 'rgba(var(--color-theme),0.2)'
    label:
      - justify-self: start
      - align-self: start
      - font-weight: bolder
      - font-size: 12px
      - filter: opacity(40%)
      - margin-left: 12px
    name:
      - align-self: end
      - justify-self: start
      - font-weight: bold
      - font-size: 14px
      - margin-left: 12px
    state:
      - justify-self: start
      - align-self: start
      - font-weight: bolder
      - font-size: 12px
      - filter: opacity(40%)
      - margin-left: 12px
    img_cell:
      - background-color: 'rgba(var(--color-theme),0.05)'
      - border-radius: 50%
      - place-self: center
      - width: 42px
      - height: 42px
    grid:
      - grid-template-areas: '"i n" "i l"'
      - grid-template-columns: min-content auto
      - grid-template-rows: min-content min-content
    card:
      - border-radius: 21px 8px 8px 21px
      - box-shadow: none
      - padding: 0px
      # - background-color: 'rgba(var(--color-theme),0)'
  custom_fields:
    notification: >
      [[[
        if (entity.state =='unavailable'){
          return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
        }
      ]]]
  size: 20px

[janoschbatschi]

Hey guys, this is the first theme I’m trying and I really love how easy it is to implement and how it looks like! Thx to @CM000n for sharing your config! But I’m facing a strange issue regarding some CSS styles not being applied when using SSL or opening it locally on a tablet.

In the first pic everything is fine - opened in a browser via HTTP://local-ip. But when is access the same page using the same browser but HTTPS://xxx.duckdns.org or if I open the page locally on a tablet, some CSS styles are missing in the 2nd picture (e.g. border-radius is not defined)

Does anyone have an idea what the problem could be?

[magicbenny]

Just my2cent for this “theme”:

i rly like it…but…as for now it needs to be heavily maintained and a lot of effort to implement it into the system. also I have the feeling that it slows down a bit the entire frontend. but this is only a feeling. I rly respect the effort you all put into it and it’s often easy to say “why can’t I simply click on ´install`and everything is fine?”. I think if this will come to a greater audience it needs to get much easier to install and maintain.

during the last days I found an error in the code generator…solution was adding 2 tabs on a single line. ok, fine for me. I am a technical based project manager for a big company and I like to find solutions by myself. I am rly looking forward on your efforts in making this a fully HACS compatible “Theme”. but I am curious when it comes to upgrading/changing the style of integration, manually vs. hacs. but hey, challenge accepted because this theme is rly so minimalistic that it is pretty much close to perfection

i am still missing a lot of things but I am as stupid as possible so that I am not able to program this on my own or to support in any case of programming. as for now I am still maintaining 2 versions of dashboard. one with HA based cards heavily based on the grid card as a fall back if something went wrong and the “minimalistic” version. a lot of work but hopefully some day there will be only one to maintain

thank you all for your effort!

cheers,
ben

[Juve_A]

Already sorted. Turns out I could use the entity.state.

I’ve created a pull request with the code as well.

Thanks

[CM000n (Simon)]

Yes, the integration into HACS will probably be a big big breaking change in many places.
Some things will be made easier, but others will not.
At the moment we can’t and don’t want to offer a 1 click solution like dwain or HKI.
Most of the people who have contributed so far are tinkerers themselves and make their contribution because they enjoy it and can learn something new. Nothing more and nothing less.

So let’s just see what else the future brings.

[CM000n (Simon)]

Maybe your Theme is just not applied, when you Open it from another device? Seems like it is using the standard theme.
Theme Settings in Home Assistant are per Device.
Please have a look in your Settings.

[magicbenny]

Hi again,

has anybody a good idea for a lock card or already realized it?

cheers,
ben

[RaA11]

Hi,

I want to use the Minimalist button card templates with the standard UI.
I don’t know where to put the “button_card_templates.yaml” and how to include it in the lovelace UI.

can someone please guide me ?

Thank You

[pedolsky]

Installation UI mode

[pmarco094 (Marco)]

Hello erverybody,

has anybody an idea why my popups not working?
I have done everything as described:

• browser_mod is installed and added to the .yaml
• All Addons added like in the README_popups.md on github described

When I press a button, it turns dark gray as if trying to open the menu, but nothing happens.

This is my Code for the light button (exactly the same as on the manual):

                  - type: "custom:button-card"
                    template:
                      - card_light
                      - popup_light
                    entity: light.terrasse_grillbeleuchtung

Thank you

[Akira]

So I followed the docs and like how it’s much easier to work with yaml files than I thought by following the guide, I wonder how do I position cards where I want them though, along with making it into 2 columns instead of 3 as it seems too narrow both on PC and on a tablet.

I have also tried using the template ‘vertical_buttons’ but can’t put tap_action on it as I did with ‘card_script’

[LeoSM_07]

You can put all of your cards into 2 vertical stacks although this solution won’t carry over across all all devices. For more control I recommend taking a look at lovelace-layout-card.

I’m not sure about the vertical_buttons so maybe someone else can help you out with that. Hopefully this helps!

[madir]

looks promising!
I am myself looking to make almost exactly the same card. I have been messing around with no results.

Could you also make a same card for thermostat with at the bottom (off, auto, heat, boost)!?
would highly appreciate it. Thanks.

[janoschbatschi]

Oh man, thx - this was the issue. I feel kinda dumb Thank you for your work

[guims78 (guims)]

Hello, i just discovered this fantastic UI and i’m trying to personalize it.
I have a little issue making a custom template.

I’d like to change colors and/or icons
For exemple for a card_input_boolean
here is my code.

custom_card_input_boolean_heat:
  template: card_input_boolean
  name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]"
  label: >
    [[[
      if (entity.state != 'unavailable'){
        if (entity.state == 'on'){
          return variables.ulm_on;
        } else {
          return variables.ulm_off;
        }
      } else {
        return variables.ulm_unavailable;
      }
    ]]]
  state:
    - styles:
        icon:
          - color: 'rgba(var(--color-darkorange),1)'
        label:
          - color: 'rgba(var(--color-darkorange-text),1)'
        name:
          - color: 'rgba(var(--color-darkorange-text),1)'
        img_cell:
          - background-color: 'rgba(var(--color-darkorange), 0.2)'
        card:
          - background-color: 'rgba(var(--color-background-darkorange), var(--opacity-bg))'
      value: 'on'

where am i wrong ???

[Xupastar]

You can take a Look at @CM000n config / github. There is a nice solution to place cards with the grid Layout.