Avatar en accordéon

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

Résolu Avatar en accordéon

Message par UsagiloveMamoru le Jeu 12 Juil 2012 - 1:35

Bonjour- bonsoir,
Je me suis baladé sur un forum et j'ai vue quelque chose qui m'a assez plus sur celui-ci.
La personne a son avatar en position ordinaire et lorsqu'on clique dessus celui glisse et celui-ci montre ses informations de profil.
J'aurais voulu savoir si c'était possible de faire la même chose SAUF qu'à la place des infos de profil, moi je voudrais mettre un autre avatar et garder les info à l'endroit d'origine. Est-ce faisable svp ?
forum en question
J'ai tenté de contacter la fondatrice mais en vain puisque j'ai jamais obtenu de réponse de sa part pour m'orienter :S

Merci d'avance Smile


Dernière édition par UsagiloveMamoru le Jeu 12 Juil 2012 - 16:22, édité 1 fois

UsagiloveMamoru
***

Féminin
Messages : 125
Inscrit(e) le : 07/04/2008

UsagiloveMamoru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en accordéon

Message par tupac le Jeu 12 Juil 2012 - 5:12

Bonjour

La personne a utilisé la propriété transition en css mais seul les navigateurs récents tel que (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) sont capables de lire celle-ci.
Vous pouvez très bien le faire avec du Javascript au moins la tout les navigateur pourrons voir cet effet.

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en accordéon

Message par UsagiloveMamoru le Jeu 12 Juil 2012 - 15:23

Bonjour,
d'accord je vais essayer de faire ça. Je dois modifier un template en particulier ?

UsagiloveMamoru
***

Féminin
Messages : 125
Inscrit(e) le : 07/04/2008

UsagiloveMamoru a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en accordéon

Message par Xibition le Jeu 12 Juil 2012 - 16:10

Coucou, j'avais déjà essayé ce genre de profil en trouvant un tuto sur Never utopia je crois. Donc je te montre ce que j'avais fait.

Le template a modifier déjà est viewtopic_body. Il y aura aussi du css bien sur dont les transitions comme a dit Tupac.

Right Commençons par le template !

Allez dans Affichage > Templates > Général > viewtopic_body (affichage d'un sujet)

Repérez à la ligne 90 cette partie là :

Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <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 />
        <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Ceci correspond à toute la case de profil, à droite du message.

Remplacez par :

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>

N'oubliez pas de valider votre template. ajout

Right Allons ensuite ajouter le CSS :

Allez dans Affichage > Couleurs > Feuille css et copiez ce code :

Code:
.avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin-left: -10px;
  margin-right: 10px;
  overflow: hidden;
  background: #272726;
  border: 5px solid #3e1d19;
  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: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #6b664e;
  color: #c5bea0;
  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: 190px;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
  font-size: 18px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #94855c;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  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;
}


Vous pouvez ensuite adapter les couleurs de cadre, fond ou ombre portée, la police, etc..

J'ai défini une taille fixe à vos avatars 200*320, d'après le forum en question Wink

J'espère vous avoir aidé, cordialement.

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en accordéon

Message par UsagiloveMamoru le Jeu 12 Juil 2012 - 16:22

Ahhhh super merci beaucoup ça va bien m'aider !!
J'ai installé le code et tout marche correctement j'ai plus qu'à faire mes modifs merci ok

UsagiloveMamoru
***

Féminin
Messages : 125
Inscrit(e) le : 07/04/2008

UsagiloveMamoru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en accordéon

Message par Xibition le Jeu 12 Juil 2012 - 16:36

Ce n'est rien Welcome

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

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