Avatar qui coulisse avec feuille perso' derrière en phpBB3

[lunasims57]

EDIT : finalement je n'ai pas besoin que tout le profil soit caché, seulement les champs de la feuille de personnage.


Bonjour !

Vu qu'en phpBB3 nous avons maintenant accès au templates, j'ai voulu ajouter un effet d'avatar qui glisse quand la souris passe dessus pour laisser apparaître les informations de profil.

Bref j'ai suivi les étapes du sujet suivant que j'avais déjà essayé sous phpBB2 : https://forum.forumactif.com/t339094-info-de-profil-cache-derriere-l-avatar

En gros, je dois changer ça :

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>

En ça :

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>

Mais j'avais pas pensé que mes templates étaient différentes... Je crois avoir repéré la partie de mon viewtropic-body qui correspond au profil et à l'avatar :

Code:

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 <dl>
 <dt>
 {postrow.displayed.POSTER_AVATAR}
 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd><br /></dd>
 <dd>
 <!-- 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}
 </dd>
 <dd><br /></dd>
 <dd>
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>

Quelles modifications dois-je faire pour que l'avatar coulisse et laisse apparaître les différents champs du profil derrière ? J'ai peur de faire des bêtises alors je n'ose pas y toucher moi même !

[lunasims57]

Je me permets un petit up !

EDIT : s'il n'est vraiment pas possible de faire l'effet que je cherche, est-ce possible de mettre le profil en spoiler dans les messages ?

[lunasims57]

Je remonte !

[lunasims57]

Up du jour !
Je suis sûre que la réponse à ma question constituera un grand pas pour l'humanité !

[lunasims57]

Upounet !

[lunasims57]

Up !
J'aurais peut-être dû poster ça dans Problème avec un code !

[lunasims57]

Je remonte.

[lunasims57]

Nyup !

[lunasims57]

Up du jour ♪

[lunasims57]

Ze remonte !

[wims]

Bonjour,

Avant tout, n'oublie pas de faire une sauvegarde de ton template viewtopic_body et de ta CSS s'ils ont été modifiés (si c'est pas le cas, tu peux toujours récupérer le template d'origine).

Donc ce que j'ai fait sur mon forum, j'ai rajouté un div entre ces lignes de mon template view_topicbody (ici on je l'ai appellé scores) :

Code:

<div class=scores><dd>Survolez pour voir les derniers scores</dd>
<dd><img src=http://i58.servimg.com/u/f58/16/61/47/63/rangad10.png></dd>
<!-- BEGIN profile_field -->
<dd>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}</dd>
<!-- END profile_field -->
</div>

Ensuite sur la CSS :

Code:

.scores {
  display:block;
  margin-top:0px;
  height:65px; /* A ajuster */
  overflow:hidden;
  -webkit-transition:all 0.2s;
  -moz-transition:all 0.2s;
  transition:all 0.2s;
}

.scores:hover {
  display:block;
  position:relative;
  height:178px; /* A ajuster */
  -webkit-transition:all 0.2s;
  -moz-transition:all 0.2s;
  transition:all 0.2s;
}

Il faudra que tu ajustes en fonction de ton forum les 2 valeurs height (la première hauteur laissant apparaître les premières lignes que tu veux, par exemple le nombre de messages, etc, la seconde laissant apparaître tout le champ du profil et feuille de perso si ça a été coché).

Tu peux aussi ajuster avec un max-height, mais dans ce cas tu n'auras pas l'effet de transition (le profil complet apparaîtra d'un coup et c'est pas très classe).

J'espère que ça t'aidera !

[lunasims57]

Ooh merci de m'avoir répondu !

Mais c'est bizarre, certaines balises sont devenues rouges regardez :


Sinon le code marche très bien, merci ! J'ai juste dû adapter le CSS pour Firefox que j'utilise, au début j'ai cru que ça marchait pas du coup.

Ça aurait été plus stylé derrière l'avatar mais cet effet me plaît bien en tout cas, merci beaucoup de m'avoir passé tes codes ! :3

EDIT ; je coche résolu, même si j'ai ces trucs rouges ça marche donc c'est pas grave.