Avatar coulissant vers le bas

[Outis]

Bonjour,

J'ai installé un avatar coulissant sur mon forum. Hors, il se déplace de gauche à droite grâce à ce sujet alors que je voudrais qu'il se déplace vers le bas.

J'ai bien remplacé la partie du code dans le template selon les indication :

Code:

 <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>
                                {postrow.displayed.POSTER_AVATAR}</span>
               
                              <span class="pseudo_mess"><div class="ombre">{postrow.displayed.POSTER_NAME}</div></span>
                              <span class="rang_groupes">{postrow.displayed.POSTER_RANK}</span>
                       
                  </td>

Et j'ai ajouté ce code dans le CSS

Code:


            .avatar_mess
            {
              display: block;
              width: 150px;
              height: 200px;
              margin-left: -5px;
              margin-right: 5px;
              overflow: hidden;
              background: transparent;
              border: 3px solid #000000;
              text-align: center;
              transform: rotate(-5deg);
              -moz-transform: rotate(-5deg);
              -o-transform: rotate(-5deg);
              -ms-transform: rotate(-5deg);
              -htm-transform: rotate(-5deg);
              -webkit-transform: rotate(-5deg);
              box-shadow: 0px 0px 6px #000000;
              -moz-box-shadow: 0px 0px 6px #000000;
              -o-box-shadow: 0px 0px 6px #000000;
              -htm-box-shadow: 0px 0px 6px #000000;
              -webkit-box-shadow: 0px 0px 6px #000000;
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            -htm-transition: 1s;
            -webkit-transition: 1s;
            }
            .avatar_mess:hover
            {
              margin-left: 5px;
              transform: rotate(0deg);
              -moz-transform: rotate(0deg);
              -o-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              -htm-transform: rotate(0deg);
              -webkit-transform: rotate(0deg);
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            -htm-transition: 1s;
            -webkit-transition: 1s;
            }
            .profil_mess
            {
              position: absolute;
              display: block;
              width: 140px;
              height: 190px;
              margin: auto;
              padding: 5px;
              overflow: auto;
              background: #222222;
              color: #ffffff;
              font-size: 11px;
              opacity: 0;
              -moz-opacity: 0;
              -khtml-opacity: 0;
              filter: alpha(opacity=0);
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            -htm-transition: 1s;
            -webkit-transition: 1s;
            }

            .profil_mess:hover
            {
              opacity: 1;
              -moz-opacity: 1;
              -khtml-opacity: 1;
              filter: alpha(opacity=100);
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            -htm-transition: 1s;
            -webkit-transition: 1s;
            }
            .pseudo_mess
            {
              display: block;
              position: relative;
              z-index: 2;
              width: 140px;
              margin-top: 10px;
              margin-left: 10px;
              text-align: center;
              font-size: 12px;
              font-family: courier;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              border-left: 1px solid #000000;
              border-right: 1px solid #000000;
              border-top: 1px solid #000000;
              border-bottom: 1px solid #000000;
              box-shadow: 0px 0px 3px #000000;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
            }
          .rang_groupes
            { display: block;
              position: relative;
              z-index: 2;
              width: 140px;
              margin-top: 15px;
              margin-left: 10px;
              font-size: 11px;
              font-family: courier;
              text-align: center;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
           
            }


J'ai essayé plusieurs astuces, mais visiblement, ce n'était pas les bonnes.


Merci pour toute aide.

[FANCH 56]

Bonsoir

Si cela peux te dépanner, voici un CSS, à toi de changer les codes couleurs et images de fond.

Pour voir l'effet va voir ICI

Il faut passer le curseur souris sur le profil.

Code:

.postprofile-details {
            background-color: #808080;
            background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/f215.jpg");
            border: 1px solid #808080;
            border-radius: 12px;
            margin: 10px auto auto;
            padding: 3px;
            text-align: center;
            width: 160px;
            height:150px;
            overflow:hidden;
        }
        .postprofile-details:hover {
            background-color: #808080;
            background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/f215.jpg");
            border: 1px solid #808080;
            border-radius: 12px;
            margin: 10px auto auto;
            padding: 3px;
            text-align: center;
            width: 160px;
            height: 100%;
            overflow:visible;
        }

[Outis]

