Mise en place (Templates)

Rendez-vous dans votre panneau d'administration, onglet Apparence et dans le sous-menu Templates choisissez Général. Ouvrez le template viewtopic_body et cherchez le bout de code suivant :

Code:

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />

Ce qui nous intéresse, ce sont les quatre lignes avant la dernière, mais comme on va utiliser des blocs (div) et qu'il ne faut surtout pas placer de blocs dans un élément inline, on va remplacer le <span class="postdetails poster-profile"> par un div :

Code:

            <div class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </div><br />

Maintenant que c'est fait, on va pouvoir s'intéresser à cette partie du code, qui affiche le profil :

Code:

            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}

Il faut installer le 'bouton' qui servira à afficher / cacher votre profil. Juste avant la ligne contenant BEGIN profile_field, on va rajouter ceci :

Code:

<div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">En savoir plus</div>

La petite fonction qui s'active au clic (via l'attribut onClick) va aller chercher le style de l'élément suivant pour le cacher ou l'afficher à chaque clic. Mais tout seul, ce bout de code ne servira pas à grand chose, on doit englober le profil dans un bloc (un div qui sera caché par défaut, ce qui, avec le bouton précédemment rajouté, vous donne le code final suivant :

Code:

<div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">En savoir plus</div>
<div class="profil-cache" style="display: none">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div>

Et voilà pour les modifications du template viewtopic_body, vous n'avez plus qu'à enregistrer ces modifications et à publier votre template.

Personnalisation (CSS)

Votre code marchera très bien sans que vous n'ayez à personnaliser votre CSS, mais vous avez deux classes à votre disposition : bouton-profil et profil-cache. Pour obtenir un effet similaire à l'aperçu donné, voici le code CSS associé (à placer dans votre panneau d'administration, onglet Apparence, menu couleurs puis Feuille de style CSS) :

Code:

.bouton-profil {
    cursor: pointer; /* curseur au survol */
    margin: 2px 0; /* petite marge en haut et en bas */
    padding: 2px; /* espacement entre le texte et la bordure */
    text-align: center; /* centrage du texte dans le bloc */
   /* -- mise en forme -- */
   background: #CCCCCC; /* couleur de fond */
    border: 3px double #000000; /* bordure */
    color: #B74C08; /* couleur texte */
    font-size: 11px; /* taille du texte */
    font-variant: small-caps; /* effet petites majuscules */
    font-weight: bold; /* effet gras */
    letter-spacing: 2px; /* espace entre les lettres */
}

.profil-cache {
   border: 3px double #000000;
    margin: 2px 0;
    padding: 2px;
}

Et voilà, c'est fini !