Super! Problème réglé! Merci à tous!
J’ai fait la typo dans switch en replaçant input_boolean que j’avais créé pour le test.
Hello,
J’essaye de mettre en place des icone animés mais cela ne fonctionne pas.
Voici un exemple:
type: custom:mushroom-template-card
primary: Power
icon: mdi:power
icon_color: teal
fill_container: true
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
Mais l’animation ne fonctionne pas.
Hello,
Personne n’as une idée?
Tous les exemple que je vois pour ça, ressemble à ça, je comprends pas pourquoi ça ne fonctionne pas… Une histoire de thème?
Merci à vous.
Hello @Galadan
Je ne réponds pas vraiment avec cette carte mais j’avais trouvé cet exemple il y a qque temps que j’ai conservé pour le cazou ^^
type: grid
cards:
- type: custom:button-card
name: fliping
icon: mdi:fire
styles:
icon:
- animation: flip 1s infinite
extra_styles: |
@keyframes flip {
0% {transform: scaleX(1)}
49.99% {transform: scaleX(1)}
50% {transform: scaleX(-1)}
99.99% {transform: scaleX(-1)}
100% {transform: scaleX(-1)}
}
- type: custom:button-card
name: rotating
icon: mdi:fire
styles:
icon:
- animation:
- rotating 3s infinite alternate
- type: custom:button-card
name: Slide In
icon: mdi:fire
styles:
card:
- height: 100%
icon:
- animation: slidein 3s infinite
extra_styles: |
@keyframes slidein {
from { margin-left: 150%;}
to { margin-left:0%;}
- type: custom:button-card
name: Slide
icon: mdi:fire
styles:
icon:
- animation: slide 3s infinite
extra_styles: |
@keyframes slide {
from { margin-left: 50%;}
to { margin-left:0%;}
- type: custom:button-card
name: bounce
icon: mdi:fire
show_entity_picture: true
styles:
icon:
- animation: bounce 3s ease infinite
extra_styles: |
@keyframes bounce{
from {top: 0%;}
50% {top: 100%;}
to {top: 0%;}
}
- type: custom:button-card
name: Background
icon: mdi:fire
styles:
icon:
- animation: background 3s infinite
extra_styles: |
@keyframes background {
from {background-color: red;}
50% {background-color: yellow;}
to {background-color: green;}
}
- type: custom:button-card
name: icon color
icon: mdi:fire
styles:
icon:
- animation: icon-color 3s infinite
extra_styles: |
@keyframes icon-color {
from {color: red;}
50% {color: yellow;}
to {color: red;}
}
- type: custom:button-card
name: Fade
icon: mdi:fire
styles:
icon:
- animation: fade-out 3s infinite
extra_styles: |
@keyframes fade-out {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
- type: custom:button-card
name: Fade-out
icon: mdi:fire
styles:
icon:
- animation: fade-out 3s infinite
extra_styles: |
@keyframes fade-out {
from { opacity:1; }
to { opacity:0; }
}
- type: custom:button-card
name: Rotation X
icon: mdi:fire
show_entity_picture: true
styles:
icon:
- color: var(--state-icon-active-color)
- animation: rotation_x 5s infinite
extra_styles: |
@keyframes rotation_x{
0% {transform: scalex(-1)}
50% {transform: scalex(1)}
100% {transform: scalex(-1)}
}
- type: custom:button-card
name: Rotation Y
icon: mdi:fire
show_entity_picture: true
styles:
icon:
- color: var(--state-icon-active-color)
- animation: rotation_y 5s infinite
extra_styles: |
@keyframes rotation_y{
from {transform: scaley(1)}
50% {transform: scaley(-1)}
to {transform: scaley(1)}
}
- type: custom:button-card
name: Flame
icon: mdi:fire
styles:
icon:
- animation: flame 1.5s infinite
extra_styles: |
@keyframes flame {
0% {filter: blur(0px);transform: translate3d(0%, 0, 0); opacity:1; }
50% {filter: blur(1px) ;transform: rotate(2deg) translate3d(1%, 0, 0); opacity:.60; }
100% {filter: blur(0px);transform: rotate(-1deg) translate3d(0%, 1%, 0); opacity:1;}
}
- type: custom:button-card
name: Shake
icon: mdi:fire
styles:
icon:
- animation: shake 0.82s infinite
- transform: translate3d(0, 0, 0)
extra_styles: |
@keyframes shake {
10%, 90% {
transform: translate3d(-1%, 0, 0);
}
20%, 80% {
transform: translate3d(2%, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4%, 0, 0);
}
40%, 60% {
transform: translate3d(4%, 0, 0);
}
}
- type: custom:button-card
name: Blur
icon: mdi:fire
styles:
icon:
- animation: blur 5s infinite
extra_styles: |
@keyframes blur {
0% { filter: blur(0px);}
50% { filter: blur(6px);}
100% { filter: blur(0px);}
}
- type: custom:button-card
name: drop-shadow
icon: mdi:fire
styles:
icon:
- animation: drop-shadow 5s infinite alternate
extra_styles: |
@keyframes drop-shadow {
from { filter: drop-shadow(1.95rem 0 0 pink);}
to { filter: drop-shadow(0 0 0.95rem chartreuse);}
}
- type: custom:button-card
name: skew x
icon: mdi:fire
styles:
icon:
- animation: skewX 5s infinite alternate
extra_styles: |
@keyframes skewX {
from { transform: skewX(50deg);}
to { transform: skewX(-50deg);}
}
- type: custom:button-card
name: skew y
icon: mdi:fire
styles:
icon:
- animation: skewY 5s infinite alternate
extra_styles: |
@keyframes skewY {
from { transform: skewY(0deg);}
to { transform: skewY(-180deg);}
}
- type: custom:button-card
name: scale
icon: mdi:fire
styles:
icon:
- animation: scale 5s infinite alternate
extra_styles: |
@keyframes scale {
from { transform: scale(0);}
to { transform: scale(1);}
}
square: false
Tu devrais y trouver ton bonheur ?
C’est mieux avec le lien original.
1 « J'aime »
Merci ça peu toujours servir 
J’ai créé un sujet pour mes cartes Mushroom ou j’ai trouvé sur le forum HA anglais la solution:
Et si vous avez une idée pour mon dernier message sur le sujet je suis preneur également 
Bonjour,
Je cherche désespérément à utiliser un input pour une couleur de fond d’une carte mais sans succès.
Mon code est :
card_mod:
style: |-
ha-card {
color: yellow;
background-color: "{{ states('input_text.coul_fond_porte') }}"
}
Je souhaite utiliser dans une variable des couleurs au format RGB mais que ce soit en utilisant des input_text comme ici ou des input_number avec la correspondance décimale, rien n’y fait.
Et que je mette dans input_text.coul_fond_porte quelque chose comme « red » ou « #ff1234 », ça ne va pas.
Bien sûr, quand j’indique à la place de states… une valeur « red » ou « #ff1234 » cela fonctionne.
Qui aurait une solution ?
Merci d’avance.
Salut @Altau
Ce sera plus comme ça :
card_mod:
style: |
ha-card {
color: yellow;
background-color: {{ states('input_text.absence_start') }};
}
Ah ! P****n ! le point-virgule !!
Merci, Herbs 
Ach ! J’ai encore un problème quand j’intègre cela dans mon code définitif :
{{ 'background-color: {{ states("input_text.coul_fond_porte") }}' if is_state('binary_sensor.capteur_porte_entree_secondaire_ouverture', 'on') else 'background-color: #7bff82' }};
Si je remplace
{{ 'background-color: {{ states("input_text.coul_fond_porte") }}'
par
{{ 'background-color: red'
ça fonctionne, sinon le fond est blanc, et j’ai bien vérifié dans Outils de développement => MODÈLE que l’input contenait bien la valeur « red » 
Avec ça :
card_mod:
style: |
ha-card {
color: yellow;
{% if is_state('binary_sensor.capteur_porte_entree_secondaire_ouverture', 'on') %}
background-color: {{ states('input_text.coul_fond_porte') }};
{% else %}
background-color: #7bff82;
{% endif %}
}
1 « J'aime »
Merci de nouveau, Herbs, ta proposition fonctionne parfaitement.
Mais je ne comprends pas ce qui clochait dans celle que j’ai postée précédemment.
Toujours tester dans les outils de dev, ça aide à voir ce qui cloche :
Ok, merci.
Je tâcherai d’y penser la prochaine fois (bien que je l’aie fait ici une première fois).
Bonjour à tous,
Tout d’abord je me présente, je suis ZoomeoTooknor, nouveau sur le forum.
J’ai eu l’occasion de parcourir plusieurs sujets et j’ai apprécie la qualité des échanges et des conseils de chacun.
Je me suis donc lancé dans la personnalisation de mon HA.
Je suis parvenu à jouer un peu avec card-moi, mais après avoir ajouter du code pour colorier le libellé d’une Mushroom card selon l’état de l’entité, ma carte n’a plus la même hauteur que les autres, et je ne comprends pas pourquoi.
card_mod:
style:
.: |
ha-card {
{% if is_state('light.lampadaire_outlet','on') %}
border: 2.5px outset orange;
{% else %}
border: 2.5px ousetgrey
{% endif %};
background: transparent;
height:40px;
};
mushroom-card:
mushroom-state-item:
mushroom-state-info:
$: |
div.container > span {
{% if is_state('light.lampadaire_outlet','on') %}
color: orange;
{% else %}
color: white;
{% endif %};
}
Depuis que j’ai ajouté la partie « mushroom-card », la hauteur de ma carte lampadaire a changé et est plus grande que les autres.
je cherche donc soit à réduire la hauteur de ma carte « Lampadaire » pour la remettre comme les autres, soit j’arrive à centrer en hauteur mon icône et le libellé, et dans ce cas je fais pareil sur les autres cartes.
L’un de vous aurait une idée s’il vous plait ?
Merci
Hello, merci pour la réponse, mais effectivement après publication du message, je l’ai supprimé mais ma carte fait toujours la même taille.
c’était un test que j’ai fait pour voir si ça changeait la taille, mais non
Via l’ui, dans les paramètres « mushroom » de la carte, essaie de cocher « remplir le conteneur » :
Et tu peux jouer avec l’option qui se trouve à gauche « Disposition », je dirai que toutes les cartes doivent être sur la même disposition.
bien vu, mais aucun changement