Effet slider sur le profil

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?

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 />  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {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"> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {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; }

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}  •  <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>   •  <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}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script>  </div>

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

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

Effet slider sur le profil