Bonjour,
Depuis un bon moment j’ai transféré la plupart de mes règles card_mod dans un fichier thème et ainsi pouvoir les modifier en un seul endroit au lieu de devoir passer en revue toutes les cartes les utilisant.
Pour l’exemple je veux transformer la carte suivante et enlever sa bordure et son fond, donc de ça :
Vers :
J’ai donc ma carte de base
type: tile
entity: sensor.home_assistant_operating_system_newest_version
vertical: false
features_position: bottom
grid_options:
columns: full
A laquelle j’avais rajouté du card_mod :
type: tile
entity: sensor.home_assistant_operating_system_newest_version
vertical: false
features_position: bottom
grid_options:
columns: full
card_mod:
style: |
ha-card {
border: none;
background: none;
}
Pour arriver au résultat puis en passant par un thème je me retrouve avec :
type: tile
entity: sensor.home_assistant_operating_system_newest_version
vertical: false
features_position: bottom
grid_options:
columns: full
card_mod:
class: border_none
Avec le fichier thème associé:
demo_theme:
ha-view-sections-column-min-width: 538px
ha-view-sections-column-max-width: 720px
ha-view-sections-column-gap: 28px
#card_mod
card-mod-theme: demo_theme
card-mod-card: |
/* Enlever bordure carte */
ha-card.border_none {
border: none;
background: none;
}
Jusque là pas de soucis et je peux utiliser soit la carte de base soit sa version stylisée par le thème en ajoutant :
card_mod:
class: border_none
Et ce pour toutes les cartes que je peux cibler par :
card_mod:
style: |
ha-card {
en utilisant card_mod.
Maintenant j’arrive à mon problème.
Si je veux faire la même chose sur une carte heading par exemple et que je veuille changer la couleur du texte et ajouter une ligne en dessous :
De :
Vers :
Dans mon card_mod je me retrouve avec
type: heading
heading_style: title
heading: Nouvelle section
card_mod:
style: |
.container {
margin: 0 8px;
border-bottom: 1px solid var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}
.title > p {
color: red;
font-weight: normal;
}
Mais je n’arrive pas à le traduire dans mon thème pour l’exploiter comme ça :
type: heading
heading_style: title
heading: Nouvelle section
card_mod:
class: titre_rouge_avec_ligne
Et ainsi ne pouvoir le mettre que sur certaine carte.
J’arrive bien dans le thème à en faire une définition mais qui s’applique à toute les cartes heading de cette façon :
demo_theme:
ha-view-sections-column-min-width: 538px
ha-view-sections-column-max-width: 720px
ha-view-sections-column-gap: 28px
#card_mod
card-mod-theme: demo_theme
card-mod-card: |
/* LES CARTES HEADING */
.type-heading div.container {
margin: 0 8px;
border-bottom: 1px solid var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}
.type-heading div.container div.content.title p {
color: red;
font-weight: normal;
}
J’ai le même problème sur les cartes mushroom-title que je modifie en card_mod comme ça :
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: ""
subtitle: Pièces
card_mod:
style:
mushroom-title-card$: |
.subtitle {
border-bottom: 1px solid var(--ha-card-border-color,var(--divider-color,#e0e0e0));
padding-bottom: 0px;
}
.header {
margin-bottom: -7px;
}
Ou part thème comme ça :
demo_theme:
ha-view-sections-column-min-width: 538px
ha-view-sections-column-max-width: 720px
ha-view-sections-column-gap: 28px
#card_mod
card-mod-theme: demo_theme
card-mod-card: |
/* Enlever bordure carte */
ha-card.border_none {
border: none;
background: none;
}
/* LES CARTES MUSHROOM TITLE */
.header.type-custom-mushroom-title-card {
margin-bottom: -7px;
}
.header.type-custom-mushroom-title-card div h2 {
border-bottom: 1px solid var(--ha-card-border-color,var(--divider-color,#e0e0e0));
padding-bottom: 0px;
}
Mais là aussi cela concerne l’ensemble des cartes mushroom-title présentent sur le dashboard et je n’arrive pas à les exploiter avec :
card_mod:
class: quelquechose
pour n’en modifier que certaines.
Si quelqu’un l’a déjà fait ou maitrise mieux le css je preneur d’un coup de main.
