[Carte] Mise en forme de ma mushroom room-card et tuto

j’avais écris mon code comme ça et j’ai fais une classe après.
Finalement une classe , c’est comme un decluterring . Comme je l’utilise beaucoup, j’ai voulu simplifier.

je passe a ce code:

      card_mod:
        class: class_padding

au lieu de:

      card_mod:
        style: |
          ha-card {
            padding: 0px 8px 8px 8px;
            margin-top: -8px;
          }

J’essaie de me faire un decluttering de la « room card » mais pour les pop-up je sèche…

Si tu trouves une solution, j’achète…

Hello !
Voici ma contribution en m’étant inspiré de ta carte :slight_smile:

image

          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        {% if is_state('light.lampe_sp', 'on') %}
                          --shape-color: rgba(var(--orange-dark-rgb),var(--tint1)); !important;
                        {% else %}
                          --shape-color: rgba(var(--grey-dark-rgb),var(--tint1)); !important;
                        {% endif %}
                      .ha-state-icon {
                        color: orange; }
                        --icon-color: white; !important;
                      }
                entity: light.lampe_sp
                icon: mdi:lightbulb-on
                primary: Salon
                secondary: >
                  {{ states("sensor.tvoc_temperature") | float | round }}°C
                  |🚪{{ states("sensor.compteur_portes_salon") }} |🪟{{
                  states("sensor.compteur_fenetres_salon") }} |💡{{
                  states("sensor.compteur_lumieres_salon") }}  {% if
                  is_state('sensor.alarmes_statut', 'unavailable') %}
                    Indisponible
                  {% endif %} {% if is_state('light.lampe_sp', 'unavailable') %}
                    Indisponible
                  {% elif is_state('light.lampe_sp', 'off') %}

                  {% else %}
                    - {{ (states['light.lampe_sp'].attributes.brightness / 2.54) | round(0) }}% 
                  {% endif %}
                layout: horizontal
                tap_action:
                  action: toggle
                badge_icon: |
                  {% if is_state('binary_sensor.mouvements', 'on') %}
                    mdi:motion-sensor
                  {% else %}  
                    mdi:motion-sensor-off
                  {% endif %}
                badge_color: |
                  {% if is_state('binary_sensor.mouvements', 'on') %}
                    orange
                  {% else %}  
                    grey
                  {% endif %}
              - type: custom:mini-graph-card
                entities:
                  - entity: sensor.tvoc_temperature
                    name: Temperature
                    color: rgba(var(--orange-dark-rgb),var(--tint5))
                height: 50
                hours_to_show: 24
                points_per_hour: 1
                line_width: 2
                font_size: 20
                animate: true
                show:
                  name: false
                  icon: false
                  state: false
                  legend: false
                  fill: fade
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: switch.thermostat_salon_statut
                    icon: mdi:radiator
                    icon_color: |-
                      {% if is_state(entity, 'on') %} 
                       orange
                      {% elif is_state(entity, 'off') %} 
                       grey
                      {% else %}
                       grey
                      {% endif %}
                    tap_action:
                      action: more-info
                  - type: template
                    entity: binary_sensor.detecteur_de_mouvement_s_salon
                    icon: mdi:motion-sensor
                    icon_color: |-
                      {% if is_state(entity, 'on') %} 
                       red
                      {% elif is_state(entity, 'off') %} 
                       grey
                      {% else %}
                       grey
                      {% endif %}
                    tap_action:
                      action: more-info
                  - type: template
                    entity: binary_sensor.fenetre_s_contact
                    icon: mdi:window-closed-variant
                    icon_color: |-
                      {% if is_state(entity, 'on') %} 
                       red
                      {% elif is_state(entity, 'off') %} 
                       grey
                      {% else %}
                       grey
                      {% endif %}
                    tap_action:
                      action: more-info
                  - type: template
                    entity: switch.lampe_aquarium
                    icon: mdi:fishbowl
                    icon_color: |-
                      {% if is_state(entity, 'on') %} 
                       orange
                      {% elif is_state(entity, 'off') %} 
                       grey
                      {% else %}
                       grey
                      {% endif %}
                    tap_action:
                      action: more-info
                  - type: template
                    entity: input_button.infos
                    icon: mdi:information
                    icon_color: orange
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/salon
                    card_mod:
                      style: |
                        ha-card {
                          animation: ping 2s 3; /* 3 fois, toutes les 5 secondes */
                        }
                        @keyframes ping {
                          0% {box-shadow: 0 0 0 0 rgba(var(--grey-light-rgb), 0.8);}
                          70% {box-shadow: 0 0 0 10px transparent;}
                          100% {box-shadow: 0 0 0 0 transparent;}
                        }
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      padding-top: 0px;
                      margin-top: -8px;
                      padding-bottom: 8px;
                      padding-left: 8px;
                      padding-right: 8px;
                    }
            card_mod:
              style: |
                ha-card {
                  {% if is_state('light.lampe_sp', 'on') %}
                    background: rgba(var(--orange-dark-rgb),var(--tint1));
                  {% else %}
                    background: rgba(var(--grey-light-rgb),var(--tint4));
                  {% endif %}
                }

J’ai juste un petit truc qui m’agace… quand j’édite la carte, la page d’édition via l’interface graphique apparait, mais le code est « nettoyé » en me supprimant automatiquement cette partie la :

            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--grey-light-rgb),var(--tint4));
                  {% if is_state('light.lampe_sp', 'on') %}
                     background: rgba(var(--orange-dark-rgb),var(--tint1));
                  {% endif %}
                }

