Olivier, thank you very much. I had put blanks and indentation wrong.
Now I have also implemented your solution for the shutters.
Thanks again for your perfect support
1 Like
Iâve got an issue with the card_cover. It show closed, but then undefined next to it. I have very simple code below. Looking at the docs, I canât see I need to add another variable?
- type: "custom:button-card"
template: card_cover
entity: cover.garage_door
variables:
ulm_card_cover_garage_large: true
1 Like
Hi, hope youâre all doing well. Iâm trying to get started with this wonderful template but I cannot seem to get the example dashboard working as it should. As you can see below the pills in the scene card are aligned strangely and overlap with eachother. When I click/toggle them, they align correctly again (see second pill)
Iâm running everything (HA, resources) on the latest version. Iâve tried different themes, browsers, resolutions, devices but itâs all the same. Does anyone have a clue?
When everything is toggled ON it looks better:
But when everything is toggled OFF you see it all jump over the place and overlapâŠ
Hi Oliver,
can you help me again? I have two sensors, if only one of them is âopenâ, the color should be pink immediately. If both or one is âtiltedâ and possibly the second is âclosedâ, the color should be blue. I canât get the correct code programmed:
templates:
- >
[[[
if (states['sensor.bad_rechts_fenstergriff_state'].state === 'open')
or if (states['sensor.bad_links_fenstergriff_state'].state === 'open')
return 'pink_no_state';
else if (states['sensor.bad_rechts_fenstergriff_state'].state === 'tilted')
or if (states['sensor.bad_links_fenstergriff_state'].state === 'tilted')
return 'blue_no_state';
return 'grey_off'
]]]
Thank you
EDIT:
I just found the solution myself 
templates:
- >
[[[
if (states['sensor.bad_rechts_fenstergriff_state'].state === 'open')
return 'pink_no_state';
else if (states['sensor.bad_links_fenstergriff_state'].state === 'open')
return 'pink_no_state';
else if (states['sensor.bad_rechts_fenstergriff_state'].state === 'tilted')
return 'blue_no_state';
else if (states['sensor.bad_links_fenstergriff_state'].state === 'tilted')
return 'blue_no_state';
return 'grey_off'
]]]
1 Like
Did you ever work this out? Iâm getting the same problem.
Are you ready to share your code? 
It looks so great.
Fixed it. It was the color codes:
- type: vertical-stack
cards:
- card:
entity: alarm_control_panel.home_alarm
states:
- arm_home
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: rgba(var(--color-green),1) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Disarm";
color: rgba(var(--color-green),1);
position: absolute;
font-variant: small-caps;
}
#alarmCode{
display: none;
}
#keypad{
display: none !important;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Arm";
margin: 0 0 0 50%;
}
title: Alarm
type: alarm-panel
conditions:
- entity: alarm_control_panel.home_alarm
state: disarmed
type: conditional
- card:
entity: alarm_control_panel.home_alarm
states:
- arm_home
title: Alarm
type: alarm-panel
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: rgba(var(--color-red),1) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Arm";
color: rgba(var(--color-red),1)v;
position: absolute;
font-variant: small-caps;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Disarm";
margin: 0 0 0 50%;
}
'#keypad':
mwc-button:
$: |
#button{
border-radius: 12px
}
conditions:
- entity: alarm_control_panel.home_alarm
state_not: disarmed
type: conditional
is it possible to slide the 6 cards from âruimtesâ to 6 others ?
edit : trying but no victory
this is my code:
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: "custom:button-card"
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: "custom:button-card"
now I have 4 buttons on a row to slide, but not 2 rows with 2 buttons. What am I doing wrong ?
Is it possible to use templates in the yaml parameters? It doesnât seem to be working. This doesnât color the icon for example:
- type: "custom:button-card"
template: chip_navigate
variables:
ulm_chip_navigate_path: security
ulm_chip_navigate_icon: mdi:shield
ulm_chip_navigate_icon_color: >
{% if is_state("alarm_control_panel.alarm_name", "disarmed") %}
var(--google-green)
{% else %}
var(--google-red)
{% endif %}
I could set up a template sensor and then use the states['sensor.template_sensor'].state syntax which does work. Is that the best way?
Hi,
did you manage to fix this?
Regards
I didnât. I still have the issue.
This is a bug. See Cover Card Percentage Always Visible · Issue #1188 · UI-Lovelace-Minimalist/UI · GitHub
1 Like
How can I make a popup weather card by pressing a chip ? Is it with tap_action ?
Where can I find the fontsize and colour so I can make the apexcharttitle the same as the minimal font ?
Bonjour,
Jâaimerai convertir ma carte mushroom pour quâelle soit compatible ui minimalist pouvez-vous mâaidez ?
Merci
voici une photo de la carte Ă convertir et son code
type: custom:stack-in-card
keep:
margin: true
box_shadow: true
background: true
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Chauffage maison
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #000000;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.chauffage_1
header: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 2px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.chauffage_1
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: true
step: row
control:
hvac:
'off':
name: 'Off'
heat:
name: Heat
cool:
name: Cool
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: '{{ states(entity) | round|int }} °c'
secondary: Intérieur
icon: mdi:thermometer
entity: sensor.openweathermap_forecast_temperature
icon_color: blue
badge_icon: |-
{% set temp = states(entity) | int %}
{% set setpoint = states('sensor.thermostat_setpoint') | int %}
{% if temp == setpoint %} mdi:check-bold
{% elif temp <= 60 %} mdi:snowflake
{% elif temp >= 80 %} mdi:heat-wave
{% else %}
{% endif %}
badge_color: |-
{% set temp = states(entity) | int %}
{% set setpoint = states('sensor.thermostat_setpoint') | int %}
{% if temp == setpoint %} green
{% elif temp <= 60 %} blue
{% elif temp >= 80 %} deep-orange
{% else %}
{% endif %}
picture: ''
- type: custom:mushroom-template-card
primary: '{{ states(entity) | round|int }} °c'
secondary: Extérieur
icon: mdi:thermometer
entity: sensor.openweathermap_forecast_temperature
icon_color: green
badge_icon: |-
{% set outside_temp = states(entity) | int %}
{% set inside_temp = states('sensor.thermostat_temperature') | int %}
{% if outside_temp == inside_temp %} mdi:equal
{% elif outside_temp <= 32 %} mdi:snowflake
{% elif outside_temp >= 90 %} mdi:heat-wave
{% else %}
{% endif %}
badge_color: |-
{% set outside_temp = states(entity) | int %}
{% set inside_temp = states('sensor.thermostat_temperature') | int %}
{% if outside_temp == inside_temp %} green
{% elif outside_temp <= 32 %} blue
{% elif outside_temp >= 90 %} deep-orange
{% else %}
{% endif %}
picture: ''
layout:
mode:
headings: false
icons: true
names: true
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan:
auto:
name: Auto
icon: mdi:fan-auto
'on':
name: 'On'
icon: mdi:fan
- type: custom:mini-graph-card
entities:
- entity: sensor.openweathermap_forecast_temperature
name: Température intérieur
color: '#2196f3'
- entity: sensor.openweathermap_forecast_temperature
name: Température extérieur
color: '#4caf50'
hours_to_show: 24
line_width: 3
font_size: 75
animate: true
show:
name: false
icon: true
state: true
legend: true
fill: fade
1 Like
- type: 'custom:button-card'
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_entity: sensor.p1_meter_5c2faf04a1f2_active_power
ulm_chip_mdi_icon_state_icon: mdi:lightning-bolt-circle
styles:
icon_color: |-
{% set state = states('sensor.p1_meter_5c2faf04a1f2_active_power') %}
{% if is_number(state) and (state | float < 1 and state | float > 0) %}
Green
{% elif is_number(state) and state | float < 0 %}
Blue
{% else %}
Red
{% endif %}
tap_action:
!include zonnepanelen.yaml
I want a colour change of the icon depending on the value ⊠but i get a black icon 
Minimalist is not like Mushroom where you can have Jinja-templating. Also it is based on custom:button-card which will need JavaScript templating.
- type: 'custom:button-card'
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_entity: sensor.p1_meter_5c2faf04a1f2_active_power
ulm_chip_mdi_icon_state_icon: mdi:lightning-bolt-circle
styles:
icon:
- color: >
[[[
let state = states('sensor.p1_meter_5c2faf04a1f2_active_power').state
if(parseFloat(state) < 1 && parseFloat(state) > 0 ){
return 'green' }
else if(parseFloat(state) < 0){
return 'blue' }
return 'red'
]]]
tap_action:
!include zonnepanelen.yaml