Hi Craig 
Hum, this card works well on my side.
Hi all
I work on the theme this week-en and I also looked about your feedback.
I will update the git in the week
Here is a small teaser 
7 Likes
Apologies if I have overlooked this in the github repo, but I couldnt find the chip template for an alarm:
Could you point me in the right direction?
Hi @telashton
It does not exist 
I made this illustration to give ideas for use
- Travel time
- Number of days without smoking
- Number of bikes in the nearest station
- Number of aliens in your attic
- etc …
You can get inspiration from other chips to create your own alarm template
2 Likes
Thanks @tben - I had already made one, but the alarm image in your illustration fitted the overall theme much better than the one I had chosen 
Hi @tben
Do you know if it is possible to bind a different tap action to the icon than a tap on the rest of the card?
I feel like I would have a lot of wasted space if I would add an entire extra row just to toggle the lights, like the example with extra actions.
Hi @bms
Technically it is possible of course. But not with my current template
You can create a card composed of 2 items, on one side you can use the icon template which is already available and on the other side you can display the name and status of the entity.
You can start from the card cover which already uses the principle of nested card.
Great work. Will try it.
Would like to have automatic themes enabled on my phone.
1 Like
Thx,
I’m gonna try this and post the template if the result is satisfying.
(Or a github pull request if you prefer 
)
Hi how can I place the spotify icon like the image below? is it an image or an emoji
Oops, I just realized that there is no more template to display an icon + text in a chip
I’ll add this on Github this week with the other improvements
2 Likes
Hi @tben,
I have create a pull requests with the custom folder (or addon) section as suggested by @clemalex : https://github.com/TBens/lovelace-ui-minimalist/pull/2
Feel free to approve or not.
Again, thank you for this beautiful design
1 Like
Can you just share your rough code? Maybe I can help polishing it? 
I can’t seem to get it to work with my system, I have uploaded all of the files you Lovelace.yaml first an !include, when that didn’t work, I inserted it directly into the file but still no change, any ideas why?
light card example
Did you also add icon_info_bg as template to your button-card?
template:
- icon_info_bg
- light
I did,
entity: light.omers_bedroom
name: Omer Bedroom
template:
- icon_info_bg
- light
type: custom:button-card
widget_icon_signal:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: true
show_name: false
size: 20px
icon: >
[[[
if (entity.attributes.fan_mode == 'LOW')
return 'mdi:network-strength-outline';
else if (entity.attributes.fan_mode == 'LOW_MID')
return 'mdi:network-strength-1';
else if (entity.attributes.fan_mode == 'MID')
return 'mdi:network-strength-2';
else if (entity.attributes.fan_mode == 'MID_HIGH')
return 'mdi:network-strength-3';
else if (entity.attributes.fan_mode == 'HIGH')
return 'mdi:network-strength-4';
else if (entity.attributes.fan_mode == 'NATURE')
return 'mdi:leaf';
else
return 'mdi:network-strength-2';
]]]
styles:
card:
- box-shadow: none
- padding: 0px
#- background-color: 'rgba(var(--couleur-theme),0.05)'
- background-color: transparent
- border-radius: 100%
- place-self: center
- height: 42px
- width: 42px
grid:
- grid-template-areas: '"i"'
icon:
- color: "rgba(var(--couleur-theme),0.9)"
state:
- styles:
icon:
- color: "#ffffff"
value: heat
- styles:
icon:
- color: "#ffffff"
value: dry
- styles:
icon:
- color: "#ffffff"
value: cool
- styles:
icon:
- color: "#ffffff"
value: fan_only
- styles:
icon:
- color: "#ffffff"
value: heat_cool
- styles:
icon:
- color: "#ffffff"
- display: none
card:
- display: none
value: "off"
climate_temperature_text:
#tap_action:
#action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: true
show_label: true
size: 20px
name: >
[[[
if (entity.state == 'off')
return entity.attributes.current_temperature;
else
return entity.attributes.temperature;
]]]
label: "°C"
styles:
card:
- background-color: transparent
- box-shadow: none
- padding: 0px
- place-self: center
- height: 42px
- font-size: 20px
- font-weight: bold
grid:
- grid-template-areas: '"n" "l"'
name:
- font-size: 25px
- align-self: center
label:
- font-size: 15px
- align-self: center
state:
- styles:
name:
- color: "#ffffff"
label:
- color: rgba(255,255,255,0.3)
value: heat
- styles:
name:
- color: "#ffffff"
label:
- color: rgba(255,255,255,0.3)
value: dry
- styles:
name:
- color: "#ffffff"
label:
- color: rgba(255,255,255,0.3)
value: cool
- styles:
name:
- color: "#ffffff"
label:
- color: rgba(255,255,255,0.3)
value: fan_only
- styles:
name:
- color: "#ffffff"
label:
- color: rgba(255,255,255,0.3)
value: heat_cool
widget_icon_circle_climate:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: true
show_name: false
size: 20px
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: "rgba(var(--couleur-theme),0.05)"
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
grid:
- grid-template-areas: '"i"'
icon:
- color: "rgba(var(--couleur-theme),0.9)"
state:
- value: "heat"
styles:
card:
- background-color: "#ffffff"
icon:
- color: rgba(var(--couleur-jaune),1)
- value: "dry"
styles:
card:
- background-color: "#ffffff"
icon:
- color: rgba(var(--couleur-light-yellow),1)
- value: "cool"
styles:
card:
- background-color: "#ffffff"
icon:
- color: rgba(var(--couleur-bleu),1)
- value: "fan_only"
styles:
card:
- background-color: "#ffffff"
icon:
- color: rgba(var(--couleur-grey),1)
- value: "heat_cool"
styles:
card:
- background-color: "#ffffff"
icon:
- color: rgba(var(--couleur-vert),1)
climate_text_only:
tap_action:
action: more-info
show_icon: false
label: >-
[[[
var climate_mode = entity.state;
if (climate_mode == 'heat'){
var etat = "Ανοιχτό • Ζέστη";
} else if(climate_mode == 'dry'){
var etat = "Ανοιχτό • Στεγνό";
} else if(climate_mode == 'cool'){
var etat = "Ανοιχτό • Κρύο";
} else if(climate_mode == 'fan_only'){
var etat = "Ανοιχτό • Ανεμιστήρας";
} else if(climate_mode == 'heat_cool'){
var etat = "Ανοιχτό • Ανακύκλωση";
} else {
var etat = "Κλειστό";
}
return etat ;
]]]
styles:
card:
- border-radius: 8px
- padding: 5px 0
state:
- styles:
card:
- background-color: rgba(var(--couleur-jaune),1)
img_cell:
#- background-color: rgba(var(--couleur-jaune), 0.2)
- background-color: rgba(255,255,255,0.2)
label:
- color: "#ffffff"
name:
- color: "#ffffff"
value: heat
- styles:
card:
- background-color: rgba(var(--couleur-light-yellow),1)
img_cell:
#- background-color: rgba(var(--couleur-light-yellow), 0.2)
- background-color: rgba(255,255,255,0.2)
label:
- color: "#ffffff"
name:
- color: "#ffffff"
value: dry
- styles:
card:
- background-color: rgba(var(--couleur-bleu),1)
img_cell:
#- background-color: rgba(var(--couleur-bleu), 0.2)
- background-color: rgba(255,255,255,0.2)
label:
- color: "#ffffff"
name:
- color: "#ffffff"
value: cool
- styles:
card:
- background-color: rgba(var(--couleur-grey),1)
img_cell:
#- background-color: rgba(var(--couleur-grey), 0.2)
- background-color: rgba(255,255,255,0.2)
label:
- color: "#ffffff"
name:
- color: "#ffffff"
value: fan_only
- styles:
card:
- background-color: rgba(var(--couleur-vert),1)
img_cell:
#- background-color: rgba(var(--couleur-vert), 0.2)
- background-color: rgba(255,255,255,0.2)
label:
- color: "#ffffff"
name:
- color: "#ffffff"
value: heat_cool
climate_icon_only:
#tap_action:
# action: toggle
# action: call-service
# service: script.step_hvac_mode
# service_data:
# climate_id: "[[[ return variables.entity ]]]"
show_name: false
icon: |
[[[
var climate_mode = entity.state;
var icon = 'mdi:snowflake';
if (climate_mode == 'heat'){
var icon = 'mdi:fire';
} else if(climate_mode == 'dry'){
var icon = 'mdi:water-percent';
} else if(climate_mode == 'cool'){
var icon = 'mdi:snowflake';
} else if(climate_mode == 'fan_only'){
var icon = 'mdi:fan';
} else if(climate_mode == 'heat_cool'){
var icon = 'mdi:autorenew';
} else {
var icon = 'mdi:power';
}
return icon ;
]]]
styles:
card:
- border-radius: 100%
state:
- styles:
card:
- background-color: rgba(var(--couleur-jaune),1)
icon:
#- color: rgba(var(--couleur-jaune),1)
- color: "#ffffff"
img_cell:
#- background-color: rgba(var(--couleur-jaune), 0.2)
- background-color: rgba(255,255,255,0.2)
value: heat
- styles:
card:
- background-color: rgba(var(--couleur-light-yellow),1)
icon:
#- color: rgba(var(--couleur-light-yellow),1)
- color: "#ffffff"
img_cell:
#- background-color: rgba(var(--couleur-light-yellow), 0.2)
- background-color: rgba(255,255,255,0.2)
value: dry
- styles:
card:
- background-color: rgba(var(--couleur-bleu),1)
icon:
#- color: rgba(var(--couleur-bleu),1)
- color: "#ffffff"
img_cell:
#- background-color: rgba(var(--couleur-bleu), 0.2)
- background-color: rgba(255,255,255,0.2)
value: cool
- styles:
card:
- background-color: rgba(var(--couleur-grey),1)
icon:
#- color: rgba(var(--couleur-grey),1)
- color: "#ffffff"
img_cell:
#- background-color: rgba(var(--couleur-grey), 0.2)
- background-color: rgba(255,255,255,0.2)
value: fan_only
- styles:
card:
- background-color: rgba(var(--couleur-vert),1)
icon:
#- color: rgba(var(--couleur-vert),1)
- color: "#ffffff"
img_cell:
#- background-color: rgba(var(--couleur-vert), 0.2)
- background-color: rgba(255,255,255,0.2)
value: heat_cool
- styles:
card:
- background-color: rgba(var(--couleur-theme),0.05)
icon:
- color: rgba(var(--couleur-theme),0.9)
img_cell:
- background-color: transparent
value: "off"
list_items_climate_three:
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: transparent
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 1fr 3fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
climate_buttons_with_favorite:
variables:
entity: climate.default
name: Default name
show_name: false
show_icon: false
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
# - background-color: |
# [[[variables.entity
# if (states[variables.entity].state == "heat"){
# return 'rgba(var(--couleur-jaune),1)';
# } else if (states[variables.entity].state == "dry"){
# return 'rgba(var(--couleur-light-yellow),1)';
# } else if (states[variables.entity].state == "cool"){
# return 'rgba(var(--couleur-bleu),1)';
# } else if (states[variables.entity].state == "fan_only"){
# return 'rgba(var(--couleur-grey),1)';
# } else if (states[variables.entity].state == "heat_cool"){
# return 'rgba(var(--couleur-vert),1)';
# } else {
# return 'white';
# }
# ]]]
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
state:
- value: "heat"
styles:
card:
- background-color: rgba(var(--couleur-jaune),1)
- value: "dry"
styles:
card:
- background-color: rgba(var(--couleur-light-yellow),1)
- value: "cool"
styles:
card:
- background-color: rgba(var(--couleur-bleu),1)
- value: "fan_only"
styles:
card:
- background-color: rgba(var(--couleur-grey),1)
- value: "heat_cool"
styles:
card:
- background-color: rgba(var(--couleur-vert),1)
custom_fields:
item1:
card:
template: list_items_climate_three
type: custom:button-card
custom_fields:
item1:
card:
entity: "[[[ return variables.entity ]]]"
tap_action:
action: call-service
service: script.step_hvac_mode
service_data:
climate_id: "[[[ return variables.entity ]]]"
template:
- icon_info
- climate_icon_only
type: custom:button-card
item2:
card:
entity: "[[[ return variables.entity ]]]"
name: "[[[ return variables.name ]]]"
template:
- icon_info
- climate_text_only
type: custom:button-card
item3:
card:
entity: "[[[ return variables.entity ]]]"
tap_action:
action: call-service
service: script.step_fan_mode
service_data:
climate_id: "[[[ return variables.entity ]]]"
type: custom:button-card
template: widget_icon_signal
item2:
card:
template: list_items_climate
type: custom:button-card
custom_fields:
item1:
card:
entity: "[[[ return variables.entity ]]]"
icon: mdi:minus
tap_action:
action: >
[[[
if (entity.attributes.temperature == '16')
return 'none';
else
return 'call-service';
]]]
service: script.temperature_down
service_data:
climate_id: "[[[ return variables.entity ]]]"
value: 1
type: custom:button-card
template: widget_icon_circle_climate
item2:
card:
entity: "[[[ return variables.entity ]]]"
tap_action:
action: more-info
type: custom:button-card
template: climate_temperature_text
item3:
card:
entity: "[[[ return variables.entity ]]]"
icon: mdi:plus
tap_action:
action: >
[[[
if (entity.attributes.temperature == '30')
return 'none';
else
return 'call-service';
]]]
service: script.temperature_up
service_data:
climate_id: "[[[ return variables.entity ]]]"
value: 1
type: custom:button-card
template: widget_icon_circle_climate
Here is the code for climate card template
4 Likes
Inspired on what you made, @djacid , I made my own version. I couldn’t wait… 
Throwing it in the group too.
Looks like this:
button_card_template.yaml
list_items_favorite:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item1 item2"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
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:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)' 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:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# AIRCO #
# #
########################################################################################################
airco:
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 "Off";
} else if (entity.state =='dry') {
return "Dry";
} else if (entity.state =='heat') {
return "Heat";
} else if (entity.state =='heat_cool') {
return "Auto";
} else if (entity.state =='cool') {
return "Cool";
} else if (entity.state =='fan_only') {
return "Fan";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
####################################################
# #
# AIRCO WITH BOUTONS #
# #
####################################################
airco_buttons:
variables:
entity: "climate.example"
name: ""
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- airco
type: 'custom:button-card'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'cool'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_climate_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
icon: 'mdi:plus'
tap_action:
action: call-service
service: script.increment_climate_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
scripts.yaml
increment_climate_temperature:
sequence:
- service: climate.set_temperature
data_template:
entity_id: "{{ entity_id }}"
temperature: >
{{ (state_attr(entity_id, 'temperature') | float) + (state_attr(entity_id, 'target_temp_step') | float) | float }}
decrease_climate_temperature:
sequence:
- service: climate.set_temperature
data_template:
entity_id: "{{ entity_id }}"
temperature: >
{{ (state_attr(entity_id, 'temperature') | float) - (state_attr(entity_id, 'target_temp_step') | float) | float }}
10 Likes
Hi
I took your feedbacks into account and I updated the git.
I wanted to start on a better basis and I had to rename a lot of components and variables. So there are a lot of breaking changes, I don’t know what was the method to manage it properly
What’s new ?
-
Adding the theme light/dark
-
Add light_slider component
-
Added chips_icon component
-
Use of auto-entities to list the batteries
14 Likes
this looks gooooooooooooooooooooooooood !
Thx !!
1 Like