Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le Deal du moment : -60%
Chargeur rapide sans Fil Universel 10 W – ...
Voir le deal
13.59 €

Aller en bas
Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2159

Afficher l'avatar du membre et son pseudo sur toutes les pages Empty Afficher l'avatar du membre et son pseudo sur toutes les pages

le Mar 11 Fév 2020 - 16:02

   
Toutes versions

   
Afficher l'avatar du membre et son pseudo sur toutes les pages

   
Coucou Smile

On le voit de plus en plus souvent sur les forums, du coup, ça me paraissant utile d'en faire un tutoriel. J'ai un peu galéré pour le titre, du coup, voici ce que je te propose d'apprendre à faire :

Afficher l'avatar du membre et son pseudo sur toutes les pages Rendu-59

Idea Pré-requis :
• Avoir accès au template du forum.

Idea Cette astuce fonctionne pour toutes les versions de forum.

Une modification de template

Pour commencer, et quelque soit la version de ton forum, on va commencer par modifier le template overall_header. Pour cela, on va aller dans Panneau d'administration > Affichage > Templates > Général.

On va ajouter ceci :
Code:
<div id="barre-infos-connecte">
   <div id="avatar-connecte"></div>
   <div id="pseudo-connecte"></div>
</div>

juste avant
Code:
<!-- BEGIN hitskin_preview -->

Idea Pour AwesomeBB, on va ajouter ce code juste après :
Code:
<body id="top">

Un peu de javascript

On va ensuite créer le javascript qui va récupérer les informations et les afficher où il faut. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

On va créer un nouveau javascript qu'on va afficher sur toutes les pages et on va y mettre ceci :
Code:
$(function(){
 // Une fois la page chargée
  $(document).ready( function(){
   // On vérifie si le membre est connecté
        if(_userdata.session_logged_in != 0){
         // Si c'est le cas, on récupére
         // son pseudo, son id, son avatar
         // et on crée une div qui contiendra "bonjour" et le pseudo du membre
         var userName = _userdata.username,
            userId = _userdata.user_id,
            userAvatar = _userdata.avatar,
            divPseudo = 'Bonjour <a href="/u'+ userId +'">'+ userName +'</a></div>';
 // On met les élements aux bons endroits
         $('#barre-infos-connecte #avatar-connecte').append(userAvatar);
         $('#barre-infos-connecte #pseudo-connecte').append(divPseudo);
        }else{
         // Si le membre n'est pas connecté,
         // on cache la barre
           $('#barre-infos-connecte').addClass('m-d-none');
        }
      
   });

});

Idea Le javascript est commenté pour que tu puisses le comprendre.

Et pour finir, un peu de style

Maintenant que nos informations s'affichent comme il faut, on va ajouter un peu de CSS pour mettre en page tout ça. Pour cela, on va aller dans Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS.

Voici celle par défaut que je te donne.

Code:
.m-d-none{
   display: none !important;
}

/*** --- INFOS MEMBRE CONNECTE --- ***/
#barre-infos-connecte{
   align-items: center;
   background: #999; /* Couleur de fond */
   display: flex;
   height: 30px; /* Hauteur */
   left: 0;
   position: sticky;
   top: 0; /* 30px si la toolbar est affichée et fixe */
   width: 100%;
   z-index: 1100 !important;
}

#barre-infos-connecte #avatar-connecte {
   align-items: center;
   border: 8px solid #999; /* Bordure autour de l'avatar */
   border-radius: 50px;
   box-sizing: border-box;
   display: flex;
   height: 80px; /* Hauteur de l'avatar */
   left: 10px;
   overflow: hidden;
   position: absolute;
   top: 4px;
   width: 80px; /* Largeur de l'avatar */
}

#barre-infos-connecte #avatar-connecte img {
    width: 80px; /* Largeur de l'avatar */
}

#barre-infos-connecte #pseudo-connecte {
   color: #d6d6d6; /* Couleur du texte "bonjour" */
    font-variant: small-caps;
    font-size: 20px;
    font-weight: bold;
    margin-left: 100px;
}

#barre-infos-connecte #pseudo-connecte a{
   color: #fff; /* Couleur du lien */
   text-decoration: none;
   transition: all ease .8s;
}

#barre-infos-connecte #pseudo-connecte a:hover{
   color: #666; /* Couleur du lien survolé */
   text-decoration: underline;
   transition: all ease .8s;
}




Si tu as un souci pour mettre en place les barres de progression, tu peux compter sur nous pour t'aider Smile Rendez-vous ici ^^



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses