Personnaliser ses cartes avec Card-mod

Entraide Home Assistant
9

As tu déjà oublié ?

https://forum.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^^

23

Ouaip pareil !

On apprends de ses erreurs… :innocent: :blush:

Le sujet dédié à déjà des vidéos complètes… :innocent:

24

Je me suis fait avoir, je ne me rappelais pas que ca montait aussi haut… Je l’ai pourtant mise à 25%…

:cry:

Tu parle du niveau global ou juste de la musique…?

Edit: ha oui tiens ! C’est pas ouf le son même a fond…

Je la reprendrais si j’ai le temps :+1:

1 « J'aime »
25

@barto_95 @Pulpy-Luke je l’ai refaite avec plus de gain sur la voix et moins sur la musique de fond :wink:

26

C’est nettement mieux ! Merci

1 « J'aime »
27

en français aussi bien expliquer que card-mod ?

28

Non…

Button-card est tellement permissif… Tu n’imagine s pas le boulot d’explication.

Peux être que quelqu’un d’autre que moi le fera…