When you press the Play button from the control keys, the television turns on. But it doesn’t do anything else.
I wanted to use this but that didn’t work either.
https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_media_player/
Thank you so much for this theme 
I love it, and how easy it is to make it look really good in my opinion.
I’d like to share some screenshots from my set up. Work in progress but used daily by both me and my GF.
The room cards indicates if any light is on in the area. Looking forward to the new room cards under development too 
1 Like
I’m working on some irrigation cards, but i want they looked like klogg interface. I’m also work with irrigation unlimited
How can I get the temperature cards to these dimensions?
My cards are horizontal and long.
Also, how do you group your cards together with titles?
I’ve been adding a ‘blank’ card to get empty spaces.
- type: "custom:button-card"
color_type: blank-card
2 Likes
Hi all. No one will tell you if the problem with the slider on mobile devices was solved?
Not exactly sure what the problem you’re talking about is. But you can not slide your fingers on the dimmer sliders, you have to “click” with the finger at a position so it’s hard to get to 100%.
Sorry, but this issue is related to the slider-card from this bundle. https://github.com/AnthonMS/my-cards/issues/6. The dev from that repo has to approve a fix. This is not under the control of the devs who are working on this theme.
Please be aware that we only provide a design based package with use of different custom_cards whivh the devs do not maintain by themselves.
1 Like
I’m using horizontal stack with edge template;
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: whatever temp sensor / card you want
- type: whatever temp sensor / card you want
- type: custom:button-card
template: edge
1 Like
@irmajavi. - I’ve been searching this entire thread for door lock cards.
Any chance that you could share your template used and front end code?
Hello,
Strugling with start with UI Lovelace Minimalis. Why my cards is not even close looking to this ?
All i am getting is this:
You need to change your theme for your user to “minimalist-desktop” or “minimalist-mobile”. Click on your username bottom left and then scroll to “theme”. It’s all in the setup instructions.
Hey guys,
what am I missing here?
Have put them in the proper location as per the doco and can see that they have copied themselves over after reloading.
I don’t know what it’s missing here?
template:
- “ulm_custom_card_damix48_power_details_language_variables”
Thanks
Thank you, that’s what i was missing
Hi, the custom_cards are supposed to go in the ui_lovelace_minimalist folder which is located directly in your config folder
config
└── ui_lovelace_minimalist
├── config
├── custom_cards
| ├── custom_card_1
| | ├── custom_card_1.yaml
| | └── EN.yaml
| └── custom_card_2
| ├── custom_card_2.yaml
| └── EN.yaml
└── dashboard
For now you can find the correct instructions on this page: Configuration - UI Lovelace Minimalist
PS: You are not supposed to change anything in custom_components/ui_lovelace_minimalist/. All these changes can en will be overridden with an update 
1 Like
Hi Guys,
I have installed the UI via HACS, but i am getting the following error and can’t seem to fix it.
Why in my setup there is a space between welcome and scenes ? Using your code with custom:layout-card
1 Like
Thanks mate, appreciate that!
That’s exactly how it is set up, but do understand with trying to help a lot of people, you only look at the screen shots and can miss things. I do the same thing all the time LOL
It was just that power card that wasn’t working, but with a restart seems to have fixed it. Not sure why it needed one, but there you go.
Again, thanks for taking the time to respond
Can you guys see how this is slightly misaligned? I cant work out why.
Its not a big deal, but can anyone see anything wrong with this?
- title: Appliances
icon: phu:rooms-laundry-room
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Washing Machine
- type: 'custom:button-card'
template: card_generic
entity: counter.washing_machine_detergent
- type: 'custom:button-card'
template: card_generic
entity: input_select.washing_machine_status
- type: "custom:button-card"
template: custom_card_damix48_power_details
variables:
ulm_card_power_details_name: Washing Machine Power
ulm_card_power_details_entity: sensor.washing_machine_power
ulm_card_power_details_hours: 730
ulm_card_power_details_24hour: true
ulm_card_power_details_thresholds:
- value: 0
color: "#43A047"
- value: 2500
color: "#FFA600"
- value: 3000
color: "#DB4437"
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Dishwasher
- type: 'custom:button-card'
template: card_generic
entity: counter.dishwasher_tablets
- type: 'custom:button-card'
template: card_generic
entity: input_select.dishwasher_status
- type: "custom:button-card"
template: custom_card_damix48_power_details
variables:
ulm_card_power_details_name: Dishwasher Power
ulm_card_power_details_entity: sensor.dishwasher_power
ulm_card_power_details_hours: 730
ulm_card_power_details_24hour: true
ulm_card_power_details_thresholds:
- value: 0
color: "#43A047"
- value: 2500
color: "#FFA600"
- value: 3000
color: "#DB4437"
1 Like
Trys this template
card_welcome_scenes:
variables:
ulm_weather: "[[[ return variables.ulm_weather]]]"
color_pill_1: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
color_pill_2: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
color_pill_3: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
color_pill_4: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
color_pill_5: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
template:
- "ulm_language_variables"
show_icon: false
show_name: false
show_label: true
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3' 'item4'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "0px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "10px"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "card_topbar_welcome"
variables:
ulm_weather: "[[[ return variables.ulm_weather]]]"
styles:
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "4px"
- margin-left: "relative"
item2:
card:
type: "custom:button-card"
show_icon: false
show_label: false
show_name: true
show_entity_picture: false
name: |
[[[
let time = states[variables.ulm_time].state;
let welcome = '';
if (time > '18:00'){
welcome = variables.ulm_evening;
} else if (time > '12:00'){
welcome = variables.ulm_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_morning;
} else {
welcome = variables.ulm_hello;
}
return welcome + ', ' + ' <br>' + user.name + '!';
]]]
styles:
name:
- align-self: "start"
- justify-self: "start"
- font-weight: "bold"
- font-size: "24px"
- margin-left: "16px"
grid:
- grid-template-areas: "'i n' 'i l'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "min-content min-content"
- text-align: "start"
card:
- box-shadow: "none"
- padding-bottom: "8px"
item3:
card:
type: "custom:button-card"
show_icon: true
show_label: true
show_name: true
show_entity_picture: false
name: "Scènes"
icon: "mdi:dots-vertical"
styles:
icon:
- height: "20px"
- filter: "opacity(50%)"
name:
- align-self: "start"
- justify-self: "start"
- font-weight: "bold"
- font-size: "18px"
- margin-left: "16px"
grid:
- grid-template-areas: "'n i'"
- grid-template-columns: "6fr 1fr"
- grid-template-rows: "min-content min-content"
- text-align: "start"
card:
- box-shadow: "none"
- padding-bottom: "0px"
- bottom: "10px"
item4:
card:
type: "custom:button-card"
template: >
[[[
if(variables.entity_pill_1 && variables.entity_pill_2 && variables.entity_pill_3 && variables.entity_pill_4 && variables.entity_pill_5){
return 'card_scenes_welcome'
} else {
return 'card_scenes_welcome_auto'
}
]]]
styles:
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "4px"
variables:
icon_pill_1: "[[[ return variables.icon_pill_1]]]"
icon_pill_2: "[[[ return variables.icon_pill_2]]]"
icon_pill_3: "[[[ return variables.icon_pill_3]]]"
icon_pill_4: "[[[ return variables.icon_pill_4]]]"
icon_pill_5: "[[[ return variables.icon_pill_5]]]"
name_pill_1: "[[[ return variables.name_pill_1]]]"
name_pill_2: "[[[ return variables.name_pill_2]]]"
name_pill_3: "[[[ return variables.name_pill_3]]]"
name_pill_4: "[[[ return variables.name_pill_4]]]"
name_pill_5: "[[[ return variables.name_pill_5]]]"
entity_pill_1: "[[[ return variables.entity_pill_1]]]"
entity_pill_2: "[[[ return variables.entity_pill_2]]]"
entity_pill_3: "[[[ return variables.entity_pill_3]]]"
entity_pill_4: "[[[ return variables.entity_pill_4]]]"
entity_pill_5: "[[[ return variables.entity_pill_5]]]"
color_pill_1: "[[[ return variables.color_pill_1]]]"
color_pill_2: "[[[ return variables.color_pill_2]]]"
color_pill_3: "[[[ return variables.color_pill_3]]]"
color_pill_4: "[[[ return variables.color_pill_4]]]"
color_pill_5: "[[[ return variables.color_pill_5]]]"
card_title_welcome:
tap_action:
action: "none"
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: "rgba(0,0,0,0)"
- box-shadow: "none"
- height: "auto"
- width: "auto"
- margin-top: "-10px"
- margin-left: "16px"
- margin-bottom: "-15px"
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
name:
- justify-self: "start"
- font-weight: "bold"
- font-size: "20px"
label:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1rem"
- opacity: "0.4"
card_scenes_welcome:
show_icon: false
show_name: true
show_label: false
styles:
grid:
- grid-template-areas: "'item1 item2 item3 item4 item5'"
- grid-template-columns: "1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "min-content"
- justify-items: "center"
- column-gap: "24px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
entity: "[[[ return variables.entity_pill_1 ]]]"
icon: "[[[ return variables.icon_pill_1 ]]]"
name: "[[[ return variables.name_pill_1 ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_1}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_1}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "[[[ return variables.entity_pill_1 ]]]"
item2:
card:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
entity: "[[[ return variables.entity_pill_2 ]]]"
icon: "[[[ return variables.icon_pill_2 ]]]"
name: "[[[ return variables.name_pill_2 ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_2}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_2}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "[[[ return variables.entity_pill_2 ]]]"
item3:
card:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
entity: "[[[ return variables.entity_pill_3 ]]]"
icon: "[[[ return variables.icon_pill_3 ]]]"
name: "[[[ return variables.name_pill_3 ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_3}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_3}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "[[[ return variables.entity_pill_3 ]]]"
item4:
card:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
entity: "[[[ return variables.entity_pill_4 ]]]"
icon: "[[[ return variables.icon_pill_4 ]]]"
name: "[[[ return variables.name_pill_4 ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_4}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_4}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "[[[ return variables.entity_pill_4 ]]]"
item5:
card:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
entity: "[[[ return variables.entity_pill_5 ]]]"
icon: "[[[ return variables.icon_pill_5 ]]]"
name: "[[[ return variables.name_pill_5 ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_5}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_5}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "[[[ return variables.entity_pill_5 ]]]"
card_scenes_pill_welcome:
show_icon: true
show_label: false
show_name: true
styles:
grid:
- grid-template-areas: "'i' 'n'"
- grid-template-columns: "min-content"
- grid-template-rows: "1fr 1fr"
- row-gap: "12px"
- justify-items: "center"
- column-gap: "auto"
card:
- padding: "5px"
- border-radius: "50px"
- place-self: "center"
- width: "52px"
- height: "84px"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
icon:
- color: "[[[ return `rgba(var(--color-theme), 0.20)`;]]]"
- width: "20px"
img_cell:
- background-color: "[[[ return `rgba(var(--color-theme), 0.05)`;]]] "
- border-radius: "50%"
- width: "42px"
- height: "42px"
name:
- font-weight: "bold"
- font-size: "9.5px"
- width: "33px"
- padding-bottom: "7px"
state:
- color: "rgba(var(--color-theme),0.9)"
color: "var(--google-grey)"
card_topbar_welcome:
show_icon: false
show_name: true
show_label: false
styles:
grid:
- grid-template-areas: "'item1 item2 item3'"
- grid-template-columns: "1fr 7fr 1fr"
- grid-template-rows: "min-content"
- justify-items: "center"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
tap_action:
action: navigate
navigation_path: "/lovelace-minimalist/4"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "phu:tesla-icon"
item2:
card:
type: "custom:button-card"
tap_action:
action: navigate
navigation_path: /lovelace-minimalist/3
template: "chip_temperature_custom"
variables:
ulm_weather: "[[[ return variables.ulm_weather]]]"
item3:
card:
type: "custom:button-card"
tap_action:
action: "navigate"
navigation_path: "/config/dashboard"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
chip_temperature_custom:
template: "chips"
triggers_update: "all"
label: |
[[[
const months = ["Jan", "Feb", "Mar","Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];
let current_datetime = new Date()
if(current_datetime.getDate()== 1 || current_datetime.getDate()== 8 || current_datetime.getDate() >= 20){
var date = "ste";
} else{
var date = "de";
}
var icon = '🌡️';
if (states[variables.ulm_weather].state == 'clear-night'){
var icon = '🌙';
} else if(states[variables.ulm_weather].state == 'cloudy'){
var icon = '☁️';
} else if(states[variables.ulm_weather].state == 'exceptional'){
var icon = '🌞';
} else if(states[variables.ulm_weather].state == 'fog'){
var icon = '🌫️';
} else if(states[variables.ulm_weather].state == 'hail'){
var icon = '⛈️';
} else if(states[variables.ulm_weather].state == 'lightning'){
var icon = '⚡';
} else if(states[variables.ulm_weather].state == 'lightning-rainy'){
var icon = '⛈️';
} else if(states[variables.ulm_weather].state == 'partlycloudy'){
var icon = '⛅';
} else if(states[variables.ulm_weather].state == 'pouring'){
var icon = '🌧️';
} else if(states[variables.ulm_weather].state == 'rainy'){
var icon = '💧';
} else if(states[variables.ulm_weather].state == 'snowy'){
var icon = '❄️';
} else if(states[variables.ulm_weather].state == 'snowy-rainy'){
var icon = '🌨️';
} else if(states[variables.ulm_weather].state == 'sunny'){
var icon = '☀️';
} else if(states[variables.ulm_weather].state == 'windy'){
var icon = '🌪️';
}
let formatted_date = current_datetime.getDate() + date + " " + months[current_datetime.getMonth()] + "."
return icon + ' ' + formatted_date
]]]
card_scenes_welcome_auto:
show_icon: false
show_name: true
show_label: false
styles:
grid:
- grid-template-areas: "'item1 item2 item3 item4 item5'"
- grid-template-columns: "1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "min-content"
- justify-items: "center"
- column-gap: "24px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:auto-entities"
card:
type: "grid"
columns: 1
square: false
card_param: "cards"
sort:
count: 1
filter:
include:
- domain: "script"
options:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_1}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_1}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "this.entity_id"
item2:
card:
type: "custom:auto-entities"
card:
type: "grid"
columns: 1
square: false
card_param: "cards"
sort:
count: 1
first: 1
filter:
include:
- domain: "script"
options:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_2}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_2}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "this.entity_id"
item3:
card:
type: "custom:auto-entities"
card:
type: "grid"
columns: 1
square: false
card_param: "cards"
sort:
count: 1
first: 2
filter:
include:
- domain: "script"
options:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_3}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_3}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "this.entity_id"
item4:
card:
type: "custom:auto-entities"
card:
type: "grid"
columns: 1
square: false
card_param: "cards"
sort:
count: 1
first: 3
filter:
include:
- domain: "script"
options:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_4}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_4}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "this.entity_id"
item5:
card:
type: "custom:auto-entities"
card:
type: "grid"
columns: 1
square: false
card_param: "cards"
sort:
count: 1
first: 4
filter:
include:
- domain: "script"
options:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.color_pill_5}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.color_pill_5}), 0.20)`;]]]"
tap_action:
action: "call-service"
service: "scene.turn_on"
service_data:
entity_id: "this.entity_id"