[ModernBB]Code pour afficher l'avatar à côté de la barre de navigation

[Etilya]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 21/03/2021
Lien du forum : https://testetilya.kanak.fr/

Description du problème

Bonjour !

Je travaille sur un nouveau design et j'aimerais afficher l'avatar dans la barre de navigation.

J'ai repris le code suivant, utilisé actuellement sur mon forum RP :

Code:

$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    })
});

Avec comme code HTML dans le template ModernBB:

Code:

<div id="headerbar-top" class="is-sticky">
 <div class="wrap e_nav">
 <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
 
                <div id="e_nav_ava"><div class="js-avatar"></div></div>
                          
                <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
 <li>{GENERATED_NAV_BAR}</li>
                            
 </ul>
                          
 </div>
 </div>

Et le css associé :

Code:

.e_nav{
  display:flex;
 
}

.e_nav_ava{
  width:100px;
  height:100px;
}

.e_menu{
  display:flex;
  align-items:center;
}

.js-avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
  border: 10px solid #000;
  border-radius:100px;
}

.js-avatar img {
    width: 100%;
  z-index:0;
}

Bien sûr, l'avatar n'apparaît pas, sinon ce serait trop simple x)
Mon forum RP est actuellement en phpbb2 (je souhaite passer en modernBB car je préfère cette nouvelle structure). Du coup cela vient peut-être de la différence de version ?

En gros le résultat que je veux obtenir est le suivant :

(Page d'accueil de mon autre forum test qui est lui en phpbb2 et utilise le même code javascript cité plus haut)

J'espère avoir été claire.

Merci d'avance pour votre aide !

[Invité]

Hello Etilya ,


remplace le script par celui-ci:

Code:

$(function(){$(function(){
 var a= _userdata["avatar"];
 $('.js-avatar').html(a);
})});

a++

[Etilya]

Bonjour Milouze14,
Merci beaucoup pour ce premier retour rapide !
J'ai changé le script comme proposé, malheureusement le résultat est le même.

[Self]

Hello,

Personnellement si je réuni tout ça dans directement dans le template ça fonctionne parfaitement chez moi.

Code:

<div id="headerbar-top" class="is-sticky">
   <div class="wrap e_nav">
      <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
 
      <div id="e_nav_ava"><div class="js-avatar"></div></div>
      <script>
         $(function(){
            $.each(_userdata, function(key, value){
               $(".js-" + key).html(value);
            })
         });
      </script>
      <style>
         .e_nav{
            display:flex;
         }
            
         .e_nav_ava{
            width:100px;
            height:100px;
         }
            
         .e_menu{
            display:flex;
            align-items:center;
         }
            
         .js-avatar {
            width: 100px;
            height: 100px;
            overflow: hidden;
            border: 10px solid #000;
            border-radius:100px;
         }
            
         .js-avatar img {
            width: 100%;
            z-index:0;
         }
      </style>
      <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
         <li>{GENERATED_NAV_BAR}</li>                   
      </ul>
   </div>
</div>

Bien sur ici j'ai fais ça pour mes tests mais je pense que le CSS peut lui être laisser dans la feuille de style .
Pensez également à supprimer le script présent dans la gestion des codes javascript pour éviter les conflits.

Cordialement .

[Etilya]

Bonsoir Self,

... Effectivement quand je le passe en script dans le template ça fonctionne parfaitement...
Je me demande pourquoi il fonctionnait en module JS sur l'autre et pas ici ôo
C'est un peu étonnant quand on a un module JS et qu'on doit quand même tout mettre dans le template.

Enfin je ne vais pas chercher midi à 14h, du moment que ça fonctionne ça me va.
J'y penserai la prochaine fois

Merci beaucoup pour votre aide !

Bonne nuit