[template] Organisation du profil dans un sujet déplacé à droite

Bonjour,

Une petite astuce qui viens en complément de [Template] Inverser le profil et le message dans un sujet disponible dans cette rubrique.

Lors de l’invention message/sujet, l'on se retrouve avec du côté droit, le profil, et en dessous des messages à gauche les boutons (Mp, Profil, liens, ect)

Je vous propose de regrouper tout cela dans la partie profil de droite (du coup) mais c'est adaptable dans le cas où le profil reste à gauche

Dans un premier temps, on cherche la partie des boutons :

Code:


<table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
      </td>
   </tr>
</table>


Que l'on coupe et garde au chaud dans un coin.

Ensuite, l'on identifie cette cellule

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>


C'est dans cette dernière que l'on va faire les modifications

Dans cette cellule, nous allons créer un nouveau tableau de deux lignes (afin de conserver une hiérarchie dans la partie profil)
Avec dans la première ligne les informations de nom, de rang, d'avatar
Dans la seconde les boutons de contact.

Code:


<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <table>
      <tr>
         <td>
         <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 />
         </td>
         <td valign="middle">
            <br/>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->{postrow.displayed.ONLINE_IMG}
            <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
         </td>
      </tr>
   </table>
</td>


Il est tout à fait possible, dans la variante que j'utilise, de modifier la largeur du profil en modifiant la largeur d'une image "invisible" ici, 150px

Code:


<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />


Il est aussi possible comme dans l'exemple joint, de désolidariser la partie "en ligne"

Dans ce cas, il faudra créer un tableau de deux lignes avec deux colonnes sur la première, et une sur la seconde.

Code:



      <td valign="top" class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR}>
         <div class="profi">
            <table width="100%" border="0">
               <tr>
                  <td  valign="top" width="150">{postrow.displayed.POSTER_AVATAR}<br/>
                     <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}<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>
                  </td>
                  <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" align="right">
                     {postrow.displayed.ONLINE_IMG}
                  </td>
               </tr>
               <tr>
                  <td colspan="2" valign="middle">
                     <br/>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                  </td>
               </tr>
            </table>
         </div>

            <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:250px;height:1px" />
          </td>


Le tout fonctionne avec le template "viewtopic_body"

Aperçu de ce que cela donne sur mon forum de test



En espérant pour ma première, ne pas avoir fait d'erreurs dans la recopie de mes documents