Personnaliser ses cartes avec Card-mod

Entraide Home Assistant
1

Un sujet dans Entraide Home Assistant pour regrouper les demandes d’aide concernant l’utilisation de card-mod.

Ce module permettant de modifier le rendu des cartes, des thèmes est un indispensable de la personnalisation et revient souvent.

Utilisable aussi bien sur les cartes natives que sur les cartes personnalisées (custom-card), rien ne lui resiste :wink:

Pour bien commencer, je vous propose de ne pas réinventer la roue et de vous partager un lien qui est parmi l’un des +1700 messages (oui, j’ai tout parcouru, rien de mieux pour apprendre :+1:) :

Ce lien regroupe divers exemples de customisations très intéressantes (j’aurais aimé l’avoir dans mes début… :star_struck:).

Amusez-vous :+1:

Et n’hésitez pas à demander de l’aide (ici ou ailleurs :wink: )

:hacf:

Autre sujet traitant de card-mod:

Et j’en oublie certainement, désolé :slightly_smiling_face:

7 « J'aime »
2

Code de la carte météo :

image
image497×244 13.3 KB

type: weather-forecast
entity: weather.maison
show_forecast: true
secondary_info_attribute: pressure
card_mod:
  style: >
    .temp-attribute{color:green;}

    .forecast > div:nth-child(5){filter: blur(5px);}

    .forecast > div:nth-child(5):hover{filter: blur(0);cursor: crosshair;}

    ha-card > div.forecast > div:nth-child(1) > div:nth-child(1),

    ha-card > div.forecast > div:nth-child(2) > div:nth-child(1),

    ha-card > div.forecast > div:nth-child(3) > div:nth-child(1){position:
    relative; z-index: 1;text-transform: capitalize;font-size: 14px;bottom:
    -8rem}

    ha-card > div.forecast > div:nth-child(1) > div.forecast-image-icon,

    ha-card > div.forecast > div:nth-child(2) > div.forecast-image-icon,

    ha-card > div.forecast > div:nth-child(3) >
    div.forecast-image-icon{transform: scale(2)}
6 « J'aime »
5

Je viens d’ajouter la 1ère vidéo officielle de HACF :tada:

Elle explique la navigation de card-mod pour cibler les modifications.

Je crois qu’à un moment je parle de javascript…c’est du css :face_with_hand_over_mouth:!

Bon visionnage !

En espérant que ça en aide certain :smiling_face_with_three_hearts:

Le format vidéo, c’est pas ma tasse de thé, mais parfois, il n’y a pas le choix donc…

:hacf:

3 « J'aime »
6

Merci pour la vidéo, SUPER explicative

1 « J'aime »
7

Alors @barto_95 ? Ça a aidé la vidéo à ta compréhension ?

8

Top cette vidéo!! Carrément plus clair (pour ma part) dans ce format.
On peux utiliser cette méthode pour par exemple utiliser un autre sensor température dans la carte? Ou c’est uniquement du changement « esthétique »?

9

As tu déjà oublié ?

https://forum-test.hacf.fr/t/installer-la-carte-meteo-france/979/46?u=clemalex

J’avais passé du temps pour rédiger le mini tuto… :sleepy: pour répondre à ta question (qui est la même aujourd’hui :sweat_smile: :upside_down_face:)

:grin:

10

Non, j’ai pas oublié! C’est en place d’ailleurs, mais je me demandais si de cette façon, c’était pas plus simple.

11

Ak ok ! Alors oui on peut le faire ainsi… :innocent:

C’est avec du ::before et/ou du after:: et la propriété css content:.

En résumé, tu mets la propriété display: none; sur l’élément de la température et tu mets la propriété content: "{{states('sensor.temperature_netatmo')}}"; pour ::after pat exemple

Tu trouveras des exemples en suivant le lien que j’ai mis dans le premier post (tu tomberas sur ce lien)

1 « J'aime »
12

Ah! C’est top ce lien, pleins d’exemples de modifications qui donnent pleins d’idées!
Merci @Clemalex ! Hésite pas a faire d’autres vidéos même si c’est pas ce que tu préfère :wink: Je trouve le format vraiment bien.

