šŸŒ» Lovelace UI ā€¢ Minimalist

Just had an update and I can also download and add custom cards again :slight_smile:

On that note I was wondering if someone could tell me how to add a custom background image?

I updated to the new version and suddenly it is missing lots of cards for instance card_esh_welcome. How can I fix this?

Reading the comment above. The folder custom cards is still filled.

HI all

i have a ui lovelace page for my climate winter/summer environmental . I have two specific cards, one for winter use and other card for summer user . I would like only one of these cards is visible at a time in function of season entity .

I am using visiblity + condition but with lovelace ui minimla dosenā€™t work for me.

This is my code :


title: "Climate"
icon: mdi:home-thermometer-outline
path: "climate"
type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
  grid-gap: 2px 2px
  grid-template-rows: "auto"
  grid-template-columns: "33% 33% 33%"
  grid-template-areas: >
    "title1 title1 title1"  
    "title2 title2 title2"
    "card_clima_inverno card_clima_generale card_temperature"
    "card_clima_estate card_clima_generale card_temperature"
    ". card_clima_generale card_temperature"
  mediaquery:
    # Mobile
    "(max-width: 800px)":
      grid-gap: 2px 2px
      grid-template-columns: "50% 50%"
      grid-template-rows: auto
      grid-template-areas: |
        "title1 title3"
        "card_clima_inverno  card_clima_inverno"
        "card_clima_estate card_clima_estate"
        "card_clima_generale card_clima_generale"        
        "card_temperature card_temperature"

