Skip to content

Customizing

When you have finished the installation process succesfully it's time to start customizing your dashboard. You can find your ui-minimalist-lovelace file here:

config
└── ui_lovelace_minimalist
    ├── custom_cards
    └── dashboard
        └── ui-lovelace.yaml

It should look like this:

ui-lovelace.yaml
---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
background: "var(--background-image)"
# views: !include_dir_merge_list "views/"
views:
  - title: "Example View"
    path: 0
    icon: "mdi:flower"
    cards:
      - type: "vertical-stack"
        cards:
          - type: "custom:button-card"
            template: "card_title"
            name: "Congrats with your installation 🎉"
            label: "Explore some of the wonderful 'Minimalistic-UI' cards we offer here"
          - type: "custom:auto-entities"
            card:
              type: "grid"
              columns: 1
              square: false
            card_param: "cards"
            sort:
              count: 1
            filter:
              include:
                - domain: "weather"
                  options:
                    type: "custom:button-card"
                    template: "card_welcome_scenes"
                    variables:
                      ulm_weather: "this.entity_id"
          - type: "custom:button-card"
            template: "card_title"
            name: "[[[ hass.resources[hass['language']]['ui.panel.lovelace.editor.card.light.name'] ]]]"
            label: "This is the Minimalist-light-card"
          - type: "custom:auto-entities"
            card:
              type: "grid"
              columns: 2
              square: false
            card_param: "cards"
            sort:
              count: 4
            filter:
              include:
                - domain: "light"
                  options:
                    type: "custom:button-card"
                    template: "card_light"
                    variables:
                      ulm_card_light_enable_slider: true
                      ulm_card_light_enable_color: true
                      ulm_card_light_enable_popup: true
          - type: "custom:button-card"
            template: "card_title"
            name: "Binary Sensors"
            label: "This is the Minimalist-binary_sensor-card"
          - type: "custom:auto-entities"
            card:
              type: "grid"
              columns: 2
              square: false
            card_param: "cards"
            sort:
              count: 4
            filter:
              include:
                - domain: "binary_sensor"
                  options:
                    type: "custom:button-card"
                    template: "card_binary_sensor_alert"
                    variables:
                      - ulm_card_binary_sensor_alert: true
          - type: "custom:button-card"
            template: "card_title"
            name: "[[[ hass.resources[hass['language']]['ui.panel.lovelace.editor.card.sensor.name'] ]]]"
            label: "This is the Minimalist-sensor-card"
          - type: "custom:auto-entities"
            card:
              type: "grid"
              columns: 2
              square: false
            card_param: "cards"
            sort:
              count: 4
            filter:
              include:
                - domain: "sensor"
                  options:
                    type: "custom:button-card"
                    template: "card_generic"
          - type: "custom:button-card"
            template: "card_title"
            name: "[[[ hass.resources[hass['language']]['ui.dialogs.entity_registry.editor.device_classes.binary_sensor.battery'] ]]]"
            label: "This is the Minimalist-battery-card"
          - type: "custom:auto-entities"
            card:
              type: "grid"
              columns: 2
              square: false
            card_param: "cards"
            sort:
              count: 4
            filter:
              include:
                - attributes:
                    unit_of_measurement: "%"
                    device_class: "battery"
                  options:
                    type: "custom:button-card"
                    template: "card_battery"
                    variables:
                      ulm_card_battery_battery_state_entity_id: "this.entity_id"
                      ulm_card_battery_battery_level_danger: 30
                      ulm_card_battery_battery_level_warning: 80

How to customize the dashboard

You can customize your dashboard like any other YAML-based lovelace dashboard.

UI-mode is not yet supported

So first let add some cards. These can be found on the Wiki. As an example we will add the card_light and card_vacuum next to each other with help of a horizontal-stack. Please read carefully the wiki-page of each of the cards to understand their specific variables.

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
background: "var(--background-image)"
# views: !include_dir_merge_list "views/"
views:
  - title: "Example View"
    path: 0
    icon: "mdi:flower"
    cards:
      - type: "horizontal-stack"
        cards:
          - type: "custom:button-card"
            template: card_light
            entity: light.living_room
            variables:
              ulm_card_light_enable_slider: true
              ulm_card_light_enable_color: true
          - type: "custom:button-card"
            template: "card_vacuum"
            entity: "vacuum.roborock_s5"

The path: in the example above is also the path name used in navigation_path:

Add extra views (tabs)

All views/tabs are created as list items underneath:

views:

Make sure you set at least parameters for title, path and icon for each view

views:
  - title: "Main"
    path: 0
    icon: "mdi:flower"
    cards:
      - type: "custom:button-card"
            template: card_light
            entity: light.living_room
            variables:
              ulm_card_light_enable_slider: true
              ulm_card_light_enable_color: true
  - title: "Lights"
    path: lights
    icon: "mdi:lightbulb"
    cards:
      - type: "custom:button-card"
            template: card_light
            entity: light.living_room
            variables:
              ulm_card_light_enable_slider: true
              ulm_card_light_enable_color: true

Add multiple dashboards

After you have build your first dashboard with UI-Minimalist it's time to build multiple dashboards. If you would to be able to adjust non-UI-Minimalist with the UI-mode it's best to work with storage mode. For the first dashboard we did all the configuration for you. To add a second one you need to take a few steps.

Add another ui-lovelace.yaml to your dashboard folder:

config
└── ui_lovelace_minimalist
    ├── custom_cards
    └── dashboard
        └── ui-lovelace.yaml
        └── ui-lovelace_2.yaml

Add a reference to it in configuration.yaml:

lovelace:
  mode: storage
  # Add yaml dashboards
  dashboards:
    lovelace-minimalist-2:
      mode: yaml
      title: Minimalist 2
      icon: mdi:flower
      show_in_sidebar: true
      filename: ui_lovelace_minimalist/dashboard/ui-lovelace_2.yaml

You don't need to add the first dashboard which is installed with the integration

As mentioned on the configuration page you need to add a line of code to load in all Minimalist card templates.
The start of each new dashboard file should therefore, look like this:

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "My new dashboard"
theme: "minimalist-desktop"
background: "var(--background-image)"
# views: !include_dir_merge_list "views/"
views: