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.


    Message à gauche + avatar à droite + infos cachées

    Partagez
    Invité

    le Mar 14 Aoû 2012 - 17:09

    Message à gauche + avatar à droite + infos cachées

    Ce tutoriel vous accompagnera pas à pas pour créer un style simple et épuré pour vos messages postés.

    Voilà ici un exemple du rendu final.


    Pour cela, plusieurs conditions :
    1. Avoir un forum sous phpbb2.
    2. Être le fondateur du forum.
    3. Avoir un minimum de patience et de temps : le tutoriel est long et plutôt compliqué ! Mais Never Utopia est là pour vous donner un coup de main en cas de gros souci !


    Allez, on commence tout de suite ! =) (Je vous mettrai des captures d'écran tout le long du tutoriel !)


    Merci de ne pas prendre le tutoriel, j'ai mis précisément 5h20 pour le faire de mes petites mains et avec mon petit cerveau !
    ©BOOW
    Invité

    le Mar 14 Aoû 2012 - 17:10

    Etape 1 : mettre le profil à droite et le message à gauche


    Etape 1 :
    Vos messages n'ont pour l'instant subit aucune modification. [IMAGE]

    >> Panneau d'administration > affichage > templates > général > viewtopic_body >

    • Cherchez le code ci-dessous et supprimez-le.
    Dans l'exemple, il n'y est pas. Mais si vous voulez laisser une partie qui marque "Auteur" et "Message", demandez dans la partie aide !
    Code:

       <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
       </tr>

    • Cherchez le code ci-dessous et remplacez-le par le deuxième ci-dessous.
    Cela permet de mettre le profil à droite et le message à gauche.
    Code:
    <!-- BEGIN displayed -->
       <tr class="post">
          <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>
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>
       </tr>
       <tr>
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
             <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
          </td>
          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
             <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>
          </td>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>
    <br />
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
       </tr>
       <!-- END first_post_br -->
       <!-- END displayed -->
    Code:

       <!-- BEGIN displayed -->
       <tr class="post">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>
          <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>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>
    <br />
    <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
       <!-- END first_post_br -->
       <!-- END displayed -->

    • Enregistrez votre template en cliquant sur
    • Puis publiez votre template en cliquant sur

    Votre profil devrait être à droite et votre message à gauche. [IMAGE]

    Etape 2 : faire la mise en page du message


    Etape 2 :
    >> Panneau d'administration > affichage > templates > général > viewtopic_body >

    • Cherchez le code ci-dessous et remplacez-le par le code dessous.
    Ici, on ajoute une "class" au tableau qui contient le message pour le paramétrer comme on le souhaite.
    Code:
    <!-- BEGIN displayed -->
       <tr class="post">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
    Code:
    <!-- BEGIN displayed -->
       <tr class="post">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">

    • Enregistrez votre template en cliquant sur
    • Puis publiez votre template en cliquant sur

    >> Panneau d'administration > affichage > images et couleurs > couleurs > feuille de style CSS

    A vous de paramétrer comme vous le souhaitez votre partie du message (couleur de fond, image de fond, coins arrondis, bordure...). Je mets un css que j'ai fait.
    Code:
    .post_message
    {
      /* Je mets ici (et vous aussi !) les paramètres pour configurer la partie des messages */
      background-color: #dbea8d; /* Couleur de fond */
      padding: 2%; /* Marge intérieure */
      border: 2px solid #a2ba25; /* Bordure de 2px en continu de couleur a2ba25 */
    }

    • Enregistrez votre CSS en cliquant sur

    Maintenant, il ne reste plus qu'à enlever les tours et le fond déjà présent qui n'est pas voulu (en gris avec les tours vert sur mes images).

    >> Panneau d'administration > affichage > templates > général > viewtopic_body >

    • Sur tout le "table", il faut enlever a plupart des marques de "class". Je m'explique. Dans ce code ci-dessous, il faut retirer une bonne partie de ce qui est sous la forme class="QUELQUECHOSE". Ce qui donne le code encore au-dessous ! (Attention, ne pas supprimer toutes les class non plus ! Regardez bien le 2e code !)
    Code:
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
       <tr align="right">
          <td class="catHead" colspan="3" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td width="9%" class="noprint"> </td>
                   <td align="center" class="t-title">
                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                   </td>
                   <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
                </tr>
             </table>
          </td>
       </tr>
       <!-- BEGIN topicpagination -->
       <tr>
          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
       </tr>
       <!-- END topicpagination -->
       {POLL_DISPLAY}
       <!-- BEGIN postrow -->
       <!-- BEGIN displayed -->
       <tr class="post">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>
          <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>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>
    <br />
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- END first_post_br -->
       <!-- END displayed -->
       <!-- BEGIN hidden -->
       <tr>
          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
       </tr>
       <!-- END hidden -->
       <!-- END postrow -->
       <!-- BEGIN no_post -->
       <tr align="center">
          <td class="row1" colspan="3" height="28">
             <span class="genmed">{no_post.L_NO_POST}</span>
          </td>
       </tr>
       <!-- END no_post -->
       <tr align="right">
          <td class="catBottom" colspan="3" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td width="9%" class="noprint"> </td>
                   <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
                   <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
                </tr>
             </table>
          </td>
       </tr>
    </table>
    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
       <tr>
          <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
          <!-- BEGIN topicpagination -->
          <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
          <!-- END topicpagination -->
       </tr>
       <!-- BEGIN switch_user_logged_in -->
       <!-- BEGIN watchtopic -->
       <tr>
          <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
       </tr>
       <!-- END watchtopic -->
       <!-- END switch_user_logged_in -->
    </table>
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
       <tr align="right">
          <td colspan="3" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td width="9%" class="noprint"> </td>
                   <td align="center" class="t-title">
                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                   </td>
                   <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
                </tr>
             </table>
          </td>
       </tr>
       <!-- BEGIN topicpagination -->
       <tr>
          <td colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
       </tr>
       <!-- END topicpagination -->
       {POLL_DISPLAY}
       <!-- BEGIN postrow -->
       <!-- BEGIN displayed -->
       <tr class="post">
          <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>
          <td {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>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>
    <br />
    <table width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- END first_post_br -->
       <!-- END displayed -->
       <!-- BEGIN hidden -->
       <tr>
          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
       </tr>
       <!-- END hidden -->
       <!-- END postrow -->
       <!-- BEGIN no_post -->
       <tr align="center">
          <td colspan="3" height="28">
             <span class="genmed">{no_post.L_NO_POST}</span>
          </td>
       </tr>
       <!-- END no_post -->
       <tr align="right">
          <td colspan="3" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td width="9%" class="noprint"> </td>
                   <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
                   <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
                </tr>
             </table>
          </td>
       </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
       <tr>
          <td valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
          <!-- BEGIN topicpagination -->
          <td align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
          <!-- END topicpagination -->
       </tr>
       <!-- BEGIN switch_user_logged_in -->
       <!-- BEGIN watchtopic -->
       <tr>
          <td colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
       </tr>
       <!-- END watchtopic -->
       <!-- END switch_user_logged_in -->
    </table>

    • Enregistrez votre template en cliquant sur
    • Puis publiez votre template en cliquant sur

    Vous devriez avoir votre cadre autour du message et ce, sans avoir de cadre autour du message ET du profil. [IMAGE]

    Note : si vous voulez mettre une marge extérieure à votre partie du message, il vous faudra modifier la taille de votre "table" dans votre template pour que le total marge + largeur soit égal à 100%. Pour plus d'informations, demandez Wink
    Invité

    le Mar 14 Aoû 2012 - 17:12

    Etape 3 : mise en forme du profil


    Etape 3 (HTML dans templates) :
    >> Panneau d'administration > affichage > templates > général > viewtopic_body >

    On va travailler dans le petit bout de code ci-dessous.
    Code:
    <td {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>

    • Pour commencer, on va supprimer tout ce qu'il y a entre les balises td.
    Comme ça, on collera les éléments au bon endroit au fur et à mesure.
    Code:
       <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
          </td>

    • On va mettre l'id du poster au tout début de la case.
    Pour ceux qui l'ignorent, les balises td permettent de créer une case dans un tableau.
    Code:
       <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <a name="{postrow.displayed.U_POST_ID}"></a>
          </td>

    • Puis on va créer une division qui contiendra notre avatar.
    Attribuez une class à cette division, comme ci-dessous. On paramètrera le CSS après avoir fait la structure.
    Code:
       <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <a name="{postrow.displayed.U_POST_ID}"></a>
             <div class="autour_avatar">
             </div>
          </td>

    • Dans cette div, on va faire deux autres div l'une sous l'autre.
    La première contiendra uniquement l'avatar et l'autre, tout ce que vous voudrez qui s'affiche.
    Code:
       <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <a name="{postrow.displayed.U_POST_ID}"></a>
             <div class="autour_avatar">
                                 <div class="avatar_image">
                   <!-- ICI SERA L'AVATAR -->
                               </div>
                               <div class="avatar_infos">
                   <!-- VOUS METTREZ ICI CE QUE VOUS VOULEZ VOIR APPARAÎTRE -->
                                    </div>
                         </div>
          </td>

    • A présent, on va mettre les codes dans les deux div.
    A vous de modifier la 2e div si vous voulez y voir apparaître d'autres choses !
    Code:
       <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <a name="{postrow.displayed.U_POST_ID}"></a>
             <div class="autour_avatar">
                                 <div class="avatar_image">
                   <!-- ICI SERA L'AVATAR -->
                                         {postrow.displayed.POSTER_AVATAR}
                               </div>
                               <div class="avatar_infos">
                   <!-- VOUS METTREZ ICI CE QUE VOUS VOULEZ VOIR APPARAÎTRE -->
                   <!-- class="name" permet à la police d'avoir une taille normale -->
                                         <span class="name">
                                                 {postrow.displayed.ONLINE_IMG} <!-- IMAGE EN LIGNE -->
                                                 <center>
                                                         <strong>{postrow.displayed.POSTER_NAME}</strong> <!-- NOM DU POSTEUR -->
                                               <br />
                                                       {postrow.displayed.RANK_IMAGE} <!-- RANG DU POSTEUR -->
                                                 </center>
                                                 <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} <!-- FEUILLE DE PERSO -->
                                            <br /><br />
                                            {postrow.displayed.PROFILE_IMG}
                      {postrow.displayed.PM_IMG}
                      {postrow.displayed.EMAIL_IMG}
                      <!-- BEGIN contact_field -->                   
                         {postrow.displayed.contact_field.CONTENT}
                      <!-- END contact_field -->
                                         </span>
                                    </div>
                         </div>
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>

    • Enregistrez votre template en cliquant sur
    • Puis publiez votre template en cliquant sur

    Ce que vous devez avoir ne doit pas encore bien ressembler au résultat final... Normal, il manque le CSS ! [IMAGE]

    Etape 3 (Mise en page avec le CSS) :
    Passons au CSS !

    >> Panneau d'administration > affichage > images et couleurs > couleurs > feuille de style CSS

    • Commençons par la div "autour_avatar".
    Postez ce code à la suite de ce que vous avez fait dans la partie 2. Et n'hésitez pas à mettre des annotations !
    Code:
    .autour_avatar
    {
      width: 200px; /* Mettre la largeur de votre avatar */
      height: 320px; /* Mettre la hauteur de votre avatar */
      overflow: hidden; /* Permet de cacher ce qui dépassera de la div */
      position: relative; /* Ne pas modifier */
      top: 0; /* Ne pas modifier */
      left: 0; /* Ne pas modifier */
    }

    • Ensuite, passons à la div "avatar_image".
    Toujours à la suite ! Ce code n'est pas drôle, on ne le modifie pas beaucoup...
    Code:
    .avatar_image
    {
      position: relative; /* Ne pas modifier */
      top: 0; /* Ne pas modifier */
      left: 0; /* Ne pas modifier */
      width: 100%; /* Ne pas modifier */
      height: 100%; /* Ne pas modifier */
      z-index: 0; /* Ne pas modifier */
    }

    • Puis paramétrons la div "avatar_infos".
    Encore à la suite. Ceci est la div qui va apparaître quand votre curseur sera sur l'avatar !
    Code:
    .avatar_infos
    {
      background-color: #ffffff; /* Couleur du fond de la div */
      position: absolute; /* Ne pas modifier */
      top: 0; /* Ne pas modifier */
      left: 0; /* Ne pas modifier */
      /* ATTENTION ! La somme des marges intérieures, extérieures et de la hauteur doit être égale à 100%. Comme la somme des marges avec la largeur ! */
      width: 96%; /* Largeur */
      padding-left: 2%; /* Marge intérieure gauche */
      padding-right: 2%; /* Marge intérieure droite */
      height: 100%; /* Hauteur */
      z-index: 100; /* Ne pas modifier */
      opacity: 0; /* Pour un effet d'apparition progressive. Si on veut juste un coulissement, mettre 100 à l'opacité. */
      margin-top: 320px; /* La marge extérieure haute doit être de la même taille que la hauteur de l'avatar. Cela permet de placer cette div juste au-dessous de l'avatar. */
      /* Pour les transitions. Faites des tests pour le temps ! (1s, 0.1s...) */
      -webkit-transition: all 0.8s;
      -moz-transition: all 0.8s;
      -o-transition: all 0.8s;
      -ms-transition: all 0.8s;
      transition: all 0.8s;
    }

    • Dernière étape, l'effet quand on passe le curseur !
    Code:

    .autour_avatar:hover > .avatar_infos
    {
      /* Si vous avez mis l'opacité à 100 pour avoir simplement un effet coulissant, supprimez les 4 lignes ci-dessous. */
      filter: alpha(opacity=85);
      -moz-opacity: 0.85;
      -khtml-opacity: 0.85;
      opacity: 0.85;
      margin-top: 0px; /* Ne pas modifier. Cela permet de supprimer la marge au-dessus de la div et ainsi, elle ira se placer sur l'avatar ! */
    }

    • Enregistrez votre CSS en cliquant sur

    Normalement, si vous avez bien tout suivi correctement (je sais que c'est un peu compliqué !), vous devriez voir les infos apparaître quand vous passez votre curseur sur l'avatar. [IMAGE]

    Etape 4 : mise en forme du haut des messages


    Etape 4 (HTML dans templates) :
    >> Panneau d'administration > affichage > templates > général > viewtopic_body >

    Même principe que précédemment, mais cette fois-ci vous avez besoin d'une image à vous ! C'est celle qui sera en haut à gauche et que vous devrez survoler pour afficher les informations du message.

    Nous allons travailler dans cet partie du template.
    Code:

            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                <tr>
                  <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                  <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="hr">
                      <hr />
                  </td>
                </tr>

    • Premièrement, supprimer la deuxième case qui est en fait le trait entre les informations et le message. Dans le code ci-dessus, supprimez donc le code ci-dessous.
    Vous pouvez laisser le trait en sautant cette étape.
    Code:
    <tr>
                  <td colspan="2" class="hr">
                      <hr />
                  </td>
                </tr>

    • Ensuite, dans la première case, nous allons faire une div qui contiendra les deux autres div (l'image et les infos... Ca ne vous rappelle rien ?).
    Après le td, créez une div avec une class. Attention ! Il faut ajouter un paramètre (colspan="2")dans la balise td pour qu'il n'y ait pas de bug.
    Code:
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                      <tr>
                              <td colspan="2">
                                        <div class="autour_message">
    <span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                  <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                                        </div>
                              </td>
                      </tr>
            <tr>

    • Puis nous allons créer les deux div dans celle que nous venons de faire. Comme à l'étape 3, pour l'avatar ! Une division vide qui contiendra l'image et l'autre avec toutes les infos (qui sont déjà dans le code parce qu'on ne les a pas supprimées !).
    Code:
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                      <tr>
                              <td colspan="2">
                                        <div class="autour_message">
                                                <div class="message_image">
                                                </div>
                                                <div class="message_infos">
    <span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                  <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                                                </div>
                                        </div>
                              </td>
                      </tr>
            <tr>

    Si on laisse comme ça, il y aura un souci au niveau de l'affichage des informations. Comme vous le voyez, parmi les informations ci-dessous, il y a deux td qui se baladent.
    Code:
    <span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                  <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}

    Si on les supprime, les boutons "éditer", "supprimer" et compagnie se retrouveront au-dessous du titre et de l'heure du message. Et ceci n'est pas désiré. Nous allons donc créer un tableau en toute simplicité pour que les deux cases soient collées. A la place du code ci-dessus, collez ceci :
    Code:
    <table><tr><td width="50%" ><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                  <td valign="top" nowrap="nowrap" width="50%"  class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</td></tr></table>

    • Enfin, nous allons simplement mettre l'image dans la première division !
    Remplacez "URL DE L'IMAGE" par votre propre url !
    Code:
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                      <tr>
                              <td colspan="2">
                                        <div class="autour_message">
                                                <div class="message_image">
                                                          <img src="URL DE L'IMAGE" />
                                                </div>
                                                <div class="message_infos">
    <table><tr><td width="50%"><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                  <td valign="top" nowrap="nowrap" class="post-options" width="50%"  align="right">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</td></tr></table>
                                                </div>
                                        </div>
                              </td>
                      </tr>
            <tr>

    • Enregistrez votre template en cliquant sur
    • Puis publiez votre template en cliquant sur

    Allez, plus que le CSS et c'est fini ! Wink

    Etape 4 (Mise en page avec le CSS) :
    Allez, c'est la dernière étape !

    >> Panneau d'administration > affichage > images et couleurs > couleurs > feuille de style CSS

    • Commençons par la div "autour_message".
    Postez ce code à la suite de ce que vous avez fait dans la partie 3. Et n'hésitez pas à mettre des annotations !
    Code:
    .autour_message
    {
      width: 100%; /* Ne pas modifier */
      height: 50px; /* Mettre la hauteur de votre image */
      overflow: hidden; /* Permet de cacher ce qui dépassera de la div */
      position: relative; /* Ne pas modifier */
      top: 0; /* Ne pas modifier */
      left: 0; /* Ne pas modifier */
    }

    • Ensuite, passons à la div "message_image".
    Code:
    .message_image
    {
      position: relative; /* Ne pas modifier */
      top: 0; /* Ne pas modifier */
      left: 0; /* Ne pas modifier */
      width: 100%; /* Ne pas modifier */
      height: 100%; /* Ne pas modifier */
      z-index: 0; /* Ne pas modifier */
      text-align: right;
    }

    • Puis paramétrons la div "message_infos".
    Code:
    .message_infos
    {
      background-color: #ffffff; /* Couleur du fond de la div */
      position: absolute; /* Ne pas modifier */
      top: 0; /* Ne pas modifier */
      left: 0; /* Ne pas modifier */
      /* ATTENTION ! La somme des marges intérieures, extérieures et de la hauteur doit être égale à 100%. Comme la somme des marges avec la largeur ! */
      width: 96%; /* Largeur */
      padding-left: 2%; /* Marge intérieure gauche */
      padding-right: 2%; /* Marge intérieure droite */
      height: 100%; /* Hauteur */
      z-index: 100; /* Ne pas modifier */
      opacity: 0; /* Pour un effet d'apparition progressive. Si on veut juste un coulissement, mettre 100 à l'opacité. */
      margin-left: 100%; /* La marge extérieure gauche doit être de la même taille que la division, soit 100%. Cela permet de placer cette div juste à droite de l'image. */
      /* Pour les transitions. Faites des tests pour le temps ! (1s, 0.1s...) */
      -webkit-transition: all 0.8s;
      -moz-transition: all 0.8s;
      -o-transition: all 0.8s;
      -ms-transition: all 0.8s;
      transition: all 0.8s;
    }

    • Dernière étape, l'effet quand on passe le curseur !
    Code:
    .autour_message:hover > .message_infos
    {
      /* Si vous avez mis l'opacité à 100 pour avoir simplement un effet coulissant, supprimez les 4 lignes ci-dessous. */
      filter: alpha(opacity=85);
      -moz-opacity: 0.85;
      -khtml-opacity: 0.85;
      opacity: 0.85;
      margin-left: 0px; /* Ne pas modifier. Cela permet de supprimer la marge à gauche de la div et ainsi, elle ira se placer sur l'avatar ! */
    }

    • Enregistrez votre CSS en cliquant sur

    Si tout est boen, vous devriez voir l'effet apparaître également sur votre forum ! [IMAGE]


    Voilà ! C'est enfin fini !
    J'espère que vous avez apprécié mon tutoriel. C'est du travail, c'est long et fastidieux, je sais ! =) Bravo si vous êtes allés jusqu'à la fin, c'est un bon esprit de persévérance ! =D

    Si vous avez des questions, n'hésitez pas !

    Une nouvelle fois, ne pas prendre le tutoriel ! Merci Very Happy
    ©BOOW
    Bleufi
    FémininAge : 21Messages : 311

    le Ven 17 Aoû 2012 - 11:15

    Merci pour le partage ;D



    nuanciel
    FémininAge : 25Messages : 112

    le Mar 28 Aoû 2012 - 19:03

    Magnifique Boow. Tu es très doué! Je crois que je vais essayé de faire ça pour mon forum. :love:
    SugarBuse
    FémininAge : 18Messages : 42

    le Mar 28 Aoû 2012 - 21:02

    Superbe ! Merci !
    Mimi-Haine
    FémininAge : 17Messages : 32

    le Lun 3 Sep 2012 - 18:16

      Ouahhhh, merci beaucoup ~ C'est vraiment du beau travail *-*



    LickingBoot
    FémininAge : 17Messages : 461

    le Dim 9 Sep 2012 - 15:24

    Trop COOOl ! Merci

    EDIT : Et-ce que quelqu'un peut me fournir, tous les codes à mettre en CSS et tous le template ? Merci :/Parce que là, j'y arrive vraiment pas.



    Cuicui
    FémininAge : 26Messages : 112

    le Dim 9 Sep 2012 - 18:52

    Coucou,
    Donc j'ai fait le tutoriel,
    Tout se passe bien sauf un petit bug,
    J'ai deux balises qui sont en rouges dans le template,
    Je peux le mettre en code ou bien te l'envoyer pour voir ou est l'erreur ?

    Merci.



    Ohani
    FémininAge : 29Messages : 37

    le Lun 10 Sep 2012 - 8:17

    Merci bien ! ^~^ <3



    Tchi
    FémininAge : 24Messages : 39

    le Jeu 13 Sep 2012 - 12:04

    Wouaaah merci pour ce magnifique tuto *o* :friends:
    TATACARO13
    FémininAge : 41Messages : 80

    le Jeu 13 Sep 2012 - 21:54

    MERCI





    Keith
    MasculinAge : 24Messages : 37

    le Dim 16 Sep 2012 - 4:35

    Merciii
    Nanachu ♥
    FémininAge : 19Messages : 107

    le Mer 19 Sep 2012 - 18:10

    Oh là, mais j'suis tombé sur un codage parfait... Je cherchais un moyen de mettre en page correctement mes messages et ainsi rendre les rps plus lisibles. Décidément, je suis chanceuse ce soir ! C'est avec une joie hors du commun que je vais me servir de ton tuto. Merci mille fois ! ♥
    ShuiLong
    FémininAge : 22Messages : 17

    le Ven 21 Sep 2012 - 18:11

    Excellent tutoriel. Merci beaucoup !
    MyNameIsTanalia
    FémininAge : 19Messages : 25

    le Sam 22 Sep 2012 - 15:31

    Merci !!
    Shymilly
    FémininAge : 23Messages : 14

    le Mer 26 Sep 2012 - 0:35

    Je voulais t'envoyer un MP mais je ne peux pas n'ayant pas asse de messages !
    J'ai un gros bug en faites, j'ai fais absolument tout ce que tu as dis, je l'ai même refais plusieurs fois mais à chaque fois, j'ai ça :



    Help please Sad
    Dalao`
    FémininAge : 18Messages : 26

    le Dim 30 Sep 2012 - 12:41


        Dites, est-ce possible de mettre seulement la partie profile au passage de la sourie sur l'avatar ?
        Si vous comprenez ce que je vous dire ? ._.



    crushed love
    FémininAge : 24Messages : 27

    le Lun 1 Oct 2012 - 21:16

    Wouaaah merci pour ce magnifique tuto :love:
    xX~Miki~Xx
    FémininAge : 16Messages : 15

    le Sam 6 Oct 2012 - 3:49

    Merci



    Jona'
    MasculinAge : 17Messages : 65

    le Mer 10 Oct 2012 - 15:33

    C'est juste énorme! Merci beaucoup :)



    Rozenbrez
    FémininAge : 25Messages : 1175

    le Ven 12 Oct 2012 - 22:13

    Franchement de tous les codages de profil que j'ai put voir je trouve que ton codage est le plus classe et le plus sympathique qui soit. Merci de le partager.



    McIntosh
    FémininAge : 27Messages : 27

    le Mer 31 Oct 2012 - 17:12

    Merci !
    •MYV382•
    FémininAge : 20Messages : 55

    le Lun 5 Nov 2012 - 15:09

    Je veux voir ! *O*
    Alonely
    MasculinAge : 22Messages : 43

    le Sam 10 Nov 2012 - 22:11

    Merci
    Contenu sponsorisé

    Aujourd'hui à 1:22


      La date/heure actuelle est Lun 5 Déc 2016 - 1:22