type: custom:button-card
custom_fields:
panneaux:
card:
type: custom:button-card
entity: sensor.ecu_216000112528_current_power
name: Panneaux
icon: mdi:solar-power
show_state: true
styles:
card:
- background-color: rgba(32,32,32,0.8)
- border: 2px rgba(211,211,211,0.8) outset
- box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
- border-radius: 10px
grid:
- grid-template-areas: "\"n i\" \"s i\""
- grid-template-columns: 1fr 30%
name:
- font-size: 12px
- justify-self: start
- color: lightgray
- padding-left: 5%
state:
- font-size: 16px
- font-weight: bold
- justify-self: start
- color: cyan
- padding-left: 10%
icon:
- color: cyan
reseau:
card:
type: custom:button-card
entity: sensor.entree_zlinky_lixee_ccain
name: Réseau
icon: mdi:lightning-bolt
show_state: true
styles:
card:
- background-color: rgba(32,32,32,0.8)
- border: 2px rgba(211,211,211,0.8) outset
- box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
- border-radius: 10px
grid:
- grid-template-areas: "\"n i\" \"s i\""
- grid-template-columns: 1fr 30%
name:
- font-size: 12px
- justify-self: start
- color: lightgray
- padding-left: 5%
state:
- font-size: 16px
- font-weight: bold
- justify-self: start
- color: cyan
- padding-left: 10%
icon:
- color: cyan
styles:
card:
- aspect-ratio: 7/1
- background: none
- border: none
custom_fields:
panneaux:
- position: absolute
- left: 1%
- width: 49%
reseau:
- position: absolute
- left: 51%
- width: 48%
Le principe : avoir une carte custom:button-card servant de support pour deux autres cartes positionnées côte-à-côte, une carte nommée « Panneaux » et une carte nommée « Réseau », chacune de ces deux cartes étant un « champ personnalisé » (custom_fields)
Nous définissons donc les deux cartes puis nous les plaçons dans la carte support. Le positionnement se fait au niveau des « styles » de la carte support. Les styles vont nous permettre de définir les attributs des différents éléments de la carte support. Ici, la carte support étant vierge (pas de name, de label, de state, etc.) nous allons simplement préciser les attributs de la carte (élément « card ») :
Nous précisons que nous ne voulons pas de fond (- background: none), pas de bordure (- border: none) et un ratio largeur/hauteur de 7/1 (- aspect-ratio: 7/1).
Nous allons pouvoir maintenant définir les éléments de la première carte et préciser les attributs des différents éléments.
Il nous faudra rattacher la carte à une entité (chez toi ça sera : « sensor.msunpv_powpv ») puis lui donner un nom, définir son icône et afficher l’état de l’entité.
Par défaut, une custom:button-card affiche les différents éléments dans l’un au-dessous de l’autre dans l’ordre suivant : icône (icon) - nom (name) - étiquette (label) - état (state).
Comme nous avons fixé le ratio de la carte, l’affichage n’est pas top… L’élément layout n’étant pas adapté ici, nous allons utilisé un élément « grille » (grid) pour positionner les trois éléments (le nom, l’état et l’icône) de façon à avoir à gauche le nom et l’état superposé et à droite l’icône.
Nous définissons cette grille dans les styles de la carte :
Nous définissons donc des zones (on pourrait dire des lignes) (- grid-template-areas:) avec une première zone pour afficher le nom (n) et l’icône (i) (\"n i\") et une deuxième zone pour afficher l’état (s)et l’icône (i) (\"s i\") et on borne les zones par des guillemets : - grid-template-areas: "\"n i\" \"s i\""
On définit ensuite la largeur de chaque colonne de la grille : - grid-template-columns: 70% 30%
Nous allons ensuite préciser les attributs des autres éléments : la carte, le nom, l’icône et l’état.
card:
- background-color: rgba(32,32,32,0.8) <------ Couleur de fond
- border: 2px rgba(211,211,211,0.8) outset <------ Bordure (épaisseur, couleur, et aspect : ici une impression de relief)
- box-shadow: 2px 2px 4px rgba(32,32,32,0.5) <------ Ombre portée
- border-radius: 10px <------ Arrondi de la bordure
name:
- font-size: 12px <------ La taille de la police
- justify-self: start <------ L'alignement horizontal
- color: lightgray <------ La couleur du texte
- padding-left: 5% <------ Un décalage de 5% à gauche pour que le texte ne soit pas collé à la bordure de la carte
state:
- font-size: 16px
- font-weight: bold <------ Application d'un style "gras" à la police
- justify-self: start
- color: cyan
- padding-left: 10%
icon:
- color: cyan
On définira les mêmes attributs pour la deuxième carte (copié-collé).
Si tu as des questions, n’hésites pas 
. je creuse un peu et si je ne trouve pas je revient vers toi
