Modification CSS de HA

Entraide Home Assistant
1

Bonjour à tous!

J’aimerais déplacer la barre de menu du haut (ou s’affichent notamment chaque onglets d’un dashboard) pour la placer en bas, afin de naviguer plus facilement en mobile.

J’ai bien trouvé la modification à faire, cependant comme je débute avec HA je ne sais pas s’il est possible de modifier le CSS quelque part .
Je ne parle pas là des CSS des card mais bien de HA en général. Est-ce que quelqu’un aurait une piste pou rm’éclairer un peu ?

Merci d’avance

2

Hello

tu as ceci

1 « J'aime »
3

Ne fonctionne plus depuis la version 2023.4.0

4

Merci beaucoup !

En lisant le code du plugin, on voit qu’effectivement ça ne doit plus être compatible.
Cela vient du nom des classes qui est différent .
La classe du header est désormais « header », donc en remplaçant à la ligne 51 :


 let appHeader = this.huiRootElement?.querySelector("app-header");

par


let appHeader = this.huiRootElement?.querySelector(".header");

ça fonctionne :wink:

image
image818×316 7.66 KB

Merci !

5 « J'aime »
5

Si tu es assez à l’aise fais une PR :+1:

1 « J'aime »
6

Je n’ai pas de machine avec git dessus, ici j’ai codé directement dans l’editor de HA. Je ne sais pas s’il y a un moyen de faire une PR depuis HA , mais si c’est possible pourquoi pas oui :wink:

7

Tu créer un compte sur github.
Tu édites le code du repo d’origine. ça fait automatiquement un clone du git chez toi, un commit et ça propose un MR

1 « J'aime »
8

Quelqu’un l’a fait :+1:

1 « J'aime »
9

Quelqu’un a été plus rapide :wink:

En ce qui me concerne j’ai fait différemment, je déplace dans tous les cas la barre en bas, sans devoir mettre un paramètre dans l’URL ou un bouton sur le dashboard, comme le fait ce plugin.
En effet, je n’ai jamais besoin d 'avoir la barre ailleurs qu’en bas, donc ça me convient

Bonne journée à tous !

10

Hello,

ce serait sympa de partager avec nous ta trouvaille vu que tu à fait autrement :wink:

@+

11

Oui bien sûr, voici le code adapté du plugin cité plus haut :

Il suffit de copier ce code dans un fichier qui se termine par « .js », et placer ce dernier où vous voulez dans www (ou dans le dossier hacf). Ensuite, ajouter ce fichier en « ressource » dans le menu de gestion des tableaux de bord (en appuyant sur les trois petits points en haut à droite… ou en bas bientôt :wink: )

class NavbarPosition {
    
    constructor() {
        this.queryParams = new URLSearchParams(window.location.search);
        this.contentContainer = null;
        this.contentContainerMutationObserver = null;
        
    }
  
    start() {
      this.applyChangesAndReschedule();
    } 
  
    applyChangesAndReschedule() {
      try {
        this.applyNavbarPositionChanges();
        this.applyPaddingChanges();
      } catch (e) {
        console.error('ERROR while applying navbar changes:', e);
      } finally {
        setTimeout(() => this.applyChangesAndReschedule(), 1000);
      }
    }
  
    get huiRootElement() {
      return document
        .querySelector("home-assistant")?.shadowRoot
        ?.querySelector("home-assistant-main")?.shadowRoot
        ?.querySelector("ha-panel-lovelace")?.shadowRoot
        ?.querySelector("hui-root")?.shadowRoot;
    }
  
    applyNavbarPositionChanges() {
      let appHeader = this.huiRootElement?.querySelector(".header");
      if (appHeader && (appHeader.style.top !== 'auto' || appHeader.style.bottom !== '0px')) {
        appHeader.style.setProperty('top', 'auto', 'important');
        appHeader.style.setProperty('bottom', '0px', 'important');
      }
    }
  
    applyPaddingChanges() {
      let contentContainer = this.huiRootElement?.querySelector("#view");
      if (contentContainer !== this.contentContainer) {
        if (this.contentContainerMutationObserver) {
          this.contentContainerMutationObserver.disconnect();
          this.contentContainerMutationObserver = null;
        }
  
        this.contentContainer = contentContainer;
  
        if (contentContainer) {
          contentContainer.style.setProperty('margin-top', '0px');
          //contentContainer.style.setProperty('padding-bottom', '56px');
  
          this.contentContainerMutationObserver = new MutationObserver(() => {
            if (contentContainer.style.paddingTop != '0px' || contentContainer.style.paddingBottom != '56px') {
              contentContainer.style.paddingTop = '0px';
              contentContainer.style.paddingBottom = '56px';
            }
          }).observe(contentContainer, {
            attributes: true,
            attributeFilter: ['style']
          });
        }
      }
    }
  }
  
  window.navbarPosition = new NavbarPosition();
  window.navbarPosition.start();
2 « J'aime »