 |   | nirupan Membre

Age: 18 Nombre de messages: 597 Localisation: Paris Emploi/loisirs: sans emploie Humeur: ca peut aller Date d'inscription: 18/07/2008
Remerciements reçus: 21
|
| Sujet: phpbb2: refonte de l'Affichage des sujets 31/1/2010, 18:00 Par : nirupan | |
| Hello, Pour ce tuto, je vais vous apprendre a faire un affichage qui ressemble à celui-ci :  Ouvrez votre template, topics_list_box, et remplacez tout par : | Code: | <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection --> <script type="text/javascript"> function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() { var all_checked = true; for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) { if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') { all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked; } } document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked; } function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() { for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) { if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') { document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked; } } } </script> <!-- END multi_selection -->
<table class="" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr height="28"> <th width="100%" height="28" style="background-image: url('http:ADRESS_DE_VOTRE_IMAGE'); background-position: top left; padding: 1px;" align="center" colspan="2"><span class="copyright"> {topics_list_box.row.L_TITLE} </span></th> <!-- BEGIN multi_selection --> <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th> <!-- END multi_selection --> </tr> <tr> <td style="border-bottom: 1px solid #couleur; border-right: 5px solid #couleur; border-left: 5px solid #couleur; padding: 1px;" class="row1" colspan="3" align="right"><span class="gensmall">{PAGINATION}</span></td> </tr> <!-- END header_table --><!-- BEGIN header_row --> <tr> <td style="border-bottom: 1px solid #couleur; padding: 1px;" class="row3" colspan="3"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td> </tr> <!-- END header_row -->
<!-- BEGIN topic --> {topics_list_box.row.END_TABLE_STICKY} <tr class="mycel"> <!-- BEGIN single_selection --> <td style="background-color: #couleur; border-bottom: 1px solid #couleur; padding: 1px;" class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td> <!-- END single_selection --> <td style="border-bottom: 1px solid #couleur; border-right: 1px dashed #couleur; border-left: 5px solid #740000; padding: 3px;" width="440" height="55"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /><div class="topictitle"> {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}Le sujet "<h2 class="topic-title"> <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> </h2>" </div> <span class="postdetails"> a reçu {topics_list_box.row.REPLIES} messages</span><span class="postdetails"> et a été vu {topics_list_box.row.VIEWS} fois</span><!-- BEGIN switch_description --> <span class="genmed"> <br /> {topics_list_box.row.topic.switch_description.TOPIC_DEscriptION} </span> <!-- END switch_description --> <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span></td>
<td style="border-bottom: 1px solid #couleur; border-right: 5px solid #couleur; padding: 3px;" width="440" height="55"> <span class="postdetails"> Derniers messages posté {topics_list_box.row.LAST_POST_TIME} par {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span> </td>
<!-- BEGIN multi_selection --> <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td> <!-- END multi_selection --> </tr> <!-- END topic --><!-- BEGIN no_topics --> <tr> <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td> </tr> <!-- END no_topics --><!-- BEGIN bottom --> <tr> <td class="" colspan="{topics_list_box.row.COLSPAN}" valign="middle"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="border-left: 5px solid #couleur; border-top: 1px solid #740000; background-color: #couleur"> <span class="gensmall">{PAGINATION}</span></td> <td style="border-right: 5px solid #couleur; border-top: 1px solid #740000; background-color: #couleur" align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table><img src="http:ADRESS_DE_VOTRE_IMAGE" height="6" width="888" /> </td> </tr> <!-- END bottom --><!-- BEGIN footer_table --> </table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box --> |
Il ne reste plus qu'a changer les tailles, les images et les couleurs selon vos besoin et voilà^^ Si vous voulez ajouter un effet de phpbb3, collez ça dans votre css :
| Code: | .mycel { background-color: #couleur; background-image: url(''); background-repeat: repeat-y; background-position: right; } .mycel:hover { background-color: #couleur; background-image: url(''); background-repeat: repeat-y; background-position: left; } |
C'est tout, bye
EDIT : Seul petit inconvénient, vous ne pourrez plus séparer les post-it et annonces par les tableaux
|
|