Sky modo
Messages : 34 Date d'inscription : 12/10/2013 Age : 41 Localisation : do brazil
| Sujet: Mise en forme des sujets (forme 1) Ven 23 Jan - 5:14 | |
| Rappel: vous devez aller vérifier le réglage suivant dans votre panneau d'admin : "Général" > "Messages et Email" > Configuration" => Séparer les annonces et post-it des messages" => NON
I/ S'adapter à votre "forumline" Qu'est-ce que le "forumline" ? Il s'agit de l'attribut qui met en forme l'ensemble des cadres du forum. Si vous jetez un oeil dans les templates, vous verrez que - Code:
-
<table class="forumline">
est présent partout. Ca va de la mise en forme du petit cadre de recherche apparaissant lorsque vous cliquez sur le bouton de navigation "Rechercher" jusqu'au bloc de catégorie en passant par l'encadré des options sous les sujets et les messages. Ce cadre se retrouve partout,
vous devez impérativement vous appliquer sur la mise en forme du "forumline" avant de faire quoi que ce soit.
II/ Modification du Template
Rappel: P.A --> affichage --> templates -->"topics_list_box". - 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 -->
<div class="bloc_sujets"> <!-- BEGIN multi_selection --> <span 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" /></span> <!-- END multi_selection --> <!-- BEGIN pagination --> <span align="right"><span class="gensmall">{PAGINATION}</span></span> <!-- END pagination --> <!-- END header_table --><!-- BEGIN header_row --> <!-- END header_row --> <!-- BEGIN topic --> {topics_list_box.row.END_TABLE_STICKY} <table class="sujets"><tr> <!-- BEGIN single_selection --> <td 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><span class="icones_sujets"><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}" /></span></td> <!-- BEGIN icon --> <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td> <!-- END icon --> <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%"> <div class="topictitle"> {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE} <h2 class="topic-title"> <a class="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> </h2> </div> <!-- 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 class="row3" align="center" valign="middle"><span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span></td> <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="sujet_last">{topics_list_box.row.LAST_POST_TIME}<br />{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></table> <div class="sujets_stats"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></div> <!-- END topic --><!-- BEGIN no_topics --> <table><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></table> <!-- END no_topics --><!-- BEGIN bottom -->
<br /><br /> <div class="pages"><span class="gensmall">{PAGINATION}</span> <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div> <!-- END bottom --><!-- BEGIN footer_table --> </div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
III/ Mise en forme par le CSS - Code:
-
/* MISE EN FORME DES LISTES DE SUJETS */
.bloc_sujets { width: 950px; margin: auto; background: #dfdfdf; border: 1px solid #ececec; box-shadow: 0px 0px 3px #868686; -o-box-shadow: 0px 0px 3px #868686; -moz-box-shadow: 0px 0px 3px #868686; -webkit-box-shadow: 0px 0px 3px #868686; -htm-box-shadow: 0px 0px 3px #868686; padding: 5px; } .sujets { background: #ececec; border: 1px dotted #ffffff; padding: 3px; } .topictitle { font-variant: small-caps; font-size: 12px; } .sujets_auteur { display: block; width: 200px; font-size: 11px; } .sujet_last { display: block; width: 180px; height: 40px; background: #f4f4f4; border-left: 3px solid #9e9e9e; border-right: 3px solid #9e9e9e; padding-top: 10px; font-size: 11px; } .sujets_stats { width: 900px; text-align: right; margin-bottom: 5px; } .sujets_stats_contenu { font-size: 10px; color: #a4a4a4; }
Pour changer les éléments de place comme par exemple mettre le bloc du dernier message avant l'auteur sur la ligne, vous devez aller dans le template et sélectionner la case correspondante. Les cases c'est tout ce qu'il y a entre : - Code:
-
<td>Contenu de la case ... </td>
(N'oubliez pas les "td" x).
Pour revenir à votre "forumline" : si vous souhaitez que ce soit la mise en forme de votre "forumline" qui soit le cadre de votre liste, il vous suffit de modifier : - Code:
-
<div class="bloc_sujets">
par: - Code:
-
<div class="forumline">
(ce code se situe au environ de la ligne 22 de votre template modifié).
Merci Sky
| |
|