Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Etilya Dim 21 Mar 2021 - 17:24

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:
[ModernBB]Code pour afficher l'avatar à côté de la barre de navigation FQ0KDzp

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 :
[ModernBB]Code pour afficher l'avatar à côté de la barre de navigation WPOOAZr
(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 !
Etilya

Etilya
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 29/11/2016

Voir le profil de l'utilisateur http://dark-knights-rpg.forumpro.fr/
Etilya a été remercié(e) par l'auteur de ce sujet.

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

Message par Milouze14 Dim 21 Mar 2021 - 18:11

Hello Etilya ,


remplace le script par celui-ci:

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


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6532
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Etilya Dim 21 Mar 2021 - 19:47

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

Etilya
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 29/11/2016

Voir le profil de l'utilisateur http://dark-knights-rpg.forumpro.fr/
Etilya a été remercié(e) par l'auteur de ce sujet.

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

Message par Self Dim 21 Mar 2021 - 21:53

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 Wink .
Pensez également à supprimer le script présent dans la gestion des codes javascript pour éviter les conflits.

Cordialement Smile .
Self

Self
Membre actif

Masculin
Messages : 3807
Inscrit(e) le : 13/06/2013

Voir le profil de l'utilisateur https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

Message par Etilya Dim 21 Mar 2021 - 23:23

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 Very Happy

Merci beaucoup pour votre aide !

Bonne nuit Smile
Etilya

Etilya
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 29/11/2016

Voir le profil de l'utilisateur http://dark-knights-rpg.forumpro.fr/
Etilya a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum