tout simplement comme ça ?
card_mod:
style: |
:host {
--primary-text-color: red;
}
Je ne sais pas si cela peut aider mais en suivant ce lien : Mushroom Cards Card Mod Styling/Config Guide - #5 by dimitri.landerloos - Community Guides - Home Assistant Community
si je fais ceci
card_mod:
style: |
ha-card {
font-family: "Wingdings 2";
}
J’ai bien le résultat sur le texte comme l’exemple (image du lien précédent))
Par contre si je fais ceci :
features:
- type: cover-open-close
type: tile
entity: cover.volet_salon2_volet_2
features_position: inline
vertical: false
grid_options:
columns: full
icon: none
show_entity_picture: false
hide_state: false
state_content: current_position
name: SALON2
#card_mod:
#style: |
#ha-card {
#--primary-text-color: #aa8ada;
#}
card_mod:
style:
-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
Cela ne fonctionne pas comme le lien précédent (exemple de l’image sur le site)
De mon côté cela reste couleur par défaut.
Passe par la carte mushroom cover, au moins c’est sur card_mod fonctionne. C’est le dev de mushroom qui a fait la carte tuile, elle se ressemble.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: red;
}
1 « J'aime »
effectivement ça fonctionne du premier coup … j’avais mal interprété ce qu’était mushroom, je pensais qu’il s’agissait d’un thème 
et effectivement la carte est similaire voir même mieux j’ai gagné un bouton pour gérer la position plutôt que d’avoir constamment la jauge !
Merci d’avoir pris le temps d’analyser mon problème ! 
1 « J'aime »
Bonjour c’est re-moi 
J’ai bien avancé avec tous les conseils reçus et encore beaucoup de lecture 
Je bute sur une mise en forme d’entête.
Sur cette carte dont voici le code
type: custom:stack-in-card
mode: horizontal
title: SALON
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 14px;
--stack-card-gap: 0;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
}
cards:
- graph: line
type: sensor
entity: sensor.capteur_tt_th_temperature
detail: 1
hours_to_show: 12
card_mod:
style: |
ha-card {
--accent-color: orange;
}
.header .icon {
{% if states('sensor.capteur_tt_th_cov_temperature') < '18' %}
color: lightblue !important;
{% elif states('sensor.capteur_tt_th_cov_temperature') > '25' %}
color: red !important;
{% else %}
color: lightgreen !important;
{% endif %}
padding-right: 350px !important;
}
.info .value {
font-size: 14px;
}
.info .measurement {
font-size: 14px;
Le résultat est le suivant
Simple je n’ai pas besoin de plus de détails, la variateur de l’icône en couleur me suffit et je vois la variation historique sur 12h. Si besoin je clique sur la courbe pour aller dans le détail.
Ma problématique est la suivante je n’arrive pas à réduire tout l’espace autour de l’intitulé SALON que j’ai réduit en font-size.
J’ai essayé de jouer avec margin/padding sans succès.
Pour expliquer je souhaite supprimer les espaces morts en orange.
Question complémentaire (flèche bleu)
Est il possible de bouger la température/humidite à droite de l’icône ou à gauche cela ira aussi.
J’ai juste réussi à bouger l’icône avec padding-right.
Merci
Voila :
type: custom:stack-in-card
mode: horizontal
title: SALON
card_mod:
style:
$: |
.card-header {
margin-top: -20px !important;
margin-bottom: -30px !important;
}
.: |
ha-card {
--ha-card-header-font-size: 14px;
--stack-card-gap: 0;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
}
cards:
- graph: line
type: sensor
entity: sensor.lywsd03mmc_0945_temperature
detail: 1
hours_to_show: 12
card_mod:
style: |
ha-card {
--accent-color: orange;
}
.header .icon {
{% if states('sensor.lywsd03mmc_0945_temperature') < '18' %}
color: lightblue !important;
{% elif states('sensor.lywsd03mmc_0945_temperature') > '25' %}
color: red !important;
{% else %}
color: lightgreen !important;
{% endif %}
padding-right: 350px !important;
}
.info .value {
font-size: 14px;
}
.info .measurement {
font-size: 14px;
}
.info {
position: absolute;
top: 18%;
left: 11%;
}
- graph: line
type: sensor
entity: sensor.lywsd03mmc_0945_humidity
detail: 1
hours_to_show: 12
card_mod:
style: |
ha-card {
--accent-color: orange;
}
.header .icon {
{% if states('sensor.lywsd03mmc_0945_humidity') < '18' %}
color: lightblue !important;
{% elif states('sensor.lywsd03mmc_0945_humidity') > '25' %}
color: red !important;
{% else %}
color: lightgreen !important;
{% endif %}
padding-right: 350px !important;
}
.info .value {
font-size: 14px;
}
.info .measurement {
font-size: 14px;
}
.info {
position: absolute;
top: 18%;
left: 11%;
}
1 « J'aime »
Excellent merci pour la résolution des deux points.
Je jouais avec les bons termes mais pas dans le bon item, à savoir que je tentais dans ha-card du coup j’arrivais en décalant vers le haut mais pas « à tronquer ». Alors qu’en fait c’est dans le .card-header qu’il fallait taper.
Merci encore WarC0zes pour ta disponibilité et ton aide,
1 « J'aime »