Voici un petit LS de catégories très simples que j'ai faites pour la demande de Shakespeare.

Pour voir l'aperçu : cliquez ici.

Ce LS est en deux parties.

• Tout d'abord, nous allons installer les catégories dans le template.
  
• Puis, nous allons mettre en forme les catégories à l'aide du CSS.

1. Les catégories (Template Index_Box)

Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, on va entièrement remplacer le template "Index_Box" par ceci :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" 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 -->
<div class="categorie">
  <div class="cate_title">
    {catrow.tablehead.L_FORUM}
  </div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
  <div class="forum_bloc">
    <div class="forum_title">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
        {catrow.forumrow.FORUM_NAME}
      </a>
    </div>
    <div class="forum_stats">
      {catrow.forumrow.POSTS} messages et {catrow.forumrow.TOPICS}&nbsp;sujets
    </div>
    <div style="clear: both;"></div>
    <div class="forum_desc">
      <div class="forum_desc_desc">
        {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="forum_middle_bloc">
      <div class="forum_old_new_lock_img">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </div>
      <div class="forum_last_mess">
        {catrow.forumrow.LAST_POST}
      </div>
    </div>
    <div class="forum_sous_forums">
      <div class="forum_sous_forums_over">
        <span id="forum_sf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <script type="text/javascript">jQuery('#forum_sf').html(jQuery('#forum_sf').html().replace(/, /g,',<br />')).removeAttr('id');</script>
      </div>
    </div>
    <div style="clear: both;">
    </div>
  </div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->

2. Mise en forme (CSS)

Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :

Code:

/**************************************** DÉBUT DES CATÉGORIES ****************************************/

/*Bloc de catégorie*/
.categorie {
  width: 790px;
  margin: auto;
  margin-bottom: 15px;
  color: #656565;
}

/*Liens des catégories*/
.categorie a, .categorie a.gensmall, .categorie .gensmall a {
  text-decoration: none!important;
  color: #757575;
}
/*Liens survolés des catégories*/
.categorie a:hover, .categorie a.gensmall:hover, .categorie .gensmall a:hover {
  text-decoration: none!important;
  color: #a5a5a5;
}

/*Bloc du titre de catégorie*/
.cate_title {
  margin: auto;
  border-bottom: 8px double black;
  margin-bottom: 10px;
  text-align: center;
}
/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  margin: 0px;
  margin-bottom: 5px;
  padding: 0px;
  font-family: verdana;
  font-weight: normal;
  font-size: 30px;
  text-align: center;
  color: #656565;
}


/*Bloc de forum*/
.forum_bloc {
  width: 790px;
  height: 144px;
}

/*Bloc de titre de forum*/
.forum_title {
  float: left;
  width: 360px;
  border-bottom: 2px solid black;
  height: 29px;
  text-align: left;
}
/*Titre de forum*/
a.forumlink {
  display: inline-block;
  font-family: Verdana;
  color: #757575!important;
  font-size: 24px;
  font-weight: normal;
}
/*Titre survolé de forum*/
a.forumlink:hover {
  color: #a5a5a5!important;
}

/*Statistiques*/
.forum_stats {
  float: left;
  width: 440px;
  border-bottom: 2px solid black;
  height: 12px;
  padding-top: 17px;
  margin-left: -20px;
  margin-top: -3px;
  text-align: right;
  font-family: Verdana;
  font-size: 10px;
}

/*Bloc de description de forum*/
.forum_desc {
  float: left;
  margin-top: 10px;
  padding: 1px;
  padding-right: 0px;
  width: 349px;
  height: 98px;
  background-color: black;
}
/*Description de forum*/
.forum_desc_desc {
  height: 98px;
  width: 348px;
  padding-right: 1px;
  text-align: justify;
  overflow: auto;
  color: #d5d5d5;
  font-family: verdana;
  font-size: 10px;
}

/*Bloc image new old lock et dernier message*/
.forum_middle_bloc {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  width: 205px;
  height: 100px;
  text-align: center;
}
/*Bloc image new old lock*/
.forum_old_new_lock_img {
  width: 205px;
  margin-bottom: 10px;
}

/*Bloc dernier message*/
.forum_last_mess {
  color: #656565;
  height: 50px;
  width: 205px;
  font-family: verdana;
  font-size: 10px;
}

/*Bloc des sous-forums*/
.forum_sous_forums {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  width: 205px;
  height: 100px;
}
.forum_sous_forums_over {
  width: 200px;
  height: 100px;
  overflow: auto;
  padding-right: 5px;
  font-family: verdana;
  font-size: 10px;
}

/**************************************** FIN DES CATÉGORIES ****************************************/

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code" ou dans "Personnalisations" pour recevoir de l'aide.

À plus !