Demande de code pour catégorie

[lilwik.]

Bonjour.

Alors voilà, j'ai un forum en construction et j'aimerai bien changer l’apparence de mes catégories.

J'aimerai bien qu'elle soit disposées ainsi :



Es-ce que quelqu'un connait les codes ? ^^

Merci d'avance.

[Invité]

Bonjour,

Dans le template Index_box,
1. Supprimer les en-tête:
Supprimez:

Code:

<th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

2. Supprimer les colonnes superflues:
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>

3. Inverser image et dernier message:
Remplacez:

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}</span>
      </td>

par:

Code:

<td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</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. Encadrer les derniers messages et les descriptions:
Remplacez:

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>

par :

Code:

<div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>

Et:

Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

par :

Code:

<div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>

5.Ajouter le haut et le bas des catégories:
Remplacez:

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

par :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="hautcat"></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

Et:

Code:

<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

par :

Code:

<!-- BEGIN tablefoot -->
</table><div class="bascat"></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

6. Déplacer le titre des catégories:
Remplacez:

Code:

<div class="hautcat"></div>

par

Code:

<div class="hautcat"> {catrow.tablehead.L_FORUM} </div>

et supprimez :

Code:

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

7. Dans la feuille de style CSS ajouter le style:
PA> Affichage >couleur > feuille de style CSS, ajoutez et personnalisez:

Code:

.forumlink{
display: block;
text-align: center;
margin-bottom: -8px;}


.lastm{
background: grey;
border: 1px solid black;
border-radius: 91px;
padding: 5px;
padding-top: 50px;
margin: 5px;
width: 125px;
height: 80px;}

.descrip{
background: grey;
border: 1px solid black;
border-radius: 11px;
padding: 5px;
margin: 5px;
}

.hautcat{
background: url('http://2img.net/i/fa/subsilver/category.gif');
height: 30px;
}

.hautcat h2{
text-align: center;
margin-top:-10px;
}

.bascat{
background: url('http://2img.net/i/fa/subsilver/category.gif');
height: 30px;
}


Bien sincèrement.

[lilwik.]

Merci beaucoup.

(Seulement je voulais mettre les noms des catégories dans les "marges" en haut, mais vu que c'est tout le temps la même image qui est utilisé pour chaques catégories, ça ne marche aps, es-ce que c'est possible de changer ça ? ^^

[Invité]

Bonjour,

Je n'ai pas compris ce que vous souhaitez, désolée . En fait vous voulez une image différente pour chaque haut de catégorie?

Bien sincèrement.

[lilwik.]

Non mais ce n'est pas grave. ;à Oui voilà c'était ça.

[Invité]

Ok, dans ce cas, il faut placer l'image à la place du titre de chaque catégorie, en utilisant le code suivant:

Code:

<img src="URL de l'image" />

Et dans le CSS, retirer l'image de .hautcat, et régler la hauteur en fonction de la hauteur de vos images de titre.

Bien sincèrement.

[lilwik.]

Merci.