Merci, mais ce n'est pas l'effet que je souhaite avoir.
L'avatar doit vraiment glisser vers le bas ou, à défaut, ne pas décaler le cadre du message situé à côté comme c'est actuellement le cas sur mon forum.

Quelque chose dans cet esprit : http://zone.1fr1.net/t109-mettre-un-avatar

[Outis]

up

[Outis]

up

[Outis]

[Outis]

help ?

[Invité]

bonjour c'est surement dans cette esprit la que tu voudrez !!!!
regarde sur le forum

aurélie:

[Outis]

Exactement ça oui

[Invité]

ok je regarde ce que je peut te trouvé pour modifier cela

[Outis]

Merci de ton aide

[Invité]

peut tu faire un essais avec ce css
je ne te promet rien c'est pour voir si ca change quelques chose

Code:

.avatar_mess             
            {
              display: block;
              width: 150px;
              height: 200px;
              margin-left: -5px;
              margin-right: 5px;
              overflow: hidden;
              background: transparent;
              border: 3px solid #000000;
              text-align: center;
              transform: rotate(-5deg);
              -moz-transform: rotate(-5deg);
              -o-transform: rotate(-5deg);
              -ms-transform: rotate(-5deg);
              -htm-transform: rotate(-5deg);
              -webkit-transform: rotate(-5deg);
              box-shadow: 0px 0px 6px #000000;
              -moz-box-shadow: 0px 0px 6px #000000;
              -o-box-shadow: 0px 0px 6px #000000;
              -htm-box-shadow: 0px 0px 6px #000000;
              -webkit-box-shadow: 0px 0px 6px #000000;
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s linear;
            -moz-transition: 1s;
            -o-transition: 1s;
            -htm-transition: 1s;
            -webkit-transition: 1s;
            }
            .avatar_mess:hover
            {
              margin-left: 5px;
              transform: rotate(0deg);
              -moz-transform: rotate(0deg);
              -o-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              -htm-transform: rotate(0deg);
              -webkit-transform: rotate(0deg);
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s linear;
            -moz-transition: 1s linear;
            -o-transition: 1s linear;
            -htm-transition: 1s linear;
            -webkit-transition: 1s linear;
            }
            .profil_mess
            {
              position: absolute;
              display: block;
              width: 140px;
              height: 190px;
              margin: auto;
              padding: 5px;
              overflow: auto;
              background: #222222;
              color: #ffffff;
              font-size: 11px;
              opacity: 0;
              -moz-opacity: 0;
              -khtml-opacity: 0;
              filter: alpha(opacity=0);
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s linear;
            -moz-transition: 1s linear;
            -o-transition: 1s linear;
            -htm-transition: 1s linear;
            -webkit-transition: 1s linear;
            }
 
            .profil_mess:hover
            {
              opacity: 1;
              -moz-opacity: 1;
              -khtml-opacity: 1;
              filter: alpha(opacity=100);
                  transform: all;
            -moz-transform: all;
            -o-transform: all;
            -htm-transform: all;
            -webkit-transform: all;
            transition: 1s linear;
            -moz-transition: 1s linear;
            -o-transition: 1s linear;
            -htm-transition: 1s linear;
            -webkit-transition: 1s linear;
            }
            .pseudo_mess
            {
              display: block;
              position: relative;
              z-index: 2;
              width: 140px;
              margin-top: 10px;
              margin-left: 10px;
              text-align: center;
              font-size: 12px;
              font-family: courier;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              border-left: 1px solid #000000;
              border-right: 1px solid #000000;
              border-top: 1px solid #000000;
              border-bottom: 1px solid #000000;
              box-shadow: 0px 0px 3px #000000;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
            }
          .rang_groupes
            { display: block;
              position: relative;
              z-index: 2;
              width: 140px;
              margin-top: 15px;
              margin-left: 10px;
              font-size: 11px;
              font-family: courier;
              text-align: center;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
         
            }

[Outis]

Aucun changement

[Invité]

peut tu faire un essais avec celui la

ps: sauvegarde le tiens pour le remettre au cas ou !!

Code:

.avatar_mess
{
  display: block;
  width: 190px;
  height: 320px;
  overflow: hidden;
  background: #031128;
  border: 5px solid #252626;
  box-shadow: 0 0 6px #000;
  position: relative;
}
 
