Créer un bouton plus petit avec les 2 boutons suivant sur la même largeur

Entraide Home Assistant
,
1

Bonjour,

je souhaite refaire mon menu sur mon ipad car j’ai trop de choix de bouton au départ qui sont trop gros !! alors pour gagner de la place j’aimerais avec les 2 boutons ci dessous

capture boutons
capture boutons461×457 58.4 KB

les mettre côte à côte même largeur que maintenant mais avec les 2 accès à mes pages et je n’arrive pas à créer le nouveau bouton …

pouvez vous m’aider ?

merci d’avance

Mike

voici les 2 boutons

type: custom:button-card
name: Eclairage
show_entity_picture: true
size: 37%
tap_action:
  action: navigate
  navigation_path: /muller-s-home/eclairage-b
entity_picture: /local/images/eclairage_1.png
styles:
  card:
    - box-shadow: |
        [[[ 
          if (states['light.lumieres_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
          else return 'none';
        ]]]

type: custom:button-card
name: Prises commandées & imprimante
show_entity_picture: true
size: 37%
tap_action:
  action: navigate
  navigation_path: /muller-s-home/priseblo
entity_picture: /local/images/prise commandee_on.png
styles:
  card:
    - box-shadow: |
        [[[ 
          if (states['switch.interrupteurs_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
          else return 'none';
        ]]]
2

après avoir retrouver mon premier message merci encore à Bastgau

je mets la suite de mon message dans celui ci

voilà ce que j’ai pu retravaillé mais pas encore top

capture des 2 boutons
capture des 2 boutons810×405 45.9 KB

comme on le voie sur la capture les 2 bouton sont décalé du bouton modifier et j’aimerais recaller tout cela de plus j’aimerais si possible augmenter la taille de mes images et que les 2 boutons soit coller l’un à l’autre voir ma carte de ce que j’ai jusqu’à maintenant et merci encore pour votre aide

Mike

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Eclairage
    show_entity_picture: true
    entity_picture: /local/images/eclairage_1.png
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/eclairage-b
    styles:
      card:
        - box-shadow: |
            [[[ 
              if (states['light.lumieres_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
              else return 'none';
            ]]]
        - padding: 50px
        - margin: 50px
        - width: 80%
        - height: 80%
  - type: custom:button-card
    name: Prises
    show_entity_picture: true
    entity_picture: /local/images/prise commandee_on.png
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/priseblo
    styles:
      card:
        - box-shadow: |
            [[[ 
              if (states['switch.interrupteurs_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
              else return 'none';
            ]]]
        - padding: 50px
        - margin: 50px
        - width: 80%
        - height: 80%
3

Ton autre sujet est supprimé.

si tu supprimes le padding et margin sur les deux buttons , ça donne quoi ?

        - padding: 50px
        - margin: 50px

image
image1006×414 17.4 KB

utitlise aspect_ratio: 1/1.

image
image995×420 16.6 KB

1 « J'aime »
4

pas grand chose tout disparait

2025-11-05_18-08-15
2025-11-05_18-08-15370×167 8.84 KB

5

Ajoute à chaque button aspect_ratio: 1/1. Tu peux modifier la taille du aspect_ratio 1.5/1 ou 2/1 comme mes exemples dans mon post précédent.

image
image499×309 3.84 KB

6

ok mais je c’est pas ou l’ajouter étant donné que j’ai pas d’icone et qu’il va chercher une image dans ma bibliothèque

aurais tu la gentillesse de rajouter l’aspect ratio dans mon bouton ci dessous ?

merci encore pour ton aide

Mike

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Eclairage
    show_entity_picture: true
    entity_picture: /local/images/eclairage_1.png
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/eclairage-b
    styles:
      card:
        - box-shadow: |
            [[[ 
              if (states['light.lumieres_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
              else return 'none';
            ]]]
        - padding: 50px
        - margin: 50px
        - width: 80%
        - height: 80%
  - type: custom:button-card
    name: Prises
    show_entity_picture: true
    entity_picture: /local/images/prise commandee_on.png
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/priseblo
    styles:
      card:
        - box-shadow: |
            [[[ 
              if (states['switch.interrupteurs_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
              else return 'none';
            ]]]
        - padding: 50px
        - margin: 50px
        - width: 80%
        - height: 80%
7

Je vais dire un bêtise mais trop tard:
Pourquoi faire compliqué avec Bouton card et du css partout, quand on peut faire simple avec des cartes core, et un menu à base de section pour gérer la taille des cartes ?

Si c’est un souci de look, on peut toujours remplacer les icones par des images…

Et pour de jolis boutons, des mushroom chips ou des cartes mushroom sans le nom et l’état et on arrive à faire de boutons carrés avec une icone ou une image…

1 « J'aime »
8

c’est une question de gout j’aime bien le mien mais je dois optimaliser mes accès en diminuant la taille de mes boutons …

Menu
Menu1398×886 57.5 KB

1 « J'aime »
9

dans ton exemple il semblerait que je peux alligner les 2 boutons mais il me manque mes icones avec le texte et je ne sais pas comment le mettre dans ta formule

j’ai reproduit la card dans mon environnement et je recois cela

boutons double
boutons double462×191 29.7 KB

et visiblement chez toi cela marche

je comprends pas et mes images n’apparaisse pas pourtant elle son mentionnée

type: horizontal-stack
cards:
  - type: custom:bouton-card
    name: Eclairage
    show_entity_picture: true
    aspect_ratio: 2/1
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/eclairage-b
  - type: custom:bouton-card
    name: Prises
    show_entity_picture: true
    aspect_ratio: 2/1
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/priseblo
10

Puisque @BBE ne dit pas de bêtise
Que je n’utilise pas encore Section
Que je ne veux pas d’image sur mon dashboard
j’ai rapidement tester les sections avec des images et des tap actions.

image
image416×140 11.4 KB

type: grid
cards:
  - type: heading
    heading: Nouvelle section
  - type: custom:button-card
    show_entity_picture: true
    name: prises
    entity_picture: /api/image/serve/a82c9e93c33c5b5b642cfbe7671a76fb/512x512
    section_mode: true
    tap_action:
      action: navigate
      navigation_path: /lovelace/lumieres
    grid_options:
      rows: 2
      columns: 6
  - type: custom:button-card
    name: Eclairage
    show_entity_picture: true
    entity_picture: /api/image/serve/b4dfb4e8db027c64dc733b8b2b905d0a/512x512
    section_mode: true
    tap_action:
      action: navigate
      navigation_path: /lovelace/chauffage
    grid_options:
      rows: 2
      columns: 6

Comme dit @BBE il faut utiliser les évolutions de HA pour éviter de tomber dans le code.

Juste comme ça, un test, faire simple quoi :wink:
Sinon tu mets juste juste le code de deux de tes « boutons » dans une pile horizontale.

Bob

1 « J'aime »
11

Pourtant en lisant l’article que t’as posté @BBE, peut être que tu arriverais à tes fins.

image
image1637×711 175 KB

Je ne connais pas button-card et pourtant…

Le plus long a été de chercher les images

1 « J'aime »
12

la ligne aspect_ratio: ce met au même niveau que type ou name :

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Eclairage
    show_entity_picture: true
    entity_picture: /local/images/eclairage_1.png
    aspect_ratio: 2/1
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/eclairage-b
    styles:
      card:
        - box-shadow: |
            [[[ 
              if (states['light.lumieres_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
              else return 'none';
            ]]]
  - type: custom:button-card
    name: Prises
    show_entity_picture: true
    entity_picture: /local/images/prise commandee_on.png
    aspect_ratio: 2/1
    tap_action:
      action: navigate
      navigation_path: /muller-s-home/priseblo
    styles:
      card:
        - box-shadow: |
            [[[ 
              if (states['switch.interrupteurs_blonay'].state == "on") return '0px 0px 10px 3px orange'; 
              else return 'none';
            ]]]
13

image
image242×136 15.8 KB

Il faut peut-être essayer avec :

cards:
  - type: costume:mouton-crade

image
image445×355 27.5 KB

@mike413muo, le premier truc à faire quand il y a une erreur, c’est de lire ce qui est indiqué : “Custom element doesn’t exist: bouton-card” aurait du te mettre sur la voie pour corriger tout seul ton erreur.

image
image1015×344 17.6 KB

Je pense qu’il vaut mieux oublier l’idée postée ailleurs :

Sinon, quand tu auras fini avec le NSPanel, tu pourrais cracker la PS5 ?

:rofl:

2 « J'aime »
14

Merci bcp c’est top c’est parfait comme cela

Boutons fini
Boutons fini573×145 20.1 KB

Problème résolu

vraiment mille merci !!!

Mike

15

Et hop, une de plus…

image
image738×197 3.03 KB

A ce rythme, tu n’es pas prêt d’atteindre la 1000ème solution @WarC0zes :joy:

3 « J'aime »
16

@mike413muo ce que @btncrd essaie de te dire c’est que la solution ne sert pas qu’à dire que tu n’as plus de problème, mais surtout à pointer sur le message qui t’as le plus aidé à résoudre le problème.

ainsi:

  • quiconque tombera sur ta question à l’avenir via la recherche, en cliquant dans le cadre vert « solution » au niveau de ton premier message, tombera sur le post contenant effectivement la solution. (là il tombera sur ton message ne contenant même pas le code final)
  • ça offre une médaille en chocolat à celui qui t’aide et ça encourage à continuer à répondre aux demandes d’aide… Et @WarC0zes vise les 10 000 réponses…

Bref il serait plus fair-play de cliquer sur « solution » sous le post de @WarC0zes …

3 « J'aime »