Effet slider sur le profil

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

Résolu Effet slider sur le profil

Message par Blacksmoothie le Mer 24 Déc 2014 - 16:25

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : Depuis aujourd'hui
Lien du forum : http://twinscowuniversity.forumactif.com/

Description du problème

Bonjour, bonjour!
Alors voila, le problème est assez simple, c'est que j'aimerais faire un effet slider sur le profil, mais que je ne sais pas comment faire.
Pour être plus précise, j'aimerais que lorsque je passe ma souris sur l'avatar d'un membre, il parte sur le côté gauche afin de laisser voir ses statistiques (nombre de messages, date d'inscription, etc...) Quelqu'un pour m'aider?


Dernière édition par Blacksmoothie le Jeu 25 Déc 2014 - 15:15, édité 1 fois

Blacksmoothie
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 20/12/2014

http://twinscowuniversity.forumactif.com/
Blacksmoothie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet slider sur le profil

Message par demeter1 le Mer 24 Déc 2014 - 17:17

Bonjour,

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

sur un template non modifié, repérez cette partie :

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>


et remplacez la 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>

le css maintenant ( à vous de le modifier à votre convenance)

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


Dernière édition par demeter1 le Jeu 25 Déc 2014 - 14:04, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8108
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet slider sur le profil

Message par Destru723 le Jeu 25 Déc 2014 - 13:50

Personnellement le code est introuvable;
le code que j'ai à la ligne 90 n'a rien a voir:
Code:
<div class="pagination">
      {PAGE_NUMBER}
      &nbsp;•&nbsp;
      <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
      <!-- BEGIN switch_plus_menu -->
      &nbsp;•&nbsp;
      <script type="text/javascript">//<![CDATA[
         var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
         var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
         var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
         var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
         var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
         var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
         insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
   </div>

Destru723
**

Messages : 53
Inscrit(e) le : 20/09/2014

http://menacetosociety.probb.fr/
Destru723 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet slider sur le profil

Message par Blacksmoothie le Jeu 25 Déc 2014 - 15:10

J'ai réussis, merci à vous ^^

Blacksmoothie
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 20/12/2014

http://twinscowuniversity.forumactif.com/
Blacksmoothie 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