.avatar_mess:hover a
{
  left: 100%;
  -webkit-transition: all 1s ease;
  -moz- transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
 
.profil_mess
{
  position: absolute;
  display: block;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 5px;
  overflow: auto;
  background: #133A7B;
  color: #c5bea0;
  font-size: 11px;
}
 
.avatar_mess a {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  -webkit-transition: all 1s ease;
  -moz- transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
 
.pseudo_mess
{
  display: block;
  width: 194px;
  text-align: center;
  font: bold 18px "Courier New", Courier, monospace;
  background: #545252;
  padding-top: 5px;
  border: 3px solid #371e1a;
  text-shadow: 0 0 3px #c5bea0;
  box-shadow: 0 0 3px #000;
}

les cotes et les couleur ne corresponde pas , c'est juste pour voir si l'effet désirer et la ..!!!

[Outis]

Presque, il glisse vers la droite au lieu de glisser vers le bas

EDIT : en testant sur IE ou chrome, il n'y a pas l'effet de glissement mais juste un effet de fondu de l'avatar.

[Invité]

tu est sur d'avoir bien copier le code que tu site en premier message
voici ton code que tu a mis

Code:

 <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>
                                {postrow.displayed.POSTER_AVATAR}</span>
             
                              <span class="pseudo_mess"><div class="ombre">{postrow.displayed.POSTER_NAME}</div></span>
                              <span class="rang_groupes">{postrow.displayed.POSTER_RANK}</span>
                     
                  </td>

voici le code qui est donné sur celui que tu a recopier

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
     
                  <span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
               
                  <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>
                    {postrow.displayed.POSTER_AVATAR}</span>
               
                  <span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span>               
             
      </td>

ils sont différent !!!! c'est normal !!!!

[Outis]

Oui, j'ai bien mis le code correctement.
J'ai mal sélectionné en voulant le recopier

Je remets donc le code directement du template pour confirmer (avec une ligne en plus pour le rang en dessous de l'avatar)

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                   
                              <span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
                         
                              <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>
                                {postrow.displayed.POSTER_AVATAR}</span>
               
                              <span class="pseudo_mess"><div class="ombre">{postrow.displayed.POSTER_NAME}</div></span>
                              <span class="rang_groupes">{postrow.displayed.POSTER_RANK}</span>
                       
                  </td>

[Invité]

bonjour outis
voila j'ai tester sur phpbb2
avec ton code de départ

voici le css que tu ma donné modifier

fait un essais . je les tester moi même sur phpbb2 , ça fonctionne ,j'ai juste modifier la transition (différente des autres )

Code:

/*slide avatar*/
.avatar_mess
{
  display: block;
  width: 140px;
  height: 200px;
  overflow: hidden;
  background: #031128;
  border: 5px solid #333333;
  box-shadow: 0 0 6px #000;
  position: relative;
}
 
.avatar_mess:hover a
{
  left: 100%;
  transform: translatey(200px); 
 -moz-transform:translatey(200px);
 -o-transform: translatey(200px);
 -webkit-transform: translatey(200px);
  -webkit-transition: all 1s ;
  -moz- transition: all 1s ;
  -o-transition: all 1s ;
  transition: all 1s ;
}
 
.profil_mess
{
  position: absolute;
  display: block;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 5px;
  overflow: auto;
  background: #000000;
  color: #c5bea0;
  font-size: 11px;
}
 
.avatar_mess a {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  -webkit-transition: all 1s ;
  -moz-transition: all 1s ;
  -o-transition: all 1s ;
  transition: all 1s ;
}
 
.pseudo_mess
{ 
  display: block;
              position: relative;
              z-index: 2;
              width: 145px;
              margin-top: 10px;
              margin-left: 2px;
              text-align: center;
              font-size: 12px;
              font-family: courier;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              border-left: 1px solid #000000;
              border-right: 1px solid #000000;
              border-top: 1px solid #000000;
              border-bottom: 1px solid #000000;
              box-shadow: 0px 0px 3px #000000;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
}
 .rang_groupes
            { display: block;
              position: relative;
              z-index: 2;
              width: 145px;
              margin-top: 15px;
              margin-left: 2px;
              font-size: 11px;
              font-family: courier;
              text-align: center;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
         
            }
 

j'éspere que ça ira pour toi !!!!
bon dimanche

[Outis]

Merci mais malheureusement, je rencontre toujours un problème.
L'avatar glisse en diagonale (=> droite bas) et il faut être connecté pour le voir, autrement, je ne vois que les infos de profil mais pas du tout l'avatar.

Au cas où le bug viendrait de chez moi, voici le lien pour le forum test : http://personofintetest.weshforum.com/forum

J'ai nettoyé tout le CSS pour ne laisse que le code et éviter toutes mauvaises interactions.

[Invité]

bonsoir , je penser que le slide de cette façon , différente des autres était bien , si vous n'aimer pas je modifie !!
en mode déconnecter ça fonctionne chez moi regardé

slide r-max:

avez vous bien actualisé ,rafraîchi votre page ,voir même un vide de cache du navigateur et nécessaire quand ont fait beaucoup de mofif
j'attend votre réponse pour le glissement du slide ,et pour le en mode déconnecter

[Outis]

OK, c'est un déplacement original, je verrai avec les membres du forum ce qu'ils en pensent. Merci pour cette proposition

Concernant le 2e point, j'ai donné le lien du [http://personofintetest.weshforum.com/t49-sujet-test#222]forum test[/url] pour que la vérification puisse être faite de votre côté. Si vous pouvez confirmer que le déplacement se fait aussi en tant qu'invité. Après avoir vidé le cache et tester sur 3 navigateurs différents, le problème reste identique : il faut être connecté pour voir l'avatar.

[Invité]

ok re
voici le code avec bascule vers le bas (descente)

Code:

/*slide avatar avec bascule vert le bas */
.avatar_mess
{
  display: block;
  width: 140px;
  height: 200px;
  overflow: hidden;
  background: #031128;
  border: 5px solid #333333;
  box-shadow: 0 0 6px #000;
  position: relative;
}
 
.avatar_mess:hover a
{
  float:left;
    transform: translatey(200px); 
 -moz-transform:translatey(200px);
 -o-transform: translatey(200px);
 -webkit-transform: translatey(200px);
  -webkit-transition: all 1s ease ;
  -moz- transition: all 1s ease;
  -0-transition: all 1s ease;
  transition: all 1s ease;       
                           
}
 
.profil_mess
{
  position: absolute;
  display: block;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 5px;
  overflow: auto;
  background: #000000;
  color: #c5bea0;
  font-size: 11px;
}
 
.avatar_mess a {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
 
}
 
.pseudo_mess
{ 
  display: block;
              position: relative;
              z-index: 2;
              width: 145px;
              margin-top: 10px;
              margin-left: 2px;
              text-align: center;
              font-size: 12px;
              font-family: courier;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              border-left: 1px solid #000000;
              border-right: 1px solid #000000;
              border-top: 1px solid #000000;
              border-bottom: 1px solid #000000;
              box-shadow: 0px 0px 3px #000000;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
}
 .rang_groupes
            { display: block;
              position: relative;
              z-index: 2;
              width: 145px;
              margin-top: 15px;
              margin-left: 2px;
              font-size: 11px;
              font-family: courier;
              text-align: center;
              font-weight: bold;
              text-shadow: 0px 0px 0px;
              background: transparent;
              padding-top: 5px;
              -moz-box-shadow: 0px 0px 3px #000000;
              -o-box-shadow: 0px 0px 3px #000000;
              -htm-box-shadow: 0px 0px 3px #000000;
              -webkit-box-shadow: 0px 0px 3px #000000;
         
            }
 

avez vous autorisé sur votre forum de test la visualisation du profil au invité " peut etre la cause du default
sur le mien il marche en mode invité ..
tener moi au courent

[Outis]

Merci pour le nouveau code

avez vous autorisé sur votre forum de test la visualisation du profil au invité " peut etre la cause du default
sur le mien il marche en mode invité ..

Oui, cela résout le problème. En donnait la permission de voir le profil aux invités cela fonctionne.
Sauf que le profil ne doit pas être accessibles aux invités mais uniquement aux membres.

[Invité]

oui bas dans tous les cas le code marche , après l'histoire du profil c'est votre affaire ,
je pense personnellement que ne pas voir l'image étant déconnecter n'est pas si grave

,il faut juste chercher de cacher les infos qui sont en dessous de l'image en mode invité !!!!

[Outis]

Ce n'est pas "ne pas voir" l'image qui est un problème, c'est voir les infos de profil des membres qui ne sont plus masquées.

Merci, j'ai donc besoin d'un autre code pour compenser. J'en ai trouvé un mais il entre alors en conflit avec celui-ci.

[Invité]

de mon coté je recherche aussi pour masqué ces information , ou autre

[Invité]

bonsoir outis je suis sur la bonne vois ..

votre viewtopic_body et d'origine ou modifier..

[Invité]

bon aller ont fait un test
remplacer votre code que vous m'avez donner dans viewtopic_body
donc chercher ceci

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                 
                              <span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
                       
                              <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>
                                {postrow.displayed.POSTER_AVATAR}</span>
             
                              <span class="pseudo_mess"><div class="ombre">{postrow.displayed.POSTER_NAME}</div></span>
                              <span class="rang_groupes">{postrow.displayed.POSTER_RANK}</span>
                     
                  </td>

et remplcer par ceci

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

                      <div class="profil_contour">
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_RANK}
                   
        <div id="slide_avatar"><div>
                  <div style="width:200px;height: 200px;overflow: auto;"> <div class="profil_mess">
                  <!-- BEGIN profile_field -->  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  <!-- END profile_field -->
                  </div>
        <div class="profil_mess">          {postrow.displayed.POSTER_RPG}  </div> </div>       
          <span class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}</span> </div></div>
  <center> <div class="pseudo_profil"><strong>{postrow.displayed.POSTER_NAME}</strong></div></center>                         
        </div>
                 
  </td>

ensuite remplacer votre css par ceci

Code:

/*slide avatar*/

 
.pseudo_profil{ font-family: Arial;
  font-size: 17px;
  text-transform:
  text-align: center !important;
text-decoration:none !important;
 -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in; 
}
 
 .pseudo_profil:hover {
  letter-spacing:5px;
 -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in; 
}
 
 
 
.profil_contour { background-color: #333333; /* gris */
  border-radius: 12px;      /* angle exterieur cadre gris */
  font-size: 10px;
  text-align: justifie;
 padding-bottom:5px;
  padding-top:5px;
padding-left:5px;
padding-right:5px;}
 
 
 
.profil_mess div{
  opacity: 0;
}
 
 
 .profil_mess
{ text-align:
  font-family: arial !important;
font-size:11px !important;
  opacity: 0;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;}
 
 
.profil_mess:hover
{
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
 
.postdetails.poster-profile a img {
  border-radius: 5px; }
 
#slide_avatar div {
  border-radius: 12px;  /*angle coin photo*/
 background: #000000;
  width:150px; /* Égal à la largeur de l'image */
 height: 150px; /* Égal à la hauteur de l'image */
 overflow: hidden;
 position: relative;
 }
 
 
#slide_avatar div img {
  left: 0;
 position: absolute;
 top: 0;
 transition: transform 1s ease-in-out;
 -moz-transition: -moz-transform  1s ease-in-out;
 -o-transition: -o-transform 1s ease-in-out;
 -webkit-transition: -webkit-transform 1s ease-in-out;
  }
 
#slide_avatar div:hover img {
  float:left;
 transform: translatey(150px); 
 -moz-transform:translatey(150px);
 -o-transform: translatey(150px);
 -webkit-transform: translatey(150px);
  transition: transform 1s ease-in-out;
 -moz-transition: -moz-transform  1s ease-in-out;
 -o-transition: -o-transform 1s ease-in-out;
 -webkit-transition: -webkit-transform 1s ease-in-out;
}

il faudra mettre une image de 150 px par 150 px ça doit aller sans être couper

je croise les doigts

[Outis]

Pour répondre à la question : le template viewtopic_body était modifié.

Ça marche sauf que ça donne des infos de profil aux invités mêmes quand ils sont bloqués par contre.

[Invité]

oui j'ai remarqué aussi , je cherche pour les bloqué mais je trouve pas !!
si quelq'un a une idée !!

ps; tu a modifiers quelques chose !!!! il ne s'affiche pas de la même façon chez toi