MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203 
Afficher l'avatar du membre et son pseudo sur toutes les pages
Mar 11 Fév 2020 - 16:02
Toutes versions
Afficher l'avatar du membre et son pseudo sur toutes les pages
Coucou 
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 :
Pré-requis :
• Avoir accès au template du forum.
Cette astuce fonctionne pour toutes les versions de forum.
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 :
juste avant
Pour AwesomeBB, on va ajouter ce code juste après :
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 :
Le javascript est commenté pour que tu puisses le comprendre.
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.
Si tu as un souci pour mettre en place les barres de progression, tu peux compter sur nous pour t'aide, à la suite de ce sujet ^^
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 :
Pré-requis :• Avoir accès au template du forum.
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 -->
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');
}
});
});
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'aide, à la suite de ce sujet ^^
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum|
|
|