Honnêtement je galère sévère pour comprendre, où on doit coller le code, les fichiers yaml, les pages d’instruction en anglais etc… pourtant j’essaie xD
On va commencer par le début :
j’ai crée un tableau de bord
Je souhaite y mettre une card comme celle ci (hui-element) :
(voir video ici à 10min25sec : Lovelace Custom Card n°1 - Home Assistant TUTO FR - YouTube)
J’ai bien téléchargé le dépôt hui-element depuis HACS
C’est la que ça se complique.
Dans la video il donne le template à coller dans un fichier lovelace-xxxxx.yaml mais qui n’existe pas chez moi forcement. Il n’y a aucun fichier lovelace dans mon interface, donc j’imagine qu’il faut en créer un ? Si oui, le nom importe peu ?
Est ce que je peux coller le template ici (mais j’ignore quel est le nom de ce fichier pour le modifier via file editor par exemple) :
Ensuite il donne le code de sa carte :
du coup je crée un custom card button, je colle son code en prenant le soins de changer les champs « entity », « name » et « title » mais il y a des erreurs :
Je ne trouve aucun tuto qui explique de A à Z ce genre de manip. Il en manque toujours une partie car les youtubeurs doivent penser que le reste est déjà maitrisé… compliqué c’t’affaire.
Merci d’avance pour votre aide
Pour le moment j’en suis la avec une pile horizontale et 2 card lumieres
Hello
tu dois aligné tes lignes
Salut,
Exactement, ils ont raison les youtubers… faut maitriser un poil avant de se lancer dans les trucs custom comme ça. 
Pour ta carte qui fait des erreurs c’est une histoire d’indentations, il faut les respecter, elles ont une signification.
Les les fichiers « lovelace » ça n’existe plus, mais en gros c’est l’endroit où tu essayes de le mettre, quand tu passes en modif d’un tableau de bord et que tu choisis editieur de configuration.
Exemple code OK
Code avec mauvaise indexion le meme que le premier seul la ligne 2 que j’ai bougé
Le code
type: entities
entities:
- light.bed_light
- type: custom:hui-element
card_type: glance
entities:
- light.kitchen_lights
- light.ceiling_lights
Alors voici une code qui fonctionne
button_card_templates:
custom_button_light_active_glow:
hold_action:
action: more-info
layout: icon_label
show_label: true
show_name: true
show_state: false
state:
- styles:
card:
- '--paper-card-background-color': rgba(40, 40, 40)
- box-shadow: 0px 0px 20px 3px rgb(44, 109, 214, 0.6)
icon:
- color: var(--paper-item-icon-active-color)
label:
- color: white
name:
- color: white
state:
- color: white
value: 'on'
- styles:
label:
- color: 'rgb(44, 109, 214, 0.6)'
value: 'off'
styles:
card:
- border-radius: 15px
- height: 125px
grid:
- grid-template-rows: 30px auto 30px
- grid-column-gap: 10%
- grid-template-columns: 1fr 1fr 1fr
icon:
- align-self: end
- height: 60px
- width: 60px
label:
- align-self: end
- padding: 1px
- font-size: 15px
- font-weight: bold
- font-family: Helvetica
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
tap_action:
action: toggle
type: custom:button-card
ce qui donne ceci
la carte :
cards:
- entity: light.ampoule_entree
icon: mdi:spotlight
name: Entrée
template: custom_button_light_active_glow
type: custom:button-card
- entity: light.eclairage_cuisine
icon: mdi:lightbulb
name: Cuisine
template: custom_button_light_active_glow
type: custom:button-card
- entity: light.ampoule_centre_salon
icon: mdi:lightbulb
name: Salon
template: custom_button_light_active_glow
type: custom:button-card
type: horizontal-stack
Au besoin pour placé le Template
3 « J'aime »
Ok merci pour ta réponse complète.
Compris pour l’indentation 
Compris pour l’emplacement des templates
Et je vois même qu’on peut ajouter les cards directement a la suite du « views: »
voila ce que ca donne, maintenant il va falloir que regarde pour comprendre et customisé et mettre le glow en yellow au lieu du bleu) :
de rien,
pour la couleur glow du bleu trouve cette ligne
et modifie 44,109,217
le 0.6 à la fin c’est le contraste
en jaune
- box-shadow: 0px 0px 20px 3px rgb(255, 255, 0, 0.6)
yes merci j’ai modifié aussi sur cette ligne les « px » avant les parenthèses pour avoir ca :
Par contre, lorsque que je n’ai aucun theme, l’icone de l’ampoule eteinte est bleue, alors qu’avec un autre theme elle est blanche. y a t’il possibilité de forcer la valeur blanche ?
Color par defaut du theme de HA , c’est pour tout le monde pareil
1 « J'aime »
Oui, en rajoutant la ligne color: white.
exemple:
- type: custom:button-card
entity: group.grp_lumieres_etage
name: ÉTAGES
aspect_ratio: 4.9/1
color: white # couleur de l'icone général
layout: icon_label
show_state: true
size: 30%
state:
- value: 'on'
color: yellow #couleur de l'icone suivant l'état
styles:
card:
- box-shadow: 0px 0px 0px 2px yellow
state:
- color: green
- value: 'off'
styles:
card:
- box-shadow: 0px 0px 0px 2px rgb(68, 115, 158)
state:
- color: '#E30022'
Yes j’ai ecris ceci en bidouillant un peu et ça fonctionne (j’ai mis yellow mais white ensuite ^^ c’etait pour tester) :
