Les posteurs les plus actifs du mois
1 Message - 50%
1 Message - 50%
Partagez
Aller en bas
avatar
Responsable communautaire
Responsable communautaire
Groupe RP : 219
Sexe : Masculin Terra : 9292
Voir le profil de l'utilisateurhttp://www.excidius.com

PHPB2 : Profile du posteur, avatar coulissant.

le Lun 27 Fév - 9:07
Dans ce sujet je vous propose un code tout prêt, qui vous permettra d'avoir un profile disposant d'un avatar coulissant lorsque vous survolez la zone du profile du posteur.

En suivant ce tutoriel vous devez être le Fondateur du forum. Après tout, seul le compte fondateur d'un forum peut avoir accès aux template. (cet à dire le compte qui a créé le forum.)

Ce tutoriel vise surtout les personnes qui n'ont pas encore modifié leurs template, après cela ne vous empêche pas non plus d'utiliser ce tutoriel si vous avez déjà modifié le template viewtopic_body.

Aperçu:





Le HTML

Allez dans votre Panneau d'administration, puis dans Affichage. Ensuite recherchez en bas à gauche vos template et cliquez sur Général.

Pour finir, cliquez sur le template : viewtopic_body.

Repérez ceci dans votre template :

Code:
<!-- BEGIN displayed -->

Après le repère que je vous ai donnés, ce trouve ces deux lignes :

Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 

Ce que vous devez modifier se trouve juste après ces deux lignes de codes.

Remplacez le code se trouvant entre ces deux balises td par celui-ci :

Code:
<div class="profilperso">
              
                  <span class="avatar_mess"><span class="profil_mess"><!-- 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>
                    <div class="vava">{postrow.displayed.POSTER_AVATAR}<span/><div/>
              
                      <br/ >  <span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span> <br/>
                    <span class="rang_mess">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span>
                    <div/>

Une fois ceci fait, enregistrez puis publier votre template.

Le Css

Maintenant, on va mettre en place tout ça. Toujours dans votre panneau d'administration et affichage, allez dans Couleur, puis cliquez sur Feuille de style Css.

Collez simplement ce code Css :

Code:

/*************************************************************************
                  http://excidius-rpg.forumactif.org    lll  AVATAR COULISSANT ************************************************* /
.vava{
      position: relative;
    margin-top: -75px;
  -webkit-transition: 1s;
  
  
}
 
.profilperso{
  width: 158px; /** Valeur modifiable ci besoin **/
  min-height: 282px; 282px; /**Valeur modifiable ci besoin **/
  overflow: hidden; /**Empêche l'avatar de dépasser du cadre lors du mouvement **/
      border: 5px solid;
    box-shadow: inset 0px 0px 50px 0px #ABABAB, 5px 5px 5px 1px #242424;
    -webkit-box-shadow: inset 0px 0px 50px 0px #ABABAB, 5px 5px 5px 1px #242424;
    -moz-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #242424;
    -o-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #242424;
      
}
 
.profilperso:hover .vava img{
  margin-left: 150px;
  -webkit-transition: 1s;
  transition: 1s;
}

.vava img{
  transition: 1s;
  width: 157px;
    position: relative;
    top: 17px;
}

.pseudo_mess{
  position: relative;
    left: 41px;
    text-align: center;
}

/*******************************************Fin de code : AVATAR COULISSANT
            http://excidius-rpg.forumactif.org  lll   ******************************************************************/

Vous pouvez modifier le code, pour en améliorer l'apparence du profil du posteur, en revanche je vous conseil avant toute modification de garder une copie du code. Ainsi en cas de problème, vous pourrez revenir à une version du code antérieure.

Pour toute question par rapport à ce tutoriel, je vous invite à ouvrir un poste dans la partie Réclamation du forum.
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum