Effet slider sur le profil

3 participants

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

Résolu Effet slider sur le profil

Message par Blacksmoothie 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

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 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://2img.net/i/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

demeter1
Membre actif

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

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

Résolu Re: Effet slider sur le profil

Message par Destru723 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>
avatar

Destru723
**

Messages : 54
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 Jeu 25 Déc 2014 - 15:10

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

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

- Sujets similaires

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