Accès aux différentes pages avec de mini icones en haut de chaque page

Bonjour,

Je souhaiterais avoir en haut de toutes les pages un mini menu d’icones qui me permette

de passer par exemple de la page lumière à la page multimedia sans devoir repaser par la page principale ?

en utilisant par exemple des boutons comme ceux ci environs 7 ou 8 en ligne au dessus de cahque pas de mon système
Capture d’écran 2025-01-15 à 06.26.48

comment faire et qu’elle card utiliser ?

merci à tous pour votre aide

Mike

Salut,
c’est le menu @anon51798830 :wink:
c’est fais avec button-card.

Il ne faut pas cacher ta barre du haut, au moins pas besoin de faire une carte menu :wink:
Sinon, en simple, tu utilises des badges, qui servent de navigation, avec l’action naviguate.

salut

la barre du haut c’est des textes aujourd’hui je peux mettre à la place des icones ?
Capture d’écran 2025-01-15 à 06.46.56

image
sur ta barre du haut, clique sur le crayon a droite, puis clique sur le crayon de ta page.

Et choisie une icône.

ok

je vois mais si je suis en mode kiosk il n’y a plus d’icones ??

tu utilises kiosk-mode ?

repasse hide_header en false.

kiosk_mode:
  hide_header: false

je sais pas

mais aujoud’hui j’ai un gros bouton pour cacher le menu du haut si je suis pas en edition …

je mets ou ces 2 phrases ?

moi encore plus :wink: image

j’ai cela à l’écran

dans la barre du haut, clique sur le crayon, puis les 3 points


Puis éditeur de configuration.

tu as une ligne kiosk_mode:, avec les options que tu as activé. désactive hide_header.

ok

j’ai fait cela

veut dire que je peux toujours si je voie mon crayon entrer en mode édition ?

Oui, vu que ta barre du haut est plus cacher.

ok

merci pour tes infos

Mike

dernière question !!

c’est compliqué de remplacer ces petites icones par une petite photo perso …

plus parlant pour moi ?

merci pour ton retour

Mike

exemple sophrologie

Capture d’écran 2025-01-15 à 07.20.55

Oui, il faut passer par card_mod. Il faut que je retrouve le sujet ou j’en parler.

edit:
j’ai retrouvé mon post:

Bon courage.

bon

j’aime les défi alors je me suis lancé !!

la card_mod déjà installé

j’ai créé le theme

mike-theme sous config/themes/

et j’ai rajouté dans yaml

# Loads default set of integrations. Do not remove.
default_config:
# Load frontend themes from the themes folder
frontend:
  themes: !include_mike-theme

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

par contre j’ai pas compris comment créer

mike-theme.yaml

en mettant dedans je site

Dans le fichier du thème yaml, tu ajoutes ce code. Il faut modifier le nom de ton onglet [aria-label='Infos'] dans le code, que tu retrouves dans les informations de ton onglet. ??

j’ai pas compris

merci d’avance pour coup de main

Mike

déja, tu pars mal :thinking:

dans ton mike-theme.yaml, tu ajoute tout ce code:

mike-theme:
  card-mod-theme: mobile
  card-mod-root-yaml: |
    paper-tab[aria-label='Infos']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |

      paper-tab[aria-label='Infos'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='Infos'] ha-icon::before {
        background: url("/local/images/sud radio.png");
      }

      paper-tab[aria-label='Infos'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

et partout ou tu as [aria-label='Infos'] il faut changer le Infos par le titre de ton onglet.

j’ai suivi le tuto

mais il y a quelques choses de faux encore

voici mon écran après avoir redémarré ha j’ai toujours l’icone pas d’image …

j’ai voulu travailler ma première icone à gauche qui s’appelle dans mon système
Home assistant_p.png

ma configuration de cette onglet

et ci dessous mon yaml

mike-theme:
  card-mod-theme: mobile
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }

      paper-tab[aria-label='choix-du-domicile1'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

question encore ! chaque fois que j’ai une page je dois créer un yaml sous mike-theme ?
ou c’est dans le même fichier ?

si c’est le cas peux tu me montrer la configuration de yaml avec plusieurs onglets histoire de respecter la syntaxe

en tous les cas merci pour ton aide

Mike

j’ai fais une erreur, c’est comme ça. j’avais pas modifier le mobile dans card-mod-theme ’ c’est le nom de ton thème a y mettre )

mike-theme:
  card-mod-theme: mike-theme

dans le même fichier, il faut ajouter les autres onglets dans le code. Un exemple avec 3 onglets ( tu rajoute plus si besoin ).

mobile:
  card-mod-theme: mobile
  card-mod-root-yaml: |
    paper-tab[aria-label='onglet_1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    paper-tab[aria-label='onglet_2']: *ref_tab_style
    paper-tab[aria-label='onglet_3']: *ref_tab_style

    .: |

      paper-tab[aria-label='onglet_1'] ha-icon::before,
      paper-tab[aria-label='onglet_2'] ha-icon::before,
      paper-tab[aria-label='onglet_3'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='onglet_1'] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_2'] ha-icon::before {
        background: url("/local/images/onglet_2.png");
      }
      paper-tab[aria-label='onglet_3'] ha-icon::before {
        background: url("/local/images/onglet_2.png");
      }

      paper-tab[aria-label='onglet_1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}