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

Entraide Home Assistant
,
41

j’ai tout re compilé comme tu l’as expliqués mais les icones n’apparaissent toujours pas
il doit encore manquer quelques choses …

mike-theme1:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-dark-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  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='Belmont']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees']: *ref_tab_style
    paper-tab[aria-label='chauffage belmont’]: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style
    paper-tab[aria-label='STORES']: *ref_tab_style
    paper-tab[aria-label='Cameras']: *ref_tab_style
    paper-tab[aria-label='RADIOS']: *ref_tab_style
    paper-tab[aria-label='SCENARIOS’]: *ref_tab_style
    paper-tab[aria-label='sophe_belmont’]: *ref_tab_style
    paper-tab[aria-label='MULTIMEDIA’]: *ref_tab_style
    paper-tab[aria-label='VOITURE’]: *ref_tab_style
    paper-tab[aria-label='Blonay']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage B']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees B']: *ref_tab_style
    paper-tab[aria-label='Chauffage B']: *ref_tab_style
    paper-tab[aria-label='Nettoyage B’]: *ref_tab_style
    paper-tab[aria-label='Stores B’]: *ref_tab_style
    paper-tab[aria-label='cameras-blonay’]: *ref_tab_style
    paper-tab[aria-label='Radios B’]: *ref_tab_style
    paper-tab[aria-label='Scénarios B’]: *ref_tab_style
    paper-tab[aria-label='Sophrologie B’]: *ref_tab_style
    paper-tab[aria-label='Multimédia B’]: *ref_tab_style
    paper-tab[aria-label='Voiture B’]: *ref_tab_style

    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before,
      paper-tab[aria-label='Belmont'] ha-icon::before,
      paper-tab[aria-label='Eclairage'] ha-icon::before,
      paper-tab[aria-label='Prises Pilotees'] ha-icon::before,
      paper-tab[aria-label='chauffage belmont’] ha-icon::before,
      paper-tab[aria-label='NETTOYAGE’] ha-icon::before,
      paper-tab[aria-label='STORES’] ha-icon::before,
      paper-tab[aria-label='Cameras’] ha-icon::before,
      paper-tab[aria-label=‘RADIOS’] ha-icon::before,
      paper-tab[aria-label='SCENARIOS’] ha-icon::before,
      paper-tab[aria-label='sophe_belmont’] ha-icon::before,
      paper-tab[aria-label='MULTIMEDIA’] ha-icon::before,
      paper-tab[aria-label='VOITURE’] ha-icon::before,
      paper-tab[aria-label='Blonay'] ha-icon::before,
      paper-tab[aria-label='Eclairage B'] ha-icon::before,
      paper-tab[aria-label='Prises Pilotees B'] ha-icon::before,
      paper-tab[aria-label='Chauffage B’] ha-icon::before,
      paper-tab[aria-label='Nettoyage B'] ha-icon::before,
      paper-tab[aria-label='Stores B’] ha-icon::before,
      paper-tab[aria-label='cameras-blonay’] ha-icon::before,
      paper-tab[aria-label='Radios B’] ha-icon::before,
      paper-tab[aria-label='Scénarios B’] ha-icon::before,
      paper-tab[aria-label='Sophrologie B’] ha-icon::before,
      paper-tab[aria-label='Multimédia B’] ha-icon::before,
      paper-tab[aria-label='Voiture B’] ha-icon::before,{
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 42px;
        width: 42px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }
      paper-tab[aria-label='Belmont'] ha-icon::before {
        background: url("/local/images/Belmont_11.png");
      }
      paper-tab[aria-label=‘Eclairage'] ha-icon::before {
        background: url("/local/images/eclairage_i.png");
      }
      paper-tab[aria-label=‘Prises Pilotees'] ha-icon::before {
        background: url("/local/images/prise pilotees_i.png");
      }
      paper-tab[aria-label='chauffage belmont’] ha-icon::before {
        background: url("/local/images/chauffage_i.png");      
      }
      paper-tab[aria-label='NETTOYAGE’] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='STORES’] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='Cameras’] ha-icon::before {
        background: url("/local/images/camera_i.png");
      }
      paper-tab[aria-label='RADIOS’] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='SCENARIOS’] ha-icon::before {
        background: url("/local/images/scenarios_i.png");     
      }
      paper-tab[aria-label='sophe_belmont’] ha-icon::before {
        background: url("/local/images/sophrologie_i.png");
       }
      paper-tab[aria-label='MULTIMEDIA’] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='VOITURE’] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='Blonay'] ha-icon::before {
        background: url("/local/images/Blonay_11.png");
      }
      paper-tab[aria-label=‘Eclairage B'] ha-icon::before {
        background: url("/local/images/eclairage_i.png");
      }
      paper-tab[aria-label=‘Prises Pilotees B'] ha-icon::before {
        background: url("/local/images/prise pilotees_i.png");
      }
      paper-tab[aria-label='Chauffage B’] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='Nettoyage B’] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");      
      }
      paper-tab[aria-label='Stores B’] ha-icon::before {
        background: url("/local/images/tores_i.png");
      }
      paper-tab[aria-label='cameras-blonay’] ha-icon::before {
        background: url("/local/images/camera_i.png");      
      }
      paper-tab[aria-label='Radios B’] ha-icon::before {
        background: url("/local/images/radio_i.png");      
      }
      paper-tab[aria-label='Scénarios B’] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='Sophrologie B’] ha-icon::before {
        background: url("/local/images/sophrologie_i.png");
      }
      paper-tab[aria-label='Multimédia B’] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='Voiture B’] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='Belmont'] ha-icon,
      paper-tab[aria-label='Eclairage'] ha-icon,
      paper-tab[aria-label='Prises Pilotees'] ha-icon,
      paper-tab[aria-label='chauffage belmont'] ha-icon,
      paper-tab[aria-label='NETTOYAGE'] ha-icon,
      paper-tab[aria-label='STORES'] ha-icon,
      paper-tab[aria-label='Cameras'] ha-icon,
      paper-tab[aria-label='RADIOS'] ha-icon,
      paper-tab[aria-label='SCENARIOS'] ha-icon,
      paper-tab[aria-label='sophe_belmont'] ha-icon,
      paper-tab[aria-label='MULTIMEDIA'] ha-icon,
      paper-tab[aria-label='VOITURE'] ha-icon,
      paper-tab[aria-label='Blonay'] ha-icon,
      paper-tab[aria-label='Eclairage B'] ha-icon,
      paper-tab[aria-label='Prises Pilotees B'] ha-icon,
      paper-tab[aria-label='Chauffage B'] ha-icon,
      paper-tab[aria-label='Nettoyage B'] ha-icon,
      paper-tab[aria-label='Stores B'] ha-icon,
      paper-tab[aria-label='cameras-blonay'] ha-icon,
      paper-tab[aria-label='Radios B'] ha-icon,
      paper-tab[aria-label='Scénarios B'] ha-icon,
      paper-tab[aria-label='Sophrologie B'] ha-icon,
      paper-tab[aria-label='Multimédia B'] ha-icon,
      paper-tab[aria-label='Voiture B'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

peut être qu’il faut changer dans la formule plus haut

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='Belmont']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees']: *ref_tab_style
    paper-tab[aria-label='chauffage belmont’]: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style

et mettre comme cela ?

card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
    paper-tab[aria-label='Belmont']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees']: *ref_tab_style
    paper-tab[aria-label='chauffage belmont’]: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
42

image
image862×468 122 KB

tester et fonctionnelle chez moi, avec 3 onglets modifiés.
À toi de jouer maintenant.

mike-theme:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-dark-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  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='Météo']: *ref_tab_style
    paper-tab[aria-label='Energie']: *ref_tab_style
    .: |
      paper-tab[aria-label='Infos'] ha-icon::before,
      paper-tab[aria-label='Météo'] ha-icon::before,
      paper-tab[aria-label='Energie'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 38px;
        width: 38px;
      }
      paper-tab[aria-label='Infos'] ha-icon::before {
        background: url("/local/images/sud radio.png");
      }
      paper-tab[aria-label='Météo'] ha-icon::before {
        background: url("/local/images/sud radio.png");
      }
      paper-tab[aria-label='Energie'] ha-icon::before {
        background: url("/local/images/sud radio.png");
      }
      paper-tab[aria-label='Infos'] ha-icon,
      paper-tab[aria-label='Météo'] ha-icon,
      paper-tab[aria-label='Energie'] ha-icon {
        display: contents;
      }
43

Salut

j’ai mis toute mon energie et j’ai fini par terminé mais j’ai quand même un petit problème !!

Capture d’écran 2025-01-20 à 07.17.13
Capture d’écran 2025-01-20 à 07.17.131337×246 215 KB

le deuxième site depuis blonay est fait de la même facon que la première partie et les icones n’apparaissent pas mais j’ai pris la même adresse des icones que pour le site 1

qu’est ce qui n’est pas juste dans la programmation ?

mike-theme:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-dark-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  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='Belmont']: *ref_tab_style
    paper-tab[aria-label='Eclairage']: *ref_tab_style
    paper-tab[aria-label='prisebel']: *ref_tab_style
    paper-tab[aria-label='chauffbel']: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style
    paper-tab[aria-label='STORES']: *ref_tab_style
    paper-tab[aria-label='Cameras']: *ref_tab_style
    paper-tab[aria-label='RADIOS']: *ref_tab_style
    paper-tab[aria-label='SCENARIOS']: *ref_tab_style
    paper-tab[aria-label='soph1']: *ref_tab_style
    paper-tab[aria-label='MULTIMEDIA']: *ref_tab_style
    paper-tab[aria-label='VOITURE']: *ref_tab_style
    paper-tab[aria-label='Blonay']: *ref_tab_style
    paper-tab[aria-label='Eclairage B']: *ref_tab_style
    paper-tab[aria-label='priseblo']: *ref_tab_style
    paper-tab[aria-label='chauffblo']: *ref_tab_style
    paper-tab[aria-label='Nettoyage B']: *ref_tab_style
    paper-tab[aria-label='Stores B']: *ref_tab_style
    paper-tab[aria-label='camerablo']: *ref_tab_style
    paper-tab[aria-label='Radios B']: *ref_tab_style
    paper-tab[aria-label='Scénarios B']: *ref_tab_style
    paper-tab[aria-label='soph2']: *ref_tab_style
    paper-tab[aria-label='Multimédia B']: *ref_tab_style
    paper-tab[aria-label='Voiture B']: *ref_tab_style
    .: |
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before,
      paper-tab[aria-label='Belmont'] ha-icon::before,
      paper-tab[aria-label='Eclairage'] ha-icon::before,
      paper-tab[aria-label='prisebel'] ha-icon::before,
      paper-tab[aria-label='chauffbel'] ha-icon::before,
      paper-tab[aria-label='NETTOYAGE'] ha-icon::before,
      paper-tab[aria-label='STORES'] ha-icon::before,
      paper-tab[aria-label='Cameras'] ha-icon::before,
      paper-tab[aria-label='RADIOS'] ha-icon::before,
      paper-tab[aria-label='SCENARIOS'] ha-icon::before,
      paper-tab[aria-label='soph1'] ha-icon::before,
      paper-tab[aria-label='VOITURE'] ha-icon::before,
      paper-tab[aria-label='Blonay'] ha-icon::before,
      paper-tab[aria-label='Eclairage B'] ha-icon::before,
      paper-tab[aria-label='priseblo'] ha-icon::before,
      paper-tab[aria-label='chauffblo'] ha-icon::before,
      paper-tab[aria-label='Nettoyage B'] ha-icon::before,
      paper-tab[aria-label='Stores B'] ha-icon::before,
      paper-tab[aria-label='camerablo'] ha-icon::before,
      paper-tab[aria-label='Radios B'] ha-icon::before,
      paper-tab[aria-label='Scénarios B'] ha-icon::before,
      paper-tab[aria-label='soph2'] ha-icon::before,
      paper-tab[aria-label='Voiture B'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 42px;
        width: 42px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }
      paper-tab[aria-label='Belmont'] ha-icon::before {
        background: url("/local/images/Belmont_11.png");
      }
      paper-tab[aria-label='Eclairage'] ha-icon::before {
        background: url("/local/images/eclairage_ii.png");
      }
      paper-tab[aria-label='prisebel'] ha-icon::before {
        background: url("/local/images/prise pilotees_ii.png");
      }
      paper-tab[aria-label='chauffbel'] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='NETTOYAGE'] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='STORES'] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='Cameras'] ha-icon::before {
        background: url("/local/images/camera_i.png");
      }
      paper-tab[aria-label='RADIOS'] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='SCENARIOS'] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='soph1'] ha-icon::before {
        background: url("/local/images/soph_i.png");
      }
      paper-tab[aria-label='MULTIMEDIA'] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='VOITURE'] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='Blonay'] ha-icon::before {
        background: url("/local/images/Blonay_11.png");
      }
      paper-tab[aria-label='Eclairage B'] ha-icon::before {
        background: url("/local/images/eclairage_ii.png");
      }
      paper-tab[aria-label='priseblo'] ha-icon::before {
        background: url("/local/images/prise pilotees_ii.png");
      }
      paper-tab[aria-label='chauffblo'] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='Nettoyage B'] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='Stores B'] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='camerablo'] ha-icon::before {
        background: url("/local/images/camera_i.png");
      }
      paper-tab[aria-label='Radios B'] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='Scénarios B'] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='soph2'] ha-icon::before {
        background: url("/local/images/soph_i.png");
      }
      paper-tab[aria-label='Multimédia B'] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='Voiture B'] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='Belmont'] ha-icon,
      paper-tab[aria-label='Eclairage'] ha-icon,
      paper-tab[aria-label='prisebel'] ha-icon,
      paper-tab[aria-label='chauffbel'] ha-icon,
      paper-tab[aria-label='NETTOYAGE'] ha-icon,
      paper-tab[aria-label='STORES'] ha-icon,
      paper-tab[aria-label='Cameras'] ha-icon,
      paper-tab[aria-label='RADIOS'] ha-icon,
      paper-tab[aria-label='SCENARIOS'] ha-icon,
      paper-tab[aria-label='soph1'] ha-icon,
      paper-tab[aria-label='MULTIMEDIA'] ha-icon,
      paper-tab[aria-label='VOITURE'] ha-icon,
      paper-tab[aria-label='Blonay'] ha-icon,
      paper-tab[aria-label='Eclairage B'] ha-icon,
      paper-tab[aria-label='priseblo'] ha-icon,
      paper-tab[aria-label='chauffblo'] ha-icon,
      paper-tab[aria-label='Nettoyage B'] ha-icon,
      paper-tab[aria-label='Stores B'] ha-icon,
      paper-tab[aria-label='camerablo'] ha-icon,
      paper-tab[aria-label='Radios B'] ha-icon,
      paper-tab[aria-label='Scénarios B'] ha-icon,
      paper-tab[aria-label='soph2'] ha-icon,
      paper-tab[aria-label='Multimédia B'] ha-icon,
      paper-tab[aria-label='Voiture B'] ha-icon {
        display: contents;
      }

merci encore pour ton aide

Mike

44

Ça fais 5 jours que je t’aide, Je t’ai montré plein d’exemple. il faudrait maintenant que t’y arrive seul.
Ça fonctionne, je ne vois pas pourquoi ça ne fonctionnerait pas pour les autres onglets.

45

Salut

je sais je ne comprends pas j’ai appliqué la même chose pour les dernier que pour les premiers

je vais essayé de vider le cache une nouvelle fois et regarder à nouveau désolé encore

Mike

46

23 onglets déclarés

25 onglets déclarés

il t’en manque de déclaré, voila le problème. Relis bien ton code.

47

Salut

Problème enfin réglé il y a avait une autre problème encore

dans la dénomination des pages d’accès de mon menu visiblement
le système aime pas trop les liens avec des lettres en majuscule
ou combiné ( comme Eclairage B ) j’ai renommé toute mes pages
qui ne marchaient pas et maintenant tout est ok visuellement

Capture d’écran 2025-01-21 à 07.12.44
Capture d’écran 2025-01-21 à 07.12.44779×400 107 KB

merci encore je publie la carte final pour ceux que cela intérresse quand tu travailles avec un ipad
c’est très rapide et top !!

Merci encore pour ton aide

Mike

mike-theme1:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-dark-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme1
  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='Belmont']: *ref_tab_style
    paper-tab[aria-label='Eclairage']: *ref_tab_style
    paper-tab[aria-label='prisebel']: *ref_tab_style
    paper-tab[aria-label='chauffbel']: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style
    paper-tab[aria-label='STORES']: *ref_tab_style
    paper-tab[aria-label='Cameras']: *ref_tab_style
    paper-tab[aria-label='RADIOS']: *ref_tab_style
    paper-tab[aria-label='SCENARIOS']: *ref_tab_style
    paper-tab[aria-label='soph1']: *ref_tab_style
    paper-tab[aria-label='multimedia']: *ref_tab_style
    paper-tab[aria-label='VOITURE']: *ref_tab_style
    paper-tab[aria-label='blonay']: *ref_tab_style
    paper-tab[aria-label='eclairage-b']: *ref_tab_style
    paper-tab[aria-label='priseblo']: *ref_tab_style
    paper-tab[aria-label='chauffblo']: *ref_tab_style
    paper-tab[aria-label='nettoyage-b']: *ref_tab_style
    paper-tab[aria-label='stores-b']: *ref_tab_style
    paper-tab[aria-label='camerablo']: *ref_tab_style
    paper-tab[aria-label='radios-b']: *ref_tab_style
    paper-tab[aria-label='scenarios-b']: *ref_tab_style
    paper-tab[aria-label='soph2']: *ref_tab_style
    paper-tab[aria-label='multimedia-b']: *ref_tab_style
    paper-tab[aria-label='voiture-b']: *ref_tab_style
    .: |
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before,
      paper-tab[aria-label='Belmont'] ha-icon::before,
      paper-tab[aria-label='Eclairage'] ha-icon::before,
      paper-tab[aria-label='prisebel'] ha-icon::before,
      paper-tab[aria-label='chauffbel'] ha-icon::before,
      paper-tab[aria-label='NETTOYAGE'] ha-icon::before,
      paper-tab[aria-label='STORES'] ha-icon::before,
      paper-tab[aria-label='Cameras'] ha-icon::before,
      paper-tab[aria-label='RADIOS'] ha-icon::before,
      paper-tab[aria-label='SCENARIOS'] ha-icon::before,
      paper-tab[aria-label='soph1'] ha-icon::before,
      paper-tab[aria-label='multimedia'] ha-icon::before,
      paper-tab[aria-label='VOITURE'] ha-icon::before,
      paper-tab[aria-label='blonay'] ha-icon::before,
      paper-tab[aria-label='eclairage-b'] ha-icon::before,
      paper-tab[aria-label='priseblo'] ha-icon::before,
      paper-tab[aria-label='chauffblo'] ha-icon::before,
      paper-tab[aria-label='nettoyage-b'] ha-icon::before,
      paper-tab[aria-label='stores-b'] ha-icon::before,
      paper-tab[aria-label='camerablo'] ha-icon::before,
      paper-tab[aria-label='radios-b'] ha-icon::before,
      paper-tab[aria-label='scenarios-b'] ha-icon::before,
      paper-tab[aria-label='soph2'] ha-icon::before,
      paper-tab[aria-label='multimedia-b'] ha-icon::before,
      paper-tab[aria-label='voiture-b'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 42px;
        width: 42px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }
      paper-tab[aria-label='Belmont'] ha-icon::before {
        background: url("/local/images/Belmont_11.png");
      }
      paper-tab[aria-label='Eclairage'] ha-icon::before {
        background: url("/local/images/eclairage_ii.png");
      }
      paper-tab[aria-label='prisebel'] ha-icon::before {
        background: url("/local/images/prise pilotees_ii.png");
      }
      paper-tab[aria-label='chauffbel'] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='NETTOYAGE'] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='STORES'] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='Cameras'] ha-icon::before {
        background: url("/local/images/camera_i.png");
      }
      paper-tab[aria-label='RADIOS'] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='SCENARIOS'] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='soph1'] ha-icon::before {
        background: url("/local/images/soph_i.png");
      }
      paper-tab[aria-label='multimedia'] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='VOITURE'] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='blonay'] ha-icon::before {
        background: url("/local/images/Blonay_p.png");
      }
      paper-tab[aria-label='eclairage-b'] ha-icon::before {
        background: url("/local/images/eclairage_ib.png");
      }
      paper-tab[aria-label='priseblo'] ha-icon::before {
        background: url("/local/images/prise pilotees_ii.png");
      }
      paper-tab[aria-label='chauffblo'] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='nettoyage-b'] ha-icon::before {
        background: url("/local/images/nettoyage_ib.png");
      }
      paper-tab[aria-label='stores-b'] ha-icon::before {
        background: url("/local/images/stores_ib.png");
      }
      paper-tab[aria-label='camerablo'] ha-icon::before {
        background: url("/local/images/camera_i.png");
      }
      paper-tab[aria-label='radios-b'] ha-icon::before {
        background: url("/local/images/radio_ib.png");
      }
      paper-tab[aria-label='scenarios-b'] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='soph2'] ha-icon::before {
        background: url("/local/images/soph_i.png");
      }
      paper-tab[aria-label='multimedia-b'] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='voiture-b'] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='Belmont'] ha-icon,
      paper-tab[aria-label='Eclairage'] ha-icon,
      paper-tab[aria-label='prisebel'] ha-icon,
      paper-tab[aria-label='chauffbel'] ha-icon,
      paper-tab[aria-label='NETTOYAGE'] ha-icon,
      paper-tab[aria-label='STORES'] ha-icon,
      paper-tab[aria-label='Cameras'] ha-icon,
      paper-tab[aria-label='RADIOS'] ha-icon,
      paper-tab[aria-label='SCENARIOS'] ha-icon,
      paper-tab[aria-label='soph1'] ha-icon,
      paper-tab[aria-label='multimedia'] ha-icon,
      paper-tab[aria-label='VOITURE'] ha-icon,
      paper-tab[aria-label='blonay'] ha-icon,
      paper-tab[aria-label='eclairage-b'] ha-icon,
      paper-tab[aria-label='priseblo'] ha-icon,
      paper-tab[aria-label='chauffblo'] ha-icon,
      paper-tab[aria-label='nettoyage-b'] ha-icon,
      paper-tab[aria-label='stores-b'] ha-icon,
      paper-tab[aria-label='camerablo'] ha-icon,
      paper-tab[aria-label='radios-b'] ha-icon,
      paper-tab[aria-label='scenarios-b'] ha-icon,
      paper-tab[aria-label='soph2'] ha-icon,
      paper-tab[aria-label='multimedia-b'] ha-icon,
      paper-tab[aria-label='voiture-b'] ha-icon {
        display: contents;
      }
48

Lol, 5 jours d’acharnement, 47 messages et la solution est mise sur le dernier message de l’auteur du sujet. Heureusement, tu croules déjà sous les soluce @WarC0zes :grin: :joy: :rofl:

2 « J'aime »
49

Bonjour.
Je profite de ce sujet (sauf si ça nécessite un sujet propre) pour une interrogation sur cette barre de navigation.
Tout en conservant une barre standard avec uniquement des icones, savez vous si il y possibilité de réduire l’espace entre icones (pas fan du petit chevron qui permet d’indiquer la possibilité de défilement sur mobile).

IMG_0181
IMG_01811179×459 42.2 KB

J’ai réduit la hauteur dans mon theme avec header-height: 40px mais je n’ai pas trouver comment agir en largeur.

50

avant:
image

après:
image

  ha-tab-padding-start: 0.5rem
  ha-tab-padding-end: 0.5rem

image

  ha-tab-padding-start: 0.25rem
  ha-tab-padding-end: 0.25rem
1 « J'aime »
51

Au top, comme toujours. C’est pourtant pas faute d’avoir cherché.

52

J’ai cherché avec l’outil de dev de chrome et en testant :sweat_smile:

53

Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.