################  back button ##############
cards:
  - view_layout:
      grid-area: "title1"
    type: "custom:button-card"
    template: chip_back
    variables:
      ulm_chip_back_path: /ui-lovelace-minimalist/home

  ################  seconda  riga ##############
  - view_layout:
      grid-area: "title2"
    type: "custom:button-card"
    template: "card_title"
    name: "Climate"
  ################### Card CLIMA Inverno ########################
  - view_layout:
      grid-area: "card_clima_inverno"
    square: false
    type: grid
    cards:
      - type: entities
        entities:
          - type: custom:stack-in-card
            keep:
              margin: false
              box_shadow: false
              background: false
            cards:
              - type: thermostat
                entity: climate.salone
                show_current_as_primary: true
                features:
                  - style: icons
                    type: climate-hvac-modes
                    hvac_modes:
                      - auto
                      - heat
                      - 'off'
                  - type: climate-preset-modes
                    style: dropdown
                theme: minimalist-desktop
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-template-card
                    icon: >-
                      {% set mode = states('climate.splitter_salone', 'hvac_modes')
                      %}

                      {% if mode == 'off' %}

                      mdi:sofa-outline

                      {% elif mode == 'cool' %}

                      mdi:fire

                      {% else %}

                      mdi:sofa-outline

                      {% endif %}
                    entity: input_boolean.splitter_heat_salone
                    icon_color: >-
                      {% set status = states('input_boolean.splitter_heat_salone')
                      %}

                      {% if status == 'on' %}

                      blue

                      {% else %}

                      grey

                      {% endif %}
                    primary: Salone
                    layout: vertical
                    fill_container: false
                    name: Salone
                    tap_action:
                      action: more-info
                    badge_icon: >-
                      {% set portellone_state =
                      is_state('binary_sensor.portellone_salone_contact', 'on') %}
                      {% set balcone_state =
                      is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %}
                      {% if not portellone_state and not balcone_state %}
                        mdi:window-closed-variant
                      {% else %}
                        mdi:window-open-variant
                      {% endif %}
                    badge_color: >-
                      {% set portellone_state = 

                      is_state('binary_sensor.portellone_salone_contact', 'on') %}
                      {%

                      set balcone_state =

                      is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %}

                      {% if not portellone_state and not balcone_state %}
                        green
                      {% else %}
                        red
                      {% endif %}
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {
                            width: 56px !important;
                            height: 36px !important;
                          }
                        .: |
                          ha-card {    
                            background: none;
                            box-shadow: none;
                          }
                          :host {
                            --mush-icon-border-radius: 10px;
                            --mush-icon-size: 50px;
                          }
                  - type: custom:mushroom-template-card
                    icon: >-
                      {% set mode = states('climate.termostato_bagno', 'hvac_modes')
                      %}

                      {% if mode == 'off' %}

                      mdi:human-female-female

                      {% elif mode == 'heat' %}

                      mdi:fire

                      {% else %}

                      mdi:human-female-female

                      {% endif %}
                    entity: input_boolean.splitter_heat_bagno
                    icon_color: |-
                      {% set status = states('input_boolean.splitter_heat_bagno') %}
                      {% if status == 'on' %}
                      blue
                      {% else %}
                      grey
                      {% endif %}
                    primary: Bagno
                    layout: vertical
                    fill_container: false
                    tap_action:
                      action: more-info
                    badge_icon: |-
                      {% if is_state('binary_sensor.bagno_contact', 'on') %}
                        mdi:window-open-variant
                      {% else %}
                        mdi:window-closed-variant
                      {% endif %}
                    badge_color: |-
                      {% if is_state('binary_sensor.bagno_contact', 'off') %}
                        green
                      {% else %}
                        red
                      {% endif %}
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {
                            width: 56px !important;
                            height: 36px !important;
                          }
                        .: |
                          ha-card {    
                            background: none;
                            box-shadow: none;
                          }
                          :host {
                            --mush-icon-border-radius: 10px;
                            --mush-icon-size: 50px;
                          }
                  - type: custom:mushroom-template-card
                    icon: >-
                      {% set mode = states('climate.splitter_camera_letto',
                      'hvac_modes') %}

                      {% if mode == 'off' %}

                      mdi:bed-king-outline

                      {% elif mode == 'cool' %}

                      mdi:fire

                      {% else %}

                      mdi:bed-king-outline

                      {% endif %}
                    entity: input_boolean.splitter_heat_camera_letto
                    icon_color: >-
                      {% set status =
                      states('input_boolean.splitter_heat_camera_letto') %}

                      {% if status == 'on' %}

                      blue

                      {% else %}

                      grey

                      {% endif %}
                    primary: Camera Letto
                    layout: vertical
                    fill_container: false
                    tap_action:
                      action: more-info
                    badge_icon: >-
                      {% if is_state('binary_sensor.balcone_camera_letto_contact',
                      'on') %}
                        mdi:window-open-variant
                      {% else %}
                        mdi:window-closed-variant
                      {% endif %}
                    badge_color: >-
                      {% if is_state('binary_sensor.balcone_camera_letto_contact',
                      'off') %}
                        green
                      {% else %}
                        red
                      {% endif %}
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {
                            width: 56px !important;
                            height: 36px !important;
                          }
                        .: |
                          ha-card {    
                            background: none;
                            box-shadow: none;
                          }
                          :host {
                            --mush-icon-border-radius: 10px;
                            --mush-icon-size: 50px;
                          }
                  - type: custom:mushroom-template-card
                    icon: >-
                      {% set mode = states('climate.termostato_bagno_camera',
                      'hvac_modes') %}

                      {% if mode == 'off' %}

                      mdi:human-female-female

                      {% elif mode == 'heat' %}

                      mdi:fire

                      {% else %}

                      mdi:human-female-female

                      {% endif %}
                    entity: input_boolean.splitter_heat_bagno_camera
                    icon_color: >-
                      {% set status =
                      states('input_boolean.splitter_heat_bagno_camera') %}

                      {% if status == 'on' %}

                      blue

                      {% else %}

                      grey

                      {% endif %}
                    primary: B.Camera
                    layout: vertical
                    fill_container: false
                    tap_action:
                      action: more-info
                    badge_icon: >-
                      {% if is_state('binary_sensor.finestra_bagno_camera_contact',
                      'on') %}
                        mdi:window-open-variant
                      {% else %}
                        mdi:window-closed-variant
                      {% endif %}
                    badge_color: >-
                      {% if is_state('binary_sensor.finestra_bagno_camera_contact',
                      'off') %}
                        green
                      {% else %}
                        red
                      {% endif %}
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {
                            width: 56px !important;
                            height: 36px !important;
                          }
                        .: |
                          ha-card {    
                            background: none;
                            box-shadow: none;
                          }
                          :host {
                            --mush-icon-border-radius: 10px;
                            --mush-icon-size: 50px;
                          }
                  - type: custom:mushroom-template-card
                    icon: >-
                      {% set mode = states('climate.splitter_cameretta',
                      'hvac_modes') %}

                      {% if mode == 'off' %}

                      mdi:bed-king-outline

                      {% elif mode == 'cool' %}

                      mdi:fire

                      {% else %}

                      mdi:bed-king-outline

                      {% endif %}
                    entity: input_boolean.splitter_heat_cameretta
                    icon_color: >-
                      {% set status =
                      states('input_boolean.splitter_heat_cameretta') %}

                      {% if status == 'on' %}

                      blue

                      {% else %}

                      grey

                      {% endif %}
                    primary: Cameretta
                    layout: vertical
                    fill_container: false
                    tap_action:
                      action: more-info
                    badge_icon: >-
                      {% if is_state('binary_sensor.balcone_cameretta_contact',
                      'on') %}
                        mdi:window-open-variant
                      {% else %}
                        mdi:window-closed-variant
                      {% endif %}
                    badge_color: >-
                      {% if is_state('binary_sensor.balcone_cameretta_contact',
                      'off') %}
                        green
                      {% else %}
                        red
                      {% endif %}
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {
                            width: 56px !important;
                            height: 36px !important;
                          }
                        .: |
                          ha-card {    
                            background: none;
                            box-shadow: none;
                          }
                          :host {
                            --mush-icon-border-radius: 10px;
                            --mush-icon-size: 50px;
                          }
              - type: custom:bar-card
                show_icon: true
                align: split
                columns: 1
                max: 24
                decimal: 1
                positions:
                  icon: inside
                  indicator: inside
                  name: inside
                  value: inside
                unit_of_measurement: h
                severity:
                  - color: cyan
                    from: 0
                    to: 6
                  - color: green
                    from: 6
                    to: 10
                  - color: yellow
                    from: 10
                    to: 15
                  - color: orange
                    from: 15
                    to: 20
                  - color: red
                    from: 20
                    to: 24
                name: Ore Attivo
                entity_row: true
                entities:
                  - entity: sensor.time_on_elettrodomestici_3
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-radius: 0%;
                      box-shadow: none;
                      background-color: none;
                      margin-top: 0rem;
                      margin-left: 0rem;
                      margin-right: 0rem;
                      margin-bottom: 0rem;
                      }
              - type: custom:bar-card
                show_icon: true
                align: split
                columns: 1
                max: 5000
                positions:
                  icon: inside
                  indicator: inside
                  name: inside
                  value: inside
                unit_of_measurement: W
                severity:
                  - color: '#27b376'
                    from: 0
                    to: 600
                  - color: '#006f3c'
                    from: 601
                    to: 1000
                  - color: '#FFFF00'
                    from: 1001
                    to: 1500
                  - color: '#f9a73e'
                    from: 1501
                    to: 2000
                  - color: '#FF2A00'
                    from: 2001
                    to: 3000
                  - color: '#B11313'
                    from: 3001
                    to: 6000
                name: Consumo Istantaneo
                entity_row: true
                entities:
                  - entity: sensor.potenza_elettrodomestici_w_3
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 0%;
                  box-shadow: none;
                  background-color: none;
                  margin-top: 0rem;
                  margin-left: 0rem;
                  margin-right: 0rem;
                  margin-bottom: 0rem;
                  }
        show_header_toggle: false
        state_color: true
        header:
          type: picture
          image: local/foto-pkg/immagineheatingcooling.jpg
          transparent: 100%
          tap_action:
            action: none
          hold_action:
            action: none
    columns: 1
    visibility:
      - condition: or
        conditions:
          - condition: state
            entity: sensor.season
            state: winter
          - condition: state
            entity: sensor.season
            state: autumn
          - condition: state
            entity: input_boolean.cooling_manual_mode
            state: 'on'

  ################### Card CLIMA estate ########################
  - view_layout:
      grid-area: "card_clima_estate"
    square: false
    type: entities
    entities:
      - type: custom:stack-in-card
        keep:
          margin: false
          box_shadow: false
          background: false
        cards:
          - type: custom:mushroom-fan-card
            entity: fan.motore_climatizzatore
            icon_animation: true
            show_percentage_control: false
            show_oscillate_control: false
            collapsible_controls: false
            fill_container: false
            name: Climatizzatore Estate
            icon: mdi:fan
            secondary_info: state
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    --icon-symbol-size: 81px;
                    --icon-size: 100px;
                  }
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                icon: |-
                  {% set mode = states('climate.splitter_salone', 'hvac_modes') %}
                  {% if mode == 'off' %}
                  mdi:sofa-outline
                  {% elif mode == 'cool' %}
                  mdi:fire
                  {% else %}
                  mdi:sofa-outline
                  {% endif %}
                entity: input_boolean.splitter_cool_salone
                icon_color: |-
                  {% set status = states('input_boolean.splitter_cool_salone') %}
                  {% if status == 'on' %}
                  blue
                  {% else %}
                  grey
                  {% endif %}
                primary: Salone
                layout: vertical
                fill_container: false
                name: Salone
                tap_action:
                  action: more-info
                badge_icon: >-
                  {% set portellone_state =
                  is_state('binary_sensor.portellone_salone_contact', 'on') %} {%
                  set balcone_state =
                  is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %} {%
                  if not portellone_state and not balcone_state %}
                    mdi:window-closed-variant
                  {% else %}
                    mdi:window-open-variant
                  {% endif %}
                badge_color: |-
                  {% set portellone_state = 
                  is_state('binary_sensor.portellone_salone_contact', 'on') %} {%
                  set balcone_state =
                  is_state('binary_sensor.balcone_dinner_zone_contact', 'on') %}
                  {% if not portellone_state and not balcone_state %}
                    green
                  {% else %}
                    red
                  {% endif %}
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        width: 106px !important;
                        height: 36px !important;
                      }
                    .: |
                      ha-card {    
                        background: none;
                        box-shadow: none;
                      }
                      :host {
                        --mush-icon-border-radius: 10px;
                        --mush-icon-size: 50px;
                      }
              - type: custom:mushroom-template-card
                icon: >-
                  {% set mode = states('climate.splitter_camera_letto',
                  'hvac_modes') %}

                  {% if mode == 'off' %}

                  mdi:bed-king-outline

                  {% elif mode == 'cool' %}

                  mdi:fire

                  {% else %}

                  mdi:bed-king-outline

                  {% endif %}
                entity: input_boolean.splitter_cool_camera_letto
                icon_color: >-
                  {% set status = states('input_boolean.splitter_cool_camera_letto')
                  %}

                  {% if status == 'on' %}

                  blue

                  {% else %}

                  grey

                  {% endif %}
                primary: C.Letto
                layout: vertical
                fill_container: false
                tap_action:
                  action: more-info
                badge_icon: >-
                  {% if is_state('binary_sensor.balcone_camera_letto_contact', 'on')
                  %}
                    mdi:window-open-variant
                  {% else %}
                    mdi:window-closed-variant
                  {% endif %}
                badge_color: >-
                  {% if is_state('binary_sensor.balcone_camera_letto_contact',
                  'off') %}
                    green
                  {% else %}
                    red
                  {% endif %}
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        width: 106px !important;
                        height: 36px !important;
                      }
                    .: |
                      ha-card {    
                        background: var(--card-background);
                        box-shadow: none;
                      }
                      :host {
                        --mush-icon-border-radius: 10px;
                        --mush-icon-size: 50px;
                      }
              - type: custom:mushroom-template-card
                icon: >-
                  {% set mode = states('climate.splitter_cameretta', 'hvac_modes')
                  %}

                  {% if mode == 'off' %}

                  mdi:bed-king-outline

                  {% elif mode == 'cool' %}

                  mdi:fire

                  {% else %}

                  mdi:bed-king-outline

                  {% endif %}
                entity: input_boolean.splitter_cool_camereretta
                icon_color: >-
                  {% set status = states('input_boolean.splitter_cool_camereretta')
                  %}

                  {% if status == 'on' %}

                  blue

                  {% else %}

                  grey

                  {% endif %}
                primary: Cameretta
                layout: vertical
                fill_container: false
                tap_action:
                  action: more-info
                badge_icon: |-
                  {% if is_state('binary_sensor.balcone_cameretta_contact', 'on') %}
                    mdi:window-open-variant
                  {% else %}
                    mdi:window-closed-variant
                  {% endif %}
                badge_color: >-
                  {% if is_state('binary_sensor.balcone_cameretta_contact', 'off')
                  %}
                    green
                  {% else %}
                    red
                  {% endif %}
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        width: 106px !important;
                        height: 36px !important;
                      }
                    .: |
                      ha-card {    
                        background: var(--card-background);
                        box-shadow: none;
                      }
                      :host {
                        --mush-icon-border-radius: 10px;
                        --mush-icon-size: 50px;
                      }
                          
          - type: custom:bar-card
            show_icon: true
            align: split
            columns: 1
            max: 24
            decimal: 1
            positions:
              icon: inside
              indicator: inside
              name: inside
              value: inside
            unit_of_measurement: h
            severity:
              - color: cyan
                from: 0
                to: 6
              - color: green
                from: 6
                to: 10
              - color: yellow
                from: 10
                to: 15
              - color: orange
                from: 15
                to: 20
              - color: red
                from: 20
                to: 24
            name: Ore Attivo
            entity_row: true
            entities:
              - entity: sensor.time_on_elettrodomestici_3
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 0%;
                  box-shadow: none;
                  background-color: none;
                  margin-top: 0rem;
                  margin-left: 0rem;
                  margin-right: 0rem;
                  margin-bottom: 0rem;
                  }
          - type: custom:bar-card
            show_icon: true
            align: split
            columns: 1
            max: 5000
            positions:
              icon: inside
              indicator: inside
              name: inside
              value: inside
            unit_of_measurement: W
            severity:
              - color: '#27b376'
                from: 0
                to: 600
              - color: '#006f3c'
                from: 601
                to: 1000
              - color: '#FFFF00'
                from: 1001
                to: 1500
              - color: '#f9a73e'
                from: 1501
                to: 2000
              - color: '#FF2A00'
                from: 2001
                to: 3000
              - color: '#B11313'
                from: 3001
                to: 6000
            name: Consumo Istantaneo
            entity_row: true
            entities:
              - entity: sensor.potenza_elettrodomestici_w_3
        card_mod:
          style: |
            ha-card {
              --ha-card-border-radius: 0%;
              box-shadow: none;
              background-color: none;
              margin-top: 0rem;
              margin-left: 0rem;
              margin-right: 0rem;
              margin-bottom: 0rem;
              }
    show_header_toggle: false
    state_color: true
    header:
      type: picture
      image: local/foto-pkg/immagineheatingcooling.jpg
      transparent: 100%
      tap_action:
        action: none
      hold_action:
        action: none
    visibility:
      - condition: or
        conditions:
          - condition: state
            entity: sensor.season
            state: summer
          - condition: state
            entity: sensor.season
            state: spring
          - condition: state
            entity: input_boolean.cooling_manual_mode
            state: 'on'