1 « J'aime »
13

Digression :

Ce n’est pas que je n’aime pas (mais c’est sur, c’est pas ma tasse de thé), mais c’est que je préfère le format écrit car on retrouve facilement les informations.

Je trouve les vidéos utiles pour les découvertes mais pas dans la mise au point. (il en a parlé dans sa vidéo de 25min…mais où ?.. :sweat_smile:… Je trouve que c’est une perte de temps vis a vis d’un tuto écrit).

C’est mon avis. :innocent:

Et quand on cherche une information, on la retrouve mieux quand elle est écrite…

Fin de la digression…

14

Pour les idées, ne te limite pas à Home Assistant mais regarde plus large en regardant le CSS.

Card-mod nous permet d’ajouter n’importe quel code CSS… :exploding_head: (exemple : 🎨 [Mon Dashboard] - @Clemalex - #31 par Clemalex)

Et si tu veux ajouter du code Javascript, oriente toi vers la carte [CARTE] Button-Card de @RomRider :heart:

1 « J'aime »
15

C’est pas faux :slight_smile:
Pour un tuto, pas trop long bien sûr ça peu le faire, par exemple sur celui-ci, je le suit pas a pas, et la pause est bien pratique :wink:

Je connais pas trop le CSS et le code web en général mais je m’y intéresse ^^

16

@Clemalex , j’arrive a faire disparaitre la temp initial mais pas a afficher celle de remplacement, j’ai fait comme cela:

  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      display: none;
      .text-content::after {
          content: "{{states('sensor.temperature_netatmo')}}";
      }        
    }
17

C’est pas comme ça que ça fonctionne :wink:

style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      display: none;
    }
    ha-card > ul.flow-row.current > li:nth-child(3)::after{
      content: "{{states('sensor.temperature_netatmo')}} °C";
    }

Regarde mieux les exemples :sweat_smile:

18

En effet, j’avais pas fait attention qu’il fallait redéclarer l’objet à modifier…
Mais j’ai toujours rien qui s’affiche:

card_mod:
  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      display: none;
    }
    ha-card > ul.flow-row.current > li:nth-child(3)::after{
      content: "{{states('sensor.netatmo_galahome_galastation_galamodule_temperature')}} °C";
    }

Mais si j’enlève le display: none, j’ai les deux.

Du coup j’ai fait ça (en suivant un exemple du lien):

card_mod:
  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      color: transparent;
    }
    ha-card > ul.flow-row.current > li:nth-child(3)::after{
      content: "{{states('sensor.netatmo_galahome_galastation_galamodule_temperature')}} °C";
      color: var(--primary-text-color);
    }

Et la c’est ok, je sais pas si c’est juste par contre…

19

Si c’est ok… :innocent:

Ma première proposition ne peut pas fonctionner vu que l’on masque l’élément… :sweat_smile:

Si tu ajoutes un ::before tu comprendra mieux l’agencement que tu viens de créer…

20

Je me disais aussi que c’était pas « logique » de remplacer quelque chose de masqué ^^
J’ai fait la même pour l’humidité sans problème du coup :slight_smile:

Oui faut que je joue avec pour voir.
Cela décale vers le bas le « after » et le "before"le laisse sur la même ligne mais avant (normal quoi ^^ )
Peut-être je doit réduire la taille de la police pour garder sur la même ligne mais toujours après l’original?

1 « J'aime »
21

merci pour ta vidéo.

Je comprend mieux le principe effectivement merci poto :kissing_heart:

par contre le truc shadow faut que je revoie pour mieux comprendre.

Petite suggestion: la music est par moment un peut trop forte (justement au niveau de l’explication shadow)

franchement la vidéo nikel mec continue sérieux c’est top :slight_smile:

manque plus qu’a faire la même chose pour Button-card

22

Hello

Sympa la vidéo !
Seul bémol l’amplification du son… Casque à fond, il faut rester concentré pour pas perdre le fil. C’est ça les vieux^^