Impossible de comprendre pourquoi… Et de temps en temps j’ai le bug ou l’interface graphique n’est pas disponible et m’affiche la modification via le yaml, et à ce moment la le code n’est pas supprimé… à n’y rien comprendre

2 « J'aime »

Salut,
pourquoi tu ecris pas comme ca ?

            card_mod:
              style: |
                ha-card {
                  {% if is_state('light.lampe_sp', 'on') %}
                    background: rgba(var(--orange-dark-rgb),var(--tint1));
                  {% else %}
                    background: rgba(var(--grey-light-rgb),var(--tint4));
                  {% endif %}
                }

Tu utilise stack-in-card dans ton code?

Effectivement !, c’est plus clean comme ça :slight_smile: merci !

custom:vertical-stack-in-card

oui, en début de code : custom:vertical-stack-in-card

Ta carte est vraiment chouette ! bravo.

J’ai une question en lisant ton code, intrigué par la petit chips « info » à droite…

Je vois que toi tu ouvres la page dédiée sur l’appui sur cette chip et tu toggle la lumière sur appui simple sur la carte.

Tu n’as pas trop de déclenchements?
Moi je ne réalise les actions que sur appui long car parfois les appui courts peuvent être intempestifs.
Et le lien vers la page dédié se fait sur l’appui sur la carte, je n’ai pas dédié un chip pour ça (j’essaie d’être économe en chips…) mais je trouve ta solution très intuitive!

Hello ! Merci :slight_smile:
vyr9b06m
En fait, le toggle de ma lampe se fait uniquement sur la zone en bleu, et l’appui simple de la chip se fait que sur la chip elle-même, donc je n’ai pas « d’interférence » entre les 2. Le reste, c’est une zone « morte » sans effet au clic, sauf pour les autres chip.
L’idée du chip info, c’est qu’effectivement, j’ai pas mal d’éléments par pièce qui ne rentrerai pas dans la carte elle-même. J’ai songé à un popup, mais c’est pareil, je n’ai pas encore poussé assez le truc de comment afficher tout cela, et je ne pense pas que cela soit pertinent pour mon cas :slight_smile:
Et l’intégrer en appui long, je ne trouve pas cela intuitif, je le réserve plus pour avoir la carte info de l’entité.

1 « J'aime »

Merci beaucoup pour le partage ! Comment as-tu fait pour graisser et mettre en gris le texte secondaire stp ?

e5983466799b31ca424461ef7711f74478aa4a29

Bonjour,

Est-il possible de mettre un nom sur deux lignes dans une carte ?

J’ai essayé ceci mais cela ne fonctionne pas.

Merci pour votre aide.

Bonjour,
écris le nom sur une ligne et ajoute ce code a la carte:

    card_mod:
      style:
        mushroom-state-info$: |
          span.primary {
          white-space: normal !important;
          }

image

1 « J'aime »

Salut,
tu peut faire comme ca:

    card_mod:
      style: |
        :host {
          --mush-card-secondary-font-weight: bold;
        }

2 « J'aime »

Salut

est il possible de combiner ça :

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: orange !important;
      }

et ça sur la même carte :

card_mod:
  style: |
    ha-card {
      background: url( '/local/img.png' ) no-repeat center center;
    }

J’arrive a faire soit l’un soit l’autre sans soucis mais pas les deux en même temps
PS: je suis sur une carte template mushroom bien sur

Je me reponds à moi même: oui c’est possible

card_mod:
  style: |
    ha-card {
      background: url( '/local/img.png' ) no-repeat center center;
    }
    mushroom-shape-icon {
      --shape-color: red !important;
    }
1 « J'aime »

Bonjour,

Comme cela

    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            --card-secondary-font-size: 20px;
            --card-primary-font-size: 20px;
            --primary-text-color: greenyellow;
            --secondary-text-color: orange;
          }
        .: |
          ha-card{
            border-width: 0px !important;
          }   

Ps : j’avais pas vu que tu avais réussi !

Merci mais je le mets où se code ?
J’ai essayé à la place du mot code: au début, après le name: pour chambre de Juju ou encore après le -type: … et rien ne se passe ou alors, pour certains j’ai des erreurs.
Question subsidiaire, cela suffit pour toute la carte et les futur nom dans le même cas ou faut-il mettre le code à chaque fois que cela se présente sur la même carte ?
Désolé, j’apprends le code yaml.
Merci pour l’aide.

Faut mettre le code comme telle:


Il doit s’appliquer a chaque carte, mais comme on le vois tu aura un décalage de la carte avec les noms sur deux ligne.

Merci mais cela ne fonctionne pas. Où se trouve l’erreur ?

Tu as pas installer card-mod a partir de HACS.
image

1 « J'aime »

Ha ben non, je ne l’avais pas fait. Maintenant que c’est fait, cela va mieux.
Par contre, comment faire pour que toutes les cartes aient la même dimension alors ? Enfin, si c’est faisable.
Capture d’écran 2024-06-14 à 10.06.19

C’est possible, faut jouer avec le padding de la carte sur celle qui auront un nom sur une ligne.

    card_mod:
      style: |
        ha-card {
          padding: 12px 12px 32px 12px !important;
        }

Ca va faire du boulot. Perso je préfère rester sur une ligne et abréger le nom , que faire sur deux lignes.
Chauffage Juju => Chauff. Juju => Chauf. Juju

1 « J'aime »

Et hop

Mise en forme de ma page d’arrosage du jardin avec les bonnes idées piochées ici.
Un petit aperçu :
Arrosage

Merci @BBE pour les tutos et les autres pour certaines idée et façon de faire.

3 « J'aime »