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

Mar 14 Aoû 2012 - 17:09

Invité

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 :

Avoir un forum sous phpbb2.
Être le fondateur du forum.
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

Mar 14 Aoû 2012 - 17:10

Invité

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 > Message à gauche + avatar à droite + infos cachées 120814124800964735

• 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::  <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 />  {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> <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">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />  <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}   {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}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <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} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG} </td> </tr> </table> </td> </tr>  </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>

Code::  <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">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />  <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}   {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}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <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 />  {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> </tr>  </table> <br /> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">

• Enregistrez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010140246966

• Puis publiez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010201474051

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 > Message à gauche + avatar à droite + infos cachées 120814124800964735

• 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::  <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::  <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 Message à gauche + avatar à droite + infos cachées 120814010140246966

• Puis publiez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010201474051

>> 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 Message à gauche + avatar à droite + infos cachées 120814010140246966

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 > Message à gauche + avatar à droite + infos cachées 120814124800964735

• 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>  <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr>  {POLL_DISPLAY}   <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">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />  <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}   {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}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <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 />  {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> </tr>  </table> <br /> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">    <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr>    <tr align="center"> <td class="row1" colspan="3" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr>  <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>  <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>  </tr>   <tr> <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td> </tr>   </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>  <tr> <td colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr>  {POLL_DISPLAY}   <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">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />  <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}   {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}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <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 />  {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> </tr>  </table> <br /> <table width="100%" border="0" cellspacing="1" cellpadding="0">    <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr>    <tr align="center"> <td colspan="3" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr>  <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> </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>  <td align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>  </tr>   <tr> <td colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td> </tr>   </table>

• Enregistrez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010140246966

• Puis publiez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010201474051

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

Mar 14 Aoû 2012 - 17:12

Invité

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 > Message à gauche + avatar à droite + infos cachées 120814124800964735

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 />  {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>

• 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">  </div> <div class="avatar_infos">  </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">  {postrow.displayed.POSTER_AVATAR} </div> <div class="avatar_infos">   <span class="name"> {postrow.displayed.ONLINE_IMG}  <center> <strong>{postrow.displayed.POSTER_NAME}</strong>  <br /> {postrow.displayed.RANK_IMAGE}  </center> <br /><br />  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG}  <br /><br /> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}  {postrow.displayed.contact_field.CONTENT}  </span> </div> </div> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </td>

• Enregistrez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010140246966

• Puis publiez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010201474051

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 Message à gauche + avatar à droite + infos cachées 120814010140246966

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 > Message à gauche + avatar à droite + infos cachées 120814124800964735

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 Message à gauche + avatar à droite + infos cachées 120814010140246966

• Puis publiez votre template en cliquant sur Message à gauche + avatar à droite + infos cachées 120814010201474051

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 Message à gauche + avatar à droite + infos cachées 120814010140246966

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
BOOW

Ven 17 Aoû 2012 - 11:15

Bleufi

Age : 29Messages : 311

Ven 17 Aoû 2012 - 11:15

Merci pour le partage ;D

Mar 28 Aoû 2012 - 19:03

nuanciel

Age : 33Messages : 139

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:

Mar 28 Aoû 2012 - 21:02

SugarBuse

Age : 26Messages : 44

Mar 28 Aoû 2012 - 21:02

Superbe ! Merci !

Lun 3 Sep 2012 - 18:16

Mimi-Haine

Age : 25Messages : 32

Lun 3 Sep 2012 - 18:16

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

Dim 9 Sep 2012 - 15:24

LickingBoot

Age : 25Messages : 503

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.

Dim 9 Sep 2012 - 18:52

Cuicui

Age : 34Messages : 112

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.

Lun 10 Sep 2012 - 8:17

Ohani

Age : 37Messages : 43

Lun 10 Sep 2012 - 8:17

Merci bien ! ^~^ <3

Jeu 13 Sep 2012 - 12:04

Tchi

Age : 31Messages : 40

Jeu 13 Sep 2012 - 12:04

Wouaaah merci pour ce magnifique tuto *o* :friends:

Jeu 13 Sep 2012 - 21:54

TATACARO13

Age : 49Messages : 80

Jeu 13 Sep 2012 - 21:54

MERCI

Dim 16 Sep 2012 - 4:35

Keith

Age : 32Messages : 37

Dim 16 Sep 2012 - 4:35

Merciii

Mer 19 Sep 2012 - 18:10

Nanachu ♥

Age : 27Messages : 108

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 ! ♥

Ven 21 Sep 2012 - 18:11

ShuiLong

Age : 30Messages : 17

Ven 21 Sep 2012 - 18:11

Excellent tutoriel. Merci beaucoup !

Sam 22 Sep 2012 - 15:31

MyNameIsTanalia

Age : 27Messages : 25

Sam 22 Sep 2012 - 15:31

Merci !!

Mer 26 Sep 2012 - 0:35

Shymilly

Age : 31Messages : 14

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 :

Message à gauche + avatar à droite + infos cachées 1348615017-bug

Help please Sad

Dim 30 Sep 2012 - 12:41

Dalao`

Age : 26Messages : 26

Dim 30 Sep 2012 - 12:41

Lun 1 Oct 2012 - 21:16

crushed love

Age : 32Messages : 27

Lun 1 Oct 2012 - 21:16

Wouaaah merci pour ce magnifique tuto :love:

Sam 6 Oct 2012 - 3:49

xX~Miki~Xx

Age : 24Messages : 15

Sam 6 Oct 2012 - 3:49

Merci

Mer 10 Oct 2012 - 15:33

Jona'

Age : 25Messages : 65

Mer 10 Oct 2012 - 15:33

C'est juste énorme! Merci beaucoup :)

Ven 12 Oct 2012 - 22:13

RozenBreizh

Age : 33Messages : 1411

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.

Mer 31 Oct 2012 - 17:12

McIntosh

Age : 35Messages : 27

Mer 31 Oct 2012 - 17:12

Merci !

Lun 5 Nov 2012 - 15:09

•MYV382•

Age : 28Messages : 55

Lun 5 Nov 2012 - 15:09

Je veux voir ! *O*

Sam 10 Nov 2012 - 22:11

Alonely

Age : 30Messages : 43

Sam 10 Nov 2012 - 22:11

Merci

Contenu sponsorisé

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

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

Etape 2 : faire la mise en page du message

Etape 3 : mise en forme du profil

Etape 4 : mise en forme du haut des messages

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée