Intégrer ici une courte prez' du fofo (âge limite, type de forum...)

Liens utiles

Factions

Eternia 1 x ...
Ethernam 2 x ...
Meute de Vitaly 3 x ...
Le Dédales x ...

Rumeurs

-Le vampire pervers-
Un vampire aurait comme passe temps d'entrer dans les dortoirs des filles pour voir Aiz ! La pauvre serait même observée par lui à travers la fenêtre.
-Cat and furious-
On connais enfin l'origine du grabuge en ville, le directeur s'est trouvé une nouvelle passion. Conduire des voitures à plus de 180 km/h en pleine ville ! Ce chat est complètement fou !

Membres du mois



La communauté du RP et du jeu.
 
Adsence

Partagez | 
 

 PHPB2 : Profile du posteur, avatar coulissant.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
Responsable communautaire
Groupe RP : Indéfini
Sexe : Masculin Terra : 7942
MessageSujet: PHPB2 : Profile du posteur, avatar coulissant.   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 Aller en bas
Voir le profil de l'utilisateur http://excidius-rpg.forumactif.com
 
PHPB2 : Profile du posteur, avatar coulissant.
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Problème avec mon avatar sur steam
» Une crise alimentaire majeure se profile dans le Monde
» [AVATAR] Actrices - Mannequins
» Taille d'avatar
» [AVATAR] Mangas - Dessins

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Excidius :: Index :: Tutoriel :: ForumActif :: Code tout prêt-
Sauter vers: