Je te poste rapidement le tuto avant d'aller
^^
Finalement aligner le tire avec l'image du forum s'est avéré une petite prouesse, car l'image est comprise dans la variable de la description et les séparer n'est pas chose aussi aisée...
Il faut tout d'abord commencer par les titres des forums et les inclure dans une balise "span" (qui es en-ijgne, inline et non un bloc qui induirait un saut de ligne):
- Code:
<span class="forastitle">TITRE DU FORUM</span>
Ensuite les descriptions de forum que nous devons mettre dans un tableau afin qu'elles se détachent de leur image.
Donc dans la description du forum :
- Code:
<table align="center"><tr><td align="center" valign="middle">
<br /><br /><div class="descrip" align="center">
Test test test test test test test<br />
Test test test test test test test<br />
Test test test test test test test<br />
Test test test test test test test<br />
Test test test test test test test<br />
Test test test test test test test<br />
Test test test test test test test
</div>
<br />
</td></tr></table>
Ici le tableau contient aussi un bloc "div".
Il te suffira de copier coller ce code dans tous tes forum et de ne remplacer que le contenu "test".
Dans le template je pense que tu pourras t'y retrouver sans trop difficulté tout étant plus ou moins en place, afin que tu puisses ajouter le titre des catégories par exemple en te référant au tamplate par défaur:
- Code:
<table width="89%" border="0" cellspacing="0" cellpadding="1" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table width="89%" border="0" cellspacing="0" cellpadding="3" style="margin-top: 10px;"><tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> </th>
<th nowrap="nowrap" width="50"></th>
<th nowrap="nowrap" width="50"></th>
<th nowrap="nowrap" width="150"><div style="width:150px;"></div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr></table>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<table class="forumline" width="89%" border="0" cellspacing="1" cellpadding="3" style="margin: 4px;">
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding: 4px;">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table><tr>
<td align="center" valgn="middle">
<span class="rondo">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">
{catrow.forumrow.FORUM_DESC}
</span>
</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
</tr></table>
</td>
<td class="row3" align="center" valign="middle" height="50" style="width: 50px; padding: 3px;">
<span class="gensmall">{catrow.forumrow.TOPICS}</span><br />
<span class="gensmall">sujet(s)</span>
</td>
<td class="row2" align="center" valign="middle" height="50" style="width: 50px; padding: 3px;">
<span class="gensmall">{catrow.forumrow.POSTS}</span><br />
<span class="gensmall">post(s)</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<table align="center" style="width: 150px; padding: 3px;"><tr><td align="center" valign="middle">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
<!-- END catrow -->
Quant au CSS, il est relativement simple :
- Spoiler:
.rondo img {
border: 3px solid #000;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.forastitle {
display: inline-block;
width: 370px;
text-align: left;
white-space: pre;
border-bottom: 3px solid #000;
padding: 7px 0;
margin: 7px 0px 10px;
}
.descrip {
display: block;
width: auto;
text-align: center;
padding; 7px;
margin: 10px auto;
}
J'ai utiliser une image ronde de 100x100px sur un fond transparent de 100x100px aussi, placée dans le champ-image au-dessus de la description du forum.
Voilà, installe déjà ceci, et je reste à ta disposition en cas de question ou de modification.