Mise en forme des catégories

[Lady doll]

Bonjour,
voilà j'aimerais tester une mise en forme des catégories, manque de chance, moi et les templates ne sommes pas du tout amis x) Voici un schéma de ce que j'aimerais pour mes catégories, en espérant que quelqu'un pourrait m'aider !

→ https://i.servimg.com/u/f45/16/45/82/56/catash10.png

Merci d'avance ♥

[Invité]

Bonjour,

Dans le template Index_box,
1. Supprimez:

Code:

<th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>

Et remplacez:

Code:

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

par:

Code:

<th nowrap="nowrap" width="180"><div style="width:180px;"></div></th>   
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

2. Supprimez:

Code:

<td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>

Et remplacez:

Code:

<td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

par:

Code:

<td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}
                          <br />{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
      </td>

3. Inversez les élements:
Ceci:

Code:

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <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">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</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>
         
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}
                          <br />{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
      </td>

devient:

Code:

<td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}
                          <br />{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</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>
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>

4. Ajoutez une div pour l'apparence du dernier message:
Ceci :

Code:

         <span class="gensmall">{catrow.forumrow.LAST_POST}
                          <br />{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
           

devient:

Code:

<div class="lastm">
         <span class="gensmall">{catrow.forumrow.LAST_POST}
                          <br />{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
            </div>

Et ajoutez dans la feuille de style CSS:

Code:

.lastm{
border: 1px solid #000;
text-align: center;
background: #CCC;
padding: 3px;
}

Ligne 20 dans le template, remplacez: cellspacing="1" par cellspacing="0".

Résultat obtenu:

[Lady doll]

Merci beaucoup Azami ! superbe travail que voilà *o*
Rapide et efficace ~
J'aurais une autre chose à demander si cela est possible... Comment retirer le fond de titre de la catégorie ainsi que la bordure ? Est-il possible d'arrondir les angles ? ^^

[Invité]

Les modifications peuvent se faire via la feuille de style, mais elles n'agiront pas que sur l'index, donc à tester:
Pour le fond des titres:

Code:

th{
  background: none;}

Pour les arrondis:

Code:

.forumline{
  border-radius: 20px;
  padding: 5px;}

Pour la bordure, il suffit de retirer la Couleur du cadre des tables, mais là aussi ça agit ailleurs que sur l'index, donc à voir.

Bien sincèrement.

[Lady doll]

Merci infiniment Azami, c'est parfait ! =D
Si tu veux un aperçu de ton travail...

Spoiler:

Un gros câlin rien que pour toi, parce que tu le mérite ♥