Catégories à fermer


Aller en bas
Miettes
Râleuse
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 : 1327
Voir le profil de l'utilisateurhttp://zen-pub.forumactif.com/

Afficher l'avatar du dernier inscrit dans le QEEL Empty Afficher l'avatar du dernier inscrit dans le QEEL

le Sam 10 Aoû - 9:59

Toutes versions

Afficher l'avatar du dernier inscrit dans le QEEL

Coucou Smile

Dans ce tutoriel, nous allons voir comment récupérer l'avatar du dernier membre inscrit pour le faire apparaître dans le qui est en ligne sous forme d'infobulle.

Tu peux voir le rendu de ce tutoriel sur mon forum de test Smile

Exclamation Pré-requis :
• Avoir accès aux templates du forum,
• Connaître le fonctionnement des positionnements en CSS,
• Avoir lu le tutoriel concernant les infobulles.

Idea Ce tutoriel fonctionne sur toutes les versions de forum.

Exclamation Ici, je pars du principe que les templates sont ceux par défaut. Logiquement, le tutoriel est assez simple à appliquer même sur un template personnalisé. Cela dit, si tu coinces, n'hésite pas à venir nous demander un coup de pouce.

Le principe

Dans un premier temps, on va cibler la phrase qui correspond au dernier inscrit dans le QEEL. Grâce à ça, on va charger le lien vers son profil afin de pouvoir récupérer en javascript son avatar. On va ensuite afficher celui-ci dans le QEEL.
Enfin, avec un peu de CSS, on va faire en sorte que l'avatar s'affiche sous forme d'infobulle quand on survole le pseudo du membre.

La mise en place

La majorité des manipulations à faire sont communes à toutes les versions. Il y a juste 2 petites différences pour ModernBB et AwesomeBB. Mais ne t'inquiète pas, je le signalerai Smile

Modifions le template

Nous allons commencer par modifier le template qui contient le QEEL et en particulier l'information concernant le dernier utilisateur. Pour cela, nous allons aller dans Panneau d'affichage > Affichage > Templates > Général.

Pour PhpBB2, PhpBB3, PunBB, Invision : il s'agit du template "index_body".
Pour ModernBB, AwesomeBB : il s'agit du template "overall_footer_begin".

Nous allons ensuite repérer
Code:
{NEWEST_USER}
qui correspond à la phrase "L'utilisateur enregistré le plus récent est...".

Nous allons ajouter juste après cette variable la balise qui contiendra l'image et qu'on l'on affichera en infobulle :
Code:
<span id="ib-last-user"></span>

Et pour finir, on entoure le tout d'un span avec un id pour pouvoir le cibler en CSS et Javascript :
Code:
<span id="last-user">
    {NEWEST_USER}
    <span id="ib-last-user"></span>
</span>

On sauvegarde et on publie.

Du javascript

Voici ensuite le javascript à n'afficher que sur l'index. Pour cela, on va aller dans Panneau d'affichage > Modules > HTML & Javascript > Gestion des codes Javascript, on va créer un nouveau javascript et cocher "Sur l'index". Voici le code à y mettre. Celui-ci est commenté pour que tu puisses le comprendre :
Code:
$(function(){
   
    // On teste si l'information du dernier inscrit
    // est visible sur la page
    if( $('#last-user').length ){
   
        var $lastUser = $('#last-user'),
       
        // Dans ce cas, on va récupérer l'url vers le profil du dernier inscrit
            urlLastUser = $lastUser.find('a').attr('href'),
        // Et son pseudo
            pseudoLastUser = $lastUser.find('a > span > strong').text();
       
        // On déplace l'infobulle juste après le lien
        $('#last-user #ib-last-user').insertAfter($lastUser.find('a'));
       
        // on va récupérer l'avatar dans l'infobulle
        $('#last-user #ib-last-user').load('' + urlLastUser +' img[alt="'+ pseudoLastUser +'"]');

    }
});

De la CSS

Pour finir, il ne nous reste plus qu'à mettre la CSS pour cacher l'avatar par défaut et ne l'afficher sous forme d'infobulle que lorsque l'on survole le nom du dernier inscrit.

Pour cela, on va aller dans Panneau d'affichage > Affichage > Images & Couleurs > Couleurs > Feuille de style CSS et on va y mettre le code suivant :
Code:
/*** --- QEEL - Infobulle dernier inscrit --- ***/

/*** On cache l'infobulle au départ ***/
#last-user #ib-last-user{
    display: none;
}

/*** On indique le lien vers le profil du dernier utilisateur comme élement de référence ***/
#last-user > strong{
    position: relative;
}

/*** Au survol du pseudo, on affiche l'infobulle ***/
#last-user a:hover + #ib-last-user,
#last-user #ib-last-user:hover{
    background: #F2EACB; /* Couleurs de fond */
    border: #dbc8a4 1px solid; /* Les bordures de l'infobulle */
    border-radius: 5px; /* Coins arrondis */
    box-sizing: border-box;
    box-shadow: 0 1px 6px rgba(219, 200, 164 ,0.6); /* Ombrage */
    cursor: pointer;
    display: block;
    height: 120px; /* La hauteur de l'infobulle */
    padding: 6px;
    position: absolute;
    right: -10px; /* Position de l'infobulle par rapport au bord droit du lien */
    text-align: center;
    top: -10px; /* Position de l'infobulle par rapport au bord haut du lien */
}

/*** On fixe des dimensions pour l'image afin qu'elle ne dépasse pas
En général, c'est la hauteur qui est la plus grande. On l'impose de la même taille que celle de l'infobulle. La largeur s'adaptera. ***/
#last-user #ib-last-user img{
    display: block;
    height: 100%;
    width: auto;
}

Si ton forum est sous ModernBB

En plus de la CSS précédente, il faut ajouter ceci :
Code:
/* On fait en sorte que l'infobulle ne soit pas coupée */
.statistics{
    overflow: visible;
}
       
.statistics .wrap:after{
    clear: both;
    content: " ";
    display: block;
}

Si ton forum est sous AwesomeBB

Dans la CSS précédente, il faut remplacer ceci :
Code:
#last-user > strong{
    position: relative;
}
par :
Code:
#last-user > strong{
    display: inline-block;
    position: relative;
}

pour faire en sorte que l'infobulle ait une bonne référence pour son placement.




Et voilà, c'est terminé Smile Si tu as un souci avec ce tutoriel, n'hésite pas à nous demander un coup de pouce.




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



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne a nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

  • ► Les groupes :
  • @groupes$
  • @