Customizing
When you have finished the installation process successfully 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: