je doit pas bien comprendre quand je le met dans le style de la card j ai bien la bordure qui prend la totalité des deux cartes mais je voudrais que autour de la carte gauge
et pareil ne nom je n arrive pas a le changer de couleur pourtant je fait exactement comme pour les autres cards
Pour l’instant j’en suis là. Je regarde ce qui est faisable sans utiliser card-mod et je te dis…
type: custom:button-card
custom_fields:
injection_reseau:
card:
type: custom:button-card
entity: sensor.ecu_216000112528_current_power
name: injection reseau
icon: mdi:transmission-tower-export
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
- border-color: aqua
- height: 150px
grid:
- grid-template-areas: "\"n i\" \"s i\""
- grid-template-columns: 1fr 40%
name:
- font-size: 16px
- justify-self: start
- color: aqua
- padding-left: 5%
state:
- font-size: 20px
- font-weight: bold
- justify-self: start
- color: salmon
- padding-left: 10%
icon:
- color: salmon
- padding-left: 60%
gauge:
card:
type: gauge
entity: sensor.ecu_216000112528_current_power
name: taux autoconsomation
needle: true
severity:
green: 25
yellow: 50
red: 75
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
- border-color: aqua
name:
- font-size: 16px
- color: aqua
styles:
card:
- aspect-ratio: 2/1
- background: none
- border: none
custom_fields:
injection_reseau:
- position: absolute
- left: 1%
- width: 49%
gauge:
- position: absolute
- left: 51%
- width: 48%
- 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
- border-color: aqua
merci j ai reussi je l avais placer au bon endrois mais supprimer plus haut .
par contre pour changer la couleur du nom et du pourcentage j ai pas reussi je vais continuer d avancer sur les autres cartes .
je t embete juste sur une autre carte j ai reussi a tout faire sauf a changer la couleur du mot tendance et je t avoue ne pas comprendre du tout comment faire .
type: custom:button-card
custom_fields:
routage radiateur:
card:
type: custom:button-card
entity: switch.sonoff_1000bedd89
name: routage<br>radiateur
icon: mdi:fire
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
- border-color: aqua
- height: 110px
name:
- font-size: 16px
- justify-self: start
- color: aqua
- padding-left: 5%
state:
- font-size: 20px
- font-weight: bold
- justify-self: start
- color: salmon
- padding-left: 10%
icon:
- color: gold
- padding-left: 60%
3erl:
card:
type: custom:button-card
entity: sensor.negative_price_3erl
name: Bridage 3ERL
show_state: false
show_label: true
label: |
[[[
return "Tendance: " + states['sensor.3erl_tendance_du_jour'].state;
]]]
state:
- value: "1"
color: salmon
icon: mdi:alert
name: bridage
- value: "0"
color: limegreen
icon: mdi:check-circle
name: injection
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
- border-color: aqua
- height: 110px
icon:
- width: 50px
- height: 50px
name:
- color: aqua
styles:
card:
- aspect-ratio: 7/2.2
- background: none
- border: none
custom_fields:
routage radiateur:
- position: absolute
- left: 1%
- width: 49%
3erl:
- position: absolute
- left: 51%
- width: 48%
Tu peux mettre par dessus un autre custom_fields avec juste le nom (et tu peux ne rien afficher dans le nom de la carte gauge en mettant : « name: "" »
Il faut que tu définisses les attributs pour l’élément « label » :
type: custom:button-card
custom_fields:
routage radiateur:
card:
type: custom:button-card
entity: switch.sonoff_1000bedd89
name: routage<br>radiateur
icon: mdi:fire
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
- border-color: aqua
- height: 110px
name:
- font-size: 16px
- justify-self: start
- color: aqua
- padding-left: 5%
state:
- font-size: 20px
- font-weight: bold
- justify-self: start
- color: salmon
- padding-left: 10%
icon:
- color: gold
- padding-left: 60%
3erl:
card:
type: custom:button-card
entity: sensor.negative_price_3erl
name: Bridage 3ERL
show_state: false
show_label: true
label: |
[[[
return "Tendance: " + states['sensor.3erl_tendance_du_jour'].state;
]]]
state:
- value: "1"
color: salmon
icon: mdi:alert
name: bridage
- value: "0"
color: limegreen
icon: mdi:check-circle
name: injection
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
- border-color: aqua
- height: 110px
icon:
- width: 50px
- height: 50px
name:
- color: aqua
label:
- color: lime
styles:
card:
- aspect-ratio: 7/2.2
- background: none
- border: none
custom_fields:
routage radiateur:
- position: absolute
- left: 1%
- width: 49%
3erl:
- position: absolute
- left: 51%
- width: 48%
dans le custom_filed de la carte gauge, avec --primary-text-color
custom_fields:
injection_reseau:
- position: absolute
- left: 1%
- width: 49%
gauge:
- position: absolute
- left: 51%
- width: 48%
- 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
- border-color: aqua
- "--primary-text-color": aqua
Mais comme le nom et état, utilise le même , tu ne pourras pas modifier avec deux couleurs différentes.
sinon il faudras utiliser card_mod 
Ou alors ne pas mettre de nom dans la carte gauge et ajouter un custom_fields par dessus avec juste le nom 
1 « J'aime »
le connaissant, il voudra changer la couleur du name et state 
Dans ce cas autant tou faire avec button-card. Tu ne peux pas lui faire une carte gauge qu’avec button-card ?
oui tu commence a me connaitre il y a deux mois je ne voulais rien toucher quand j ai commencer sur HA et j avoue que maintenant c est quand meme pas mal d avoir une coherance partout . meme si mon dasboard est vraiment minimalist par rapport a tout le monde
je vais arreter pour aujourd hui j ai passer trop de temp devant l ecran a faire marcher les meninges
merci a vous deux je vais continuer d avancer a mon rythme
C’est faisable, mais super ch… à faire : il faut faire un custom_fields semi-circulaire avec un découpage de secteurs de différentes couleurs, puis par dessus un custom_fields semi-circulaire plus petit avec une couleur opaque. Par dessus un custom_fields avec une image pour l’aiguille et afficher celui-ci avec une rotation en fonction de la valeur soit 300 lignes de code pour remplacer une carte qui en fait 10
Un custom_fields sans background avec juste le nom, c’est plus simple
2 « J'aime »
un coup de card_mod et fini , c’est encore plus simple 
edit:
type: custom:button-card
custom_fields:
injection_reseau:
card:
type: custom:button-card
entity: sensor.lywsd03mmc_0945_temperature
name: injection reseau
icon: mdi:transmission-tower-export
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
- border-color: aqua
- height: 150px
grid:
- grid-template-areas: "\"n i\" \"s i\""
- grid-template-columns: 1fr 40%
name:
- font-size: 16px
- justify-self: start
- color: aqua
- padding-left: 5%
state:
- font-size: 20px
- font-weight: bold
- justify-self: start
- color: salmon
- padding-left: 10%
icon:
- color: salmon
- padding-left: 60%
gauge:
card:
type: gauge
entity: sensor.lywsd03mmc_0945_temperature
name: taux autoconsomation
needle: true
severity:
green: 25
yellow: 50
red: 75
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
- border-color: aqua
name:
- font-size: 16px
card_mod:
style:
ha-gauge$: |
svg.text>text {
fill: salmon;
}
.: |
div.name {
color: aqua;
}
styles:
card:
- aspect-ratio: 2/1
- background: none
- border: none
custom_fields:
injection_reseau:
- position: absolute
- left: 1%
- width: 49%
gauge:
- position: absolute
- left: 51%
- width: 48%
- 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
- border-color: aqua
finalement card mod ou button card j ai l impression qu on peut faire quasi le meme chose non ? en attendant merci du temp passer a m aider j ai appris pas mal de chose aujourd hui grace a vous
Il faut quand même être maso pour faire tout ça (écriture du code) sur le téléphone 
1 « J'aime »
j avous que cest bien chiant mais comme je n est pas l utilité d un pc a la maison je ne me vois pas en racheter un pour 10 utilisation dans l année .
je te raconte pas quand j ai fait ton integration pour le msunpv je me suis bien amuser 
slt cleya je revient t embeter pour une petite question j ai recreer une carte avec toute tes indications , j ai aussi reussi a recuperer un bout de code pour changer la couleur de l icone suivant l etat et sa fonctionne ( je te met quand meme le code pour confirmation) , cependant j ai une petite question quand je fait une carte tuile l icone mdi:fire est entouré pour un cercle un peu transparent et par contre sur la carte que j ai fait je n est pas le cercle , et je selectionne pourtant la meme icone , tu a une idée ?
type: custom:button-card
custom_fields:
routage radiateur:
card:
type: custom:button-card
entity: switch.sonoff_1000bedd89
name: routage<br>radiateur
icon: mdi:fire
show_state: true
styles:
card:
- height: 100px
grid:
- grid-template-areas: "\"n i\" \"s i\""
- grid-template-columns: 1fr 40%
name:
- font-size: 16px
- justify-self: start
- color: aqua
- padding-left: 5%
state:
- font-size: 20px
- font-weight: bold
- justify-self: start
- color: salmon
- padding-left: 10%
icon:
- padding-left: 10%
- width: 60px
- height: 60px
- color: |
[[[
if (states['switch.sonoff_1000bedd89'].state == "on") return "goldenrod";
if (states['switch.sonoff_1000bedd89'].state == "off") return "grey";
else return "grey";
]]]
cumulus chaud:
card:
type: custom:button-card
entity: input_boolean.input_boolean_cumulus_hot
name: cumulus<br>chaud
icon: mdi:fire
show_state: true
styles:
card:
- height: 100px
grid:
- grid-template-areas: "\"n i\" \"s i\""
- grid-template-columns: 1fr 40%
name:
- font-size: 16px
- justify-self: start
- color: aqua
- padding-left: 5%
state:
- font-size: 20px
- font-weight: bold
- justify-self: start
- color: salmon
- padding-left: 10%
icon:
- padding-left: 10%
- width: 60px
- height: 60px
- color: |
[[[
if (states['input_boolean.input_boolean_cumulus_hot'].state == "on") return "goldenrod";
if (states['input_boolean.input_boolean_cumulus_hot'].state == "off") return "grey";
else return "grey";
]]]
styles:
card:
- aspect-ratio: 7/2
- background: none
- border: none
custom_fields:
routage radiateur:
- position: absolute
- left: 1%
- width: 49%
cumulus chaud:
- position: absolute
- left: 51%
- width: 48%
Alors il faut que tu fasses un custom field que tu mettes un cercle dedans avec une couleur de fond et que tu le superposes avec ton icône
C’est juste 187 ligne de code supplémentaires 
Juste je chambre un peu je ne sais pas comment ça fonctionne je reste sur mes cartes mushroom avec un peu de card mod
plus j avance plus je me dit c est quand meme beaucoup de ligne pour pas grand chose
et a chaque fois y a un pti truc qui va pas sur les cartes , j aurais mieux fait de tout laisser en bleu et jaune comme a l origine
2 « J'aime »
Salut,
@WarC0zes t’a donné la solution la plus simple (celle du background de l’icône) et @Tochy a évoqué la plus complexe (mais qiu permet d’aller plus loin).
Tu trouveras les deux versions dans ce post : Afficher des attribut(s) personnalisé(s) dans un carte mushroom cover - #30 par Cleya
Tu peux un peu optimiser ton code en utilisant des expressions ternaires :
- color: |
[[[
if (states['input_boolean.input_boolean_cumulus_hot'].state == "on") return "goldenrod";
if (states['input_boolean.input_boolean_cumulus_hot'].state == "off") return "grey";
else return "grey";
]]]
- color: |
[[[
return (states['input_boolean.input_boolean_cumulus_hot'].state === "on") ? 'goldenrod : 'grey';
]]]
merci a vous deux je vais lire le post .
si je comprend bien avec un custom field en fait on rajoute des couches a chaque fois sur la carte que l on peu superposer , ajuster gauche/droite ou haut/bas ?