What I didā¦
Create a blank new Lovelace dashboard. Use UI mode. Install Grid Card, or use vertical and horizontal card stack, and play around with the standard Home assistant cards (ie. light or button card).
Create the LAYOUT you find nice.
Then you have the WAY of sorting the buttons you desire, and from there you lift applicable code to your Minimalist UI dashboard 
Hey Noah,
Looks great with the background where did you put it in the configuration ? Can you please help to archive this ?
Thank you very much,
sven
1 Like
Has anyone implemented a layout with a sidebar and can give a hint what a good way doing it? I would like to have a sidebar with clock, date and weather info + maybe calender for my wall-mounted tablet.
thanks
Flave
Pretty much what Iām doing. Iām just looking for the code to lift. 
Hey all! Firstly I love this theme, itās aesthetic, easy to use, and honestly exactly what Iāve been looking for!
How do I modify the point_per_hour and hours_to_show when using the graph card? I tried adding it under the definition of the card (same level as type, template, and variables) and also within variables but didnāt have any luck. Do I need to create a custom template with a different amount of hours? or is the syntax slightly different since itās being called by the button-card?
And also multi coloured graphs? I have one that shows my draw from the grid, I had it green when I was feeding power and red when drawing power.
Hereās my power dashboard
and summary page
1 Like
thank you very much!
thank you very much!
Are you using UI-mode or .yaml?
If you want help to create a mockup/the frame work for something, make a hand drawn skiss, post it, and We will help you out!
2 Likes
Hey, maybe youāll get lucky with my custom graph card. Let me know if you need help adding something for your purpose.
Variables explained:
hours: hours to show (default 24)
bar: set it to true if you want a bar graph
graph_color: color of the graph (red, yellow, blue, green) dont use color codes!
custom_icon: custom mdi-icon
name: null custom name
Use
type: "custom:button-card"
template: custom_card_graph
entity: sensor.waschmaschine_verbrauch
variables:
bar: "true"
custom_icon: mdi:washing-machine
Template
custom_card_graph:
show_icon: false
show_name: false
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 0px
variables:
hours: 24
bar: false
graph_color: red
custom_icon: null
name: null
custom_fields:
item1:
card:
type: 'custom:button-card'
icon: '[[[ return variables.custom_icon ]]]'
template:
- icon_info
- card_generic
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 12px
entity: '[[[ return entity.entity_id ]]]'
name: '[[[ return variables.name == "null" ? entity.friendly_name : variables.name ]]]'
item2:
card:
type: 'custom:mini-graph-card'
entities:
- entity: '[[[ return entity.entity_id ]]]'
line_color: "[[[ return 'rgba(var(--color-' + variables.graph_color + '),1)'; ]]]"
hours_to_show: '[[[ return variables.hours ]]]'
show:
graph: '[[[ return variables.bar === "true" ? "bar" : "line"; ]]]'
name: false
icon: false
legend: false
state: false
style: |
ha-card {
box-shadow: none;
border-radius: var(--border-radius);
}
1 Like
When using the custom_card_tpx01_aircondition and trying to adjust the temperature up or down I get this:
The card works fine other than that and if I hold for more info and use the up and down arrows it works fine!
Can you please open a bug report on the UI repo in this? The Template shouldnāt use any scripts that you dont have on your system 
1 Like
I had to make my own scripts for temp up and down and just named them the same
increment_climate_temperature:
alias: increment_climate_temperature
sequence:
- service: climate.set_temperature
data_template:
entity_id: climate.vent_vsr500
temperature: '{{(state_attr(''climate.vent_vsr500'' , ''temperature'')|round(0))
+ 1 }}'
target:
entity_id: climate.vent_vsr500
mode: single
decrease_climate_temperature:
alias: decrease_climate_temperature
sequence:
- service: climate.set_temperature
data_template:
entity_id: climate.vent_vsr500
temperature: '{{(state_attr(''climate.vent_vsr500'' , ''temperature'')|round(0))
- 1 }}'
target:
entity_id: climate.vent_vsr500
mode: single
1 Like
Alright! But how do I if I have multiple ACs? Thailand is hot 
For example I have climate.ac_bedroom, climate.ac_livingroom, climate.ac_guestroom, climate.ac_office
Thanks for the help!
Probably have to do one script per maybe? And then just name them differently and change the script called in each card. Maybe there is some templating possibility that I donāt know off
How do I change the script in each card then? This is what I have now?
template: custom_card_tpx01_aircondition_with_buttons
variables:
entity: climate.ac_livingroom
name: Living room
EDIT: Oh I guess Iāll have to make a custom_card for each ACā¦
1 Like
Yes, do a custom template for each of them, where you the specific script for each room. I donāt know if thereās an easier way?
So one of these for each rooms - with different script
custom_card_tpx01_aircondition:
template:
- ulm_language_variables
- custom_card_tpx01_aircondition_language_variables
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='dry') {
return 'mdi:water';
} else if (entity.state =='heat') {
return 'mdi:radiator';
} else if (entity.state =='cool') {
return 'mdi:snowflake';
} else if (entity.state =='fan_only') {
return 'mdi:fan';
}
return 'mdi:air-conditioner';
]]]
label: >-
[[[
if (entity.state =='off') {
return variables.ulm_off;
} else if (entity.state =='dry') {
return variables.custom_card_tpx01_aircondition_dry;
} else if (entity.state =='heat') {
return variables.custom_card_tpx01_aircondition_heat;
} else if (entity.state =='heat_cool') {
return variables.custom_card_tpx01_aircondition_heat_cool;
} else if (entity.state =='cool') {
return variables.custom_card_tpx01_aircondition_cool;
} else if (entity.state =='fan_only') {
return variables.custom_card_tpx01_aircondition_fan_only;
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--color-blue),1)'
img_cell:
- background-color: 'rgba(var(--color-blue),0.2)'
custom_card_tpx01_aircondition_with_buttons:
variables:
name: null
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
custom_fields:
item1:
card:
type: custom:button-card
template: list_items_favorite
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- custom_card_tpx01_aircondition
tap_action:
action: more-info
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
entity: '[[[ return variables.entity ]]]'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
type: custom:button-card
template: widget_icon
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'cool'
icon: mdi:power
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
type: custom:button-card
template: widget_icon
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
icon: mdi:power-off
item2:
card:
type: 'custom:button-card'
template: list_items
custom_fields:
item1:
card:
type: 'custom:button-card'
template: widget_icon
tap_action:
action: call-service
service: script.decrease_climate_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
icon: 'mdi:minus'
item2:
card:
type: 'custom:button-card'
template: widget_temperature
tap_action:
action: none
entity: '[[[ return variables.entity ]]]'
icon: 'mdi:temperature-celsius'
item3:
card:
type: 'custom:button-card'
template: widget_icon
tap_action:
action: call-service
service: script.increment_climate_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
icon: 'mdi:plus'
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
widget_temperature:
tap_action:
action: toggle
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: 'rgb(var(--color-theme),0.9)'
grid:
- grid-template-areas: '"l"'
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
Or maybe if you skip the service_data in the script, you donāt have to make one for each single room - as the template includes the sercive_data allready. Iām not sure?
Thinking I might just rename the cards and then just call the correct card for each room with the script specific for the room. Might be the easiest way for me at least!
BTW. After adding the script you sent it works great in the bedroom.
Hehe,
Yeah, my knowledge of doing thing the easy way out is not too great, so I often end up doing thing more complex then they need to be
1 Like
There are several ways to insert a background image. I have solved it via the theme, so that I can define a separate image for the dark mode and the normal mode. For this I added the following entry in the file āminimalist-desktop.yamlā:
modes:
light:
background-image: center / cover no-repeat url("https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?size=626&ext=jpg") fixed
I have added the same entry to the dark mode with a different image. The last thing to do is to add the entry ābackground: var(ābackground-image)ā to the ālovelace-minimalist.yamlā. For me the file looks like this:
button_card_templates: !include_dir_merge_named minimalist-templates/
background: var(--background-image)
views:
#==========================================================================================================================
# VIEW HOME
#==========================================================================================================================
- title: Zuhause
path: home
cards:...
With this method, the background image is automatically applied to all views.
3 Likes