AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    no-one-is
    MasculinAge : 41Messages : 5

    le Jeu 7 Fév - 1:42

    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 Wink

    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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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 Wink

      La date/heure actuelle est Dim 4 Déc - 21:23