Avatar coulissant vers le bas

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Avatar coulissant vers le bas

Message par Outis le Ven 16 Jan 2015 - 14:53

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. Smile


Dernière édition par Outis le Jeu 29 Jan 2015 - 10:23, édité 1 fois

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par FANCH 56 le Ven 16 Jan 2015 - 18:03

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;
        }

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Ven 16 Jan 2015 - 19:26

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
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Dim 18 Jan 2015 - 8:29

up

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Lun 19 Jan 2015 - 13:27

up Smile

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Mer 21 Jan 2015 - 13:57

::fete::

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Ven 23 Jan 2015 - 14:07

help ? Gloups

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Ven 23 Jan 2015 - 18:26

bonjour c'est surement dans cette esprit la que tu voudrez !!!!
regarde sur le forum
aurélie:
http://www.iansomerhalderfrance.com/t153p60-le-reglements-et-les-membres-du-staff#14173

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Ven 23 Jan 2015 - 22:00

Exactement ça oui Very Happy

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Ven 23 Jan 2015 - 22:03

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Ven 23 Jan 2015 - 22:57

Merci de ton aide Smile

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Ven 23 Jan 2015 - 23:20

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;
         
            }



R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Sam 24 Jan 2015 - 1:06

Aucun changement Wink

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Sam 24 Jan 2015 - 2:11

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 ..!!!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Sam 24 Jan 2015 - 10:24

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

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.

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Sam 24 Jan 2015 - 22:40

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 !!!!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Sam 24 Jan 2015 - 23:45

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

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>

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Dim 25 Jan 2015 - 15:32

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Dim 25 Jan 2015 - 17:19

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.

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Dim 25 Jan 2015 - 21:35

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:
http://forum-test-r-max.forumactif.org/t1-votre-1er-sujet
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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Dim 25 Jan 2015 - 22:30

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

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.


Dernière édition par Outis le Dim 25 Jan 2015 - 23:29, édité 1 fois

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Dim 25 Jan 2015 - 23:03

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Dim 25 Jan 2015 - 23:34

Merci pour le nouveau code cheers

@R-max a écrit: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. Embarassed

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Dim 25 Jan 2015 - 23:45

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é !!!!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Lun 26 Jan 2015 - 12:52

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. Confused


Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Lun 26 Jan 2015 - 13:04

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Mar 27 Jan 2015 - 1:29

bonsoir outis je suis sur la bonne vois .. Very Happy Very Happy

votre viewtopic_body et d'origine ou modifier..

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Mar 27 Jan 2015 - 1:53

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 Exclamation Exclamation

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par Outis le Mar 27 Jan 2015 - 12:11

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. Embarassed

Outis
*****

Messages : 554
Inscrit(e) le : 28/07/2012

http://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant vers le bas

Message par R-max le Mar 27 Jan 2015 - 12:25

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



R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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