Le travail de 7ahang est Ă©norme mais le tien est tout autant @Clemalex.
Jâai un problĂšme avec la carte alarme. Quand je clique sur le bouton activer rien ne se passe par contre ça fonctionne bien pour le dĂ©sactiver. Encore un grand merci pour ton travail.
PS: ce nâest pas bien de mettre en premier le code de ta derniĂšre carte sur le forum anglophone 
1 « J'aime »
Câest que je partage en premier avec lâauteur du thĂšme car câest lui qui a tout fait 
Le bouton Activer est le bouton arm_home. Quand tu cliques dessus ton alarme ne sâactive pas en Armer (PrĂ©sent) ?
Encore un petite carte :
button_card_templates:
card_line_4_actions:
variables:
item1_icon: mdi:numeric-1-circle
item2_icon: mdi:numeric-2-circle
item3_icon: mdi:numeric-3-circle
item4_icon: mdi:numeric-4-circle
name: Default name
styles:
card:
- border-radius: 20px
- box-shadow: none
- padding: 12px
- background: transparent
grid:
- grid-template-areas: '"item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item2:
card:
template: list_items_line_4_actions
type: custom:button-card
custom_fields:
item1:
card:
icon: '[[[ return variables.item1_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "GENTLE"){
return 'white';
}else{
return 'transparent';
}
]]]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Gentle
type: custom:button-card
template:
- widget_icon_line_4_actions
item2:
card:
icon: '[[[ return variables.item2_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "SILENT"){
return 'white';
}else{
return 'transparent';
}
]]]
icon:
- transform: scale(0.75)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Silent
type: custom:button-card
template:
- widget_icon_line_4_actions
item3:
card:
icon: '[[[ return variables.item3_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "STANDARD"){
return 'white';
}else{
return 'transparent';
}
]]]
icon:
- transform: scale(1)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Standard
type: custom:button-card
template:
- widget_icon_line_4_actions
item4:
card:
icon: '[[[ return variables.item4_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "TURBO"){
return 'white';
}else{
return 'transparent';
}
]]]
icon:
- transform: scale(1.4)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Turbo
type: custom:button-card
template:
- widget_icon_line_4_actions
list_items_line_4_actions:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 21px
- pointer-events: none
- background-color: rgba(var(--couleur-gris),0.2
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
widget_icon_line_4_actions:
show_icon: true
show_name: false
size: 20px
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
- pointer-events: auto
grid:
- grid-template-areas: '"i"'
icon:
- color: rgba(var(--couleur-theme),0.9)
Jâai oubliĂ© de variabiliser la taille des icĂŽnes
Je rĂȘve du moment, oĂč en 3 clics sous HA on puisse appliquer ce thĂšme 
1 « J'aime »
@Clemalex est ce que câest normal que les 2 cartes commencent par le states?
Ce qui est bizarre, il me semble quâavant que tu reprennent les couleurs cela fonctionnait.
Pourrais tu partager ton exemple de carte?
merci
Oui câest le fonctionnement normal de la carte Alarme
Je nâai pas modifiĂ© le comportement de la carte, seulement sont style;
Si tu rencontre un problĂšme, essaye avec une carte sans modification et ajoute petit Ă petit les modifications 
Salut
Pourrais tu me montrer ta carte aspiro complÚte? car je ne sais pas comment tu as fait pour avoir les 3 boutons au dessus du réglages de ventilateur. merci
Toujours pas fait le nettoyage mais je suis partie de la carte cover.
Ce soir je posterais
Jâai trouvĂ© pourquoi la carte alarme ne fonctionnait pas. Jâavais mis un code Ă lâalarme.
Ah oui ! Le fait que je cache le code de lâalarme empĂȘche de le rentrer si tu en as mis un Ă lâactivation de lâalarme 
1 « J'aime »
Modification dâune carte postĂ© par un autre membre :
Jâai retravaillĂ© la carte pour afficher la couleur de lâampoule dans lâicone (la luminositĂ© est prise en compte Ă©galement)
Et jâai retravaillĂ© les couleurs et le style pour la faire correspondre Ă une carte prĂ©sente dans le thĂšme original
Prenez ou non
#cards
type: grid
cards:
- entity: light.salon_lampe_01
template:
- light_buttons_with_colors
type: custom:button-card
variables:
entity: light.salon_lampe_01
name: Salon
- entity: light.salon_lampe_01
template:
- light_buttons_with_colors_light
type: custom:button-card
variables:
entity: light.salon_lampe_01
name: Salon
columns: 2
square: false
#templates
button_card_templates:
list_items_light:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
light_with_colors:
tap_action:
action: toggle
hold_action:
action: more-info
label: |-
[[[ if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri + '%' : 'On') ;
}
}else{
return "Indisponible";
}
]]]
state:
- styles:
icon:
- filter: |-
[[[
var bri = entity.attributes.brightness / 2.55;
return ('brightness(' + (50+bri/2) + '%)') ;
]]]
- color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--couleur-jaune),1)'
}
]]]
img_cell:
- background-color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)'
}
else{
return 'rgba(var(--couleur-jaune),0.2)'
}
]]]
value: 'on'
light_buttons_with_colors_light:
show_name: false
show_icon: false
variables:
entity: light.default
name: LumiĂšre
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:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: '[[[ return variables.entity ]]]'
radius: 12px
height: 42px
thumbColorOff: rgba(var(--couleur-theme),0.2)
mainSliderColorOff: rgb(var(--couleur-theme),0.2)
secondarySliderColorOff: var(--google-grey-500)
mainSliderColor: rgb(var(--couleur-gris-light))
thumbColor: rgb(var(--couleur-gris-light))
secondarySliderColor: var(--google-grey-500)
card_mod:
style: |
ha-card {
border-radius: 14px;
}
div {
border: 2px solid var(--google-grey-500);
border-radius: 14px !important;
box-sizing: border-box;
position: relative;
}
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: widget_icon
light_buttons_with_colors:
show_name: false
show_icon: false
variables:
entity: light.default
name: LumiĂšre
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:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: '[[[ return variables.entity ]]]'
radius: 14px
height: 42px
mainSliderColorOff: var(--google-grey-500)
secondarySliderColor: rgba(var(--couleur-theme),0.05)
secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
thumbColorOff: white
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: widget_icon
Il reste Ă optimiser le code en combinant les templates
2 « J'aime »
Bonjour, Le créateur du thÚme Minimalist a posté sa configuration sur Github.
https://github.com/TBens/lovelace-ui-minimalist
Pas mal merci pour le partage mais, comment faire si ta un bouton pour on/off et que lâampoule est une hue ? pour avoir le slider indĂ©pendant ?
Et en plus jâai une entitĂ© en dur dans mon template ! (copier/merder)âŠ
Je comprends ta question. Je te ferais un template pour le cas.
Mais quâest-ce que ça change que ce soit une hue ou une xiaomi ou lidl ?
sa ne change rien, quand ta un bouton sonof pour lâallumer et lâampoule câest une hue les entity sont pas les mĂȘme, et puis nĂŁo me irrite
[image]
1 « J'aime »
Petite astuce pour avoir un vrai bouton retour (historique de navigation) :
Avec button-card et une automation
Template du Back Button :
button_card_templates:
return_button:
template: pilule
show_icon: true
show_name: true
icon: mdi:arrow-left
size: 80%
styles:
grid:
- grid-template-areas: '"i"'
tap_action:
action: toggle
entity: input_boolean.back
name: |
[[[
if (entity.state == 'on') {history.back() ;}
]]]
automation :
alias: Bouton Retour
description: ''
trigger:
- platform: state
entity_id: input_boolean.back
to: 'on'
condition: []
action:
- service: input_boolean.turn_off
target:
entity_id: input_boolean.back
mode: single
carte :
template: return_button
type: custom:button-card
1 « J'aime »
il ne fait que un retour vers la gauche ou il garde en mémoire par la ou tu es passer genre si tu fait
2eme onglet 4eme onglet 3 eme onglet et que tu appuis sur retour tu passe bien dans meme sens inverse ?
Si vous avez besoin de 2 boutons dans la carte alarme :
type: vertical-stack
cards:
- card:
entity: alarm_control_panel.alarme_pour_creation_de_service
states:
- arm_home
- arm_away
style:
.: |
ha-card{
margin-left: 6px;
margin-right: 6px;
}
ha-card > ha-label-badge{
--alarm-state-color: var(--google-green-500) !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: "Désactivée";
color: var(--google-green-500);
position: absolute;
font-variant: small-caps;
}
#alarmCode{
display: none;
}
#keypad{
display: none !important;
}
'#armActions':
mwc-button:nth-child(1):
$: |
#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: "Présent";
margin: 0 0 0 50%;
}
mwc-button:nth-child(2):
$: |
#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: "ABSENT";
margin: 0 0 0 50%;
}
title: Alarme
type: alarm-panel
conditions:
- entity: alarm_control_panel.alarme_pour_creation_de_service
state: disarmed
type: conditional
- card:
entity: alarm_control_panel.alarme_pour_creation_de_service
states:
- arm_home
title: Alarme
type: alarm-panel
style:
.: |
ha-card{
margin-left: 6px;
margin-right: 6px;
}
ha-card > ha-label-badge{
--alarm-state-color: var(--google-red-500) !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: "Activée";
color: var(--google-red-500);
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: "DĂ©sactiver";
margin: 0 0 0 50%;
}
'#keypad':
mwc-button:
$: |
#button{
border-radius: 12px
}
conditions:
- entity: alarm_control_panel.alarme_pour_creation_de_service
state_not: disarmed
type: conditional
1 « J'aime »
Bonjour Ă tous,
J4ai découvert votre forum grùce au post sur Minimalist sur le forum officiel de HomeAssistant.
Jâai Ă©tĂ© bluffĂ© car lâergonomie apportĂ©e par ce mod, câest tout simplement design, classe, top quoi !
Merci !
Jâai juste une question concernant les couleurs,
Quand jâutilise le script par dĂ©faut pour une lampe ou un switch, lorsque jâallume la lampe, mon icone reste Ă©teinte.
entity: light.lumi_lumi_light_aqcn02_6ba82c05_level_light_color_on_off
name: Salon
template:
- icon_info_bg
- light
type: custom:button-card
Je vois que câest le template « jaune » qui est appelĂ©
jaune:
state:
- styles:
icon:
- color: rgba(var(--couleur-jaune),1)
img_cell:
- background-color: rgba(var(--couleur-jaune), 0.2)
value: 'on'
et que pour la couleur câest cette ligne lĂ
color: rgba(var(--couleur-jaune),1)
Apparemment, dans ma configuration RGBA ne fonctionne çaâŠ
Ma question : faut-il installer un package ou faut-il faire quelque chose de particulier pour que ça fonctionne ?
Dâavance merci