any idea how to solve ?

Regards

Luigi`

Is it possible to set the state of a Vertical Button based on the dynamic value of a binary sensor? Iā€™m wanting to do something like:

- type: "custom:button-card"
  template: card_vertical_button
  entity: input_button.some_input_button
  variables:
    ulm_card_vertical_button_state: {{ states('binary_sensor.some_sensor') }}

If this is possible, what is the correct syntax to evaluate the state of the entity for ulm_card_vertical_button_state and pass it to the template?

NOOOOO Frenck rightly so closed that issue and it is NOT being removed (THANK GOD)

Did you figure this out? My theme file also resets after a restart

Hi @darrendavid

Do you have more information on this? What would you like to achieve with it?
For example, I use it to control the icon and its color of vertical button card

If the door is closed, the icon is green. If the door is open, the icon changes and turns red

image
image

      - type: "custom:button-card"
        template: custom_card_vertical_button
        entity: binary_sensor.tursensor_balkon_contact
        name: BalkontĆ¼r
        icon: mdi:door-sliding-open
        show_last_changed: true
        card_mod:
          style: |
            ha-card {
              {% if is_state('binary_sensor.tursensor_balkon_contact', 'off') %}
              --card-mod-icon-color: green
              {%else%}
              --card-mod-icon-color: red
              {%endif%}
            }
            :host {
              {% if is_state('binary_sensor.tursensor_balkon_contact', 'off') %}
              --card-mod-icon: mdi:door-sliding
              {%else%}
              --card-mod-icon: mdi:door-sliding-open
              {%endif%}
            }

Hi guys.
I have a big trouble with my popup.
It doesnt fit the card.

icon: phu:weather-page-alt
icon_color: brown
primary: Meteo
secondary: ''
layout: vertical
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: METEO e TEMPERATURE
      content:
        type: vertical-stack
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:weather-card
                entity: weather.forecast_casa
              - type: custom:mushroom-template-card
                primary: Salotto
                secondary: >-
                  šŸŒ”{{ states('sensor.temperatura_salotto') }} | šŸ’§{{
                  states('sensor.sala_umidita') }}
                icon: null
                card_mod:
                  style: |
                    ha-card {
                        z-index: 1;
                    --ha-card-border-width: 0;
                      }
              - type: custom:hourly-weather
                entity: weather.forecast_casa
                num_segments: 12
                name: Next 12 hours
              - type: custom:mini-graph-card
                entities:
                  - entity: sensor.temperatura_salotto
                    name: Temperature
                    color: '#ff33ff'
                  - entity: sensor.sala_temperatura
                    name: Humidity
                    color: '#f2bdf2'
                    y_axis: secondary
                height: 50
                hours_to_show: 24
                line_width: 3
                font_size: 50
                animate: true
                show:
                  name: false
                  icon: false
                  state: false
                  legend: true
                  fill: fade
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Camera da Letto
                secondary: >-
                  šŸŒ”{{ states('sensor.purificatore_temperature') }} | šŸ’§{{
                  states('sensor.purificatore_humidity') }}
                icon: null
                card_mod:
                  style: |
                    ha-card {
                    z-index: 1;
                    --ha-card-border-width: 0;
                        }
              - type: custom:mini-graph-card
                entities:
                  - entity: sensor.purificatore_temperature
                    name: Temperature
                    color: '#298a20'
                  - entity: sensor.purificatore_humidity
                    name: Humidity
                    color: '#d3f043'
                    y_axis: secondary
                height: 50
                hours_to_show: 24
                line_width: 3
                font_size: 50
                animate: true
                show:
                  name: false
                  icon: false
                  state: false
                  legend: true
                  fill: fade
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Esterno
                secondary: >-
                  šŸŒ”{{ states('sensor.esterno_temperatura') }} | šŸ’§{{
                  states('sensor.esterno_umidita') }}
                icon: null
                card_mod:
                  style: |
                    ha-card {
                    z-index: 1;
                    --ha-card-border-width: 0;
                    }
              - type: custom:mini-graph-card
                entities:
                  - entity: sensor.esterno_temperatura
                    name: Temperature
                    color: '#61c5ff'
                  - entity: sensor.esterno_umidita
                    name: Humidity
                    color: '#e7ff61'
                    y_axis: secondary
                height: 50
                hours_to_show: 24
                line_width: 3
                font_size: 50
                animate: true
                show:
                  name: false
                  icon: false
                  state: false
                  legend: true
                  fill: fade
                card_mod:
                  style:
                    mushroom-shape-icon$: >
                      ha-icon:before {

                      content: "";

                      position: absolute;
                        width: 40%;
                      height: 30%;

                      margin: 6%;

                      animation: refresh 300ms linear infinite;

                      }

                      @keyframes refresh { 

                      0% { background: linear-gradient(180deg, rgba(var(--rgb-{{
                      config.icon_color }}), 0.2) 0%, transparent 50%,
                      transparent 100%); }
                        25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
                      50% { background: linear-gradient(180deg, transparent 0%,
                      rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%,
                      transparent 100%); }
                        75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
                      100% { background: linear-gradient(180deg, transparent 0%,
                      transparent 50%, rgba(var(--rgb-{{ config.icon_color }}),
                      0.2) 100%); }
                        }
entity: weather.forecast_casa

I am using UI-Minimalist that currently has the home page looking like this. Note the circled line:

it either says what is showin in the photo or ā€œMailbox not opened todayā€ or ā€œMailbox top opened today atā€¦ā€ (this is reset at 12:01 every day by HA to ā€œMailbox Not Opened Todayā€.).

It is just using door sensors on the top and bottom mailbox doors. Often when wallking into or out of the home, I just check the mailbox - and if there is nothing there, then it says it was opened of course. (When walking by, why check my phone!?)

That encircled piece of text is actually a navigation chip as I need it to be tiny.

So here is my issue. If I have opened the mailbox and there was no mail, Iā€™d like to change the message somehow - by double-tapping on the chip (or a TINY one next to it) to change itā€™s text to something else (maybe ā€œMailbox indicator resetā€) - or possibly just open and close the mailbox door in rapid succession twice to have HA reset the message (?).

I am having trouble making the chip change to a ā€œresetā€ message when I tap or double-tap on it - I donā€™t think it has that functionality available in the configuration for the chip to call a script on a double-tap?

Ideally I would like to be able to change that text two ways - by double tapping on it OR by doing something at the mailbox - which would be idealā€¦ I think I can work through code for the mailbox opening and closing 2 or 3 times in rapid suscesion - but if I forget Iā€™d like to do it on my phone right on that same UI as well (if I am not near the mailbox and doing it later)ā€¦?

(Unless someone can point me to a very inexpensive infrared beam setup to put within the mailbox that would say mail is is actually present or not instead of relying upon the doors? Maybe a presence sesnor on the surface where an object would lie?)

Added later:

(I am starting to lean towards a more sophisticated solution that will only tell me mail is in the mailbox if there really is something in the mailbox. This would require 1. ir or 2. ultraviolet or 3. a very sensitive weight sensor - and the entire thing needs to use very little power (batteries) and still be able to talk to HAā€¦)

Thoughts?

hi andy can i have the values of colors green ( rgba example 255.555ā€¦ )

tks a lot

sure 128, 201, 148

1 Like

Hi guys,
Iā€™m kinda new to all this but Im getting an issue with the ā€œdefault cardsā€ . I have button-card & UI Minimalist installed, however I get the below error when using a template.

image

When I try to add the line at the start of my dashboard, Im assuming to ā€œcallā€ the tempaltes ie.
button_card_templates: !include_dir_merge_named ā€œā€¦/ā€¦/custom_components/ui_lovelace_minimalist/ui_minimalist/ulm_templates/ā€

I get this error
image

As I said bit of a newbie in learning how to put these things altogether, but this is driving me a lil mad.

Im using HAos as a VM, if that makes any difference.

Got this sorted, not a fan of double posting but just in case others come up against this issue.
Its to do ā€œI thinkā€ with trying to create the dashboard in UI mode when it needs to be configured in pure .yaml. So I just used a text editor and edited the default minimilaist Dashboard.

Good evening everyone,

does someone have the frigate card implemented in their minimalist view?

This is the code I use for the card, but is only says custom element doesnā€™t exist: frigate.card

    - type: custom:frigate-card
      cameras:
        - camera_entity: camera.eingang_generisch
          live_provider: ha
          title: Eingang
          icon: mdi:cctv
          hide: false
      view:
        default: live
        dark_mode: auto
        update_force: true
        scan:
          enabled: true
        update_cycle_camera: true
      menu:
        style: hidden
        position: left
        buttons:
          frigate: {}
          substreams:
            enabled: true
          media_player:
            enabled: false
      live:
        preload: true
        show_image_during_load: true
      media_gallery:
        controls:
          thumbnails:
            show_details: false
          filter: {}
      image: {}
      timeline:
        style: ribbon
      view_layout:
        grid-area: camera1

Hi. I have 2 questions.
First, I wonder if I need to install ā€œSimple_weather_cardā€ for using minimalist weather card? If ā€œSimple_weather_cardā€ is not installed i see next error

But in file explorer i can see file simple-weather-card.js in /config/custom_components/ui_lovelace_minimalist/cards/simple-weather-card
Am I missing something?

And second one. Why on screenshot I provided all cards have grey border?

Hey guys,

How do I change the Dashboard name?

image

If I try to change it in the integration I get an error, and it seems to kill HA and HA restarts???

Anyone had this, or know how to rename the dashboards?

Thanks guys

Hi guys a couple questions -

  1. I have an older UI-Minimalist that I have built up and built up, and I see some people try to update the dashboard in the UI. I would assume that would never work and of course I get error messages when I try to do the same. If I start fro scratch is there now some way to have that configurable in the UI (I wouold think not?)?

  2. I have a cover in ui-minialist for my garage door; is there a way to put code for a condition in place, triggered by the click, to disallow it opening, such as if it is clicked while I am not home for exacmple? I know how to do all the coding but not where or how to insert the condition. As a workaround, is there a way on the fly to hide or disable that cover in UI-minimalist depending end upon some condition (such as my location)? The only way I can think of doing this is to remove the cover and place there instead an up and down button and write the ā€˜clickā€™ condition and actions myself (which I can easily do but it is a hassle)ā€¦ Anyone have an elegant solution to this?

There is a lovelace restriction card but I do not know if it would work with UI-minimalistā€¦? Lovelace Restriction Card - Client-side Security

Hello,

I am new with HA so I created my first dashboard using this Minimalist UI, I edited some things in the theme file (/config/themes/minimalist-desktop/minimalist-desktop.yaml) however it seems like all changes made to this file will get reverted upon server reboot, is there any way how to keep these changes permanent? I did not do much changes just edited some variables and added stuff

I searched around and apparently you can override stuff in the themes file by making a custome .css file but I dont know where to start doing that.

Thank you.

Hello,
In my case, the data is located in the directory ā€œ\config\UI_Lovelace_minimalist\ui-Lovelace.yamlā€.
As far as I know, your path is a sample file and resets itself on restart.

Pleas read the Documentation to UI Lovelace:
https://ui-lovelace-minimalist.github.io/UI/setup/configuration/