Voici un petit LS de catégories que j'ai faites pour la demande de Cruelly. Il y a un aussi un LS de Profil/Message qui l'accompagne.

Pour voir l'aperçu : cliquez ici.

Effet : Au passage de la souris sur les sous-forums, il y a un effet "buzz" sur les liens.

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 -->
<table class="categorie" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="cate_title" align="center" valign="top">
        {catrow.tablehead.L_FORUM}
      </td>
    </tr>
    <tr>
      <td class="bloc_ensemble_forum" align="center" valign="top">
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
        <table class="bloc_un_forum" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td class="forum_left_bloc" align="center" valign="top">
                <img class="forum_newoldlock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                <div class="forum_sf_bloc">
                  <span id="forumsfid">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  </span>
                </div>
              </td>
              <td class="forum_sep">
              </td>
              <td class="forum_right_bloc" align="center" valign="top">
                <table cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td class="forum_title_stats_bloc" align="center" valign="top">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                        <span class="forum_stats">
                          {catrow.forumrow.POSTS} messages / {catrow.forumrow.TOPICS} sujets.
                        </span>
                        <div style="clear: both;"></div>
                      </td>
                    </tr>
                    <tr>
                      <td height="2">
                      </td>
                    </tr>
                    <tr>
                      <td class="forum_lastmess_bloc" align="center" valign="top">
                        <span id="lastmessid">
                          {catrow.forumrow.LAST_POST}&nbsp;
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td height="2">
                      </td>
                    </tr>
                    <tr>
                      <td class="forum_description_bloc" align="center" valign="top">
                        <div class="forum_description">
                          {catrow.forumrow.FORUM_DESC}
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <div style="height: 2px;"></div>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
      </td>
    </tr>
  </tbody>
</table>
<div style="height: 15px;"></div>
<!-- END tablefoot -->
<script type="text/javascript">
  jQuery('#forumsfid').html(jQuery('#forumsfid').html().replace(/, /g,'<br /> ')).removeAttr('id');
</script>
<script type="text/javascript">
  jQuery('#lastmessid').html(jQuery('#lastmessid').html().replace(/<br>/g,' ~ ')).removeAttr('id');
</script>
<!-- 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: 100%; /*LARGEUR DES CATÉGORIES À AJUSTER COMME TU VEUX*/
  margin: auto;
  margin-top: 15px;
}
.categorie table {
  width: 100%;
}


/*Titre de catégorie*/
.cate_title h2 {
  display: block;
  background-color: #929292;
  border: 1px solid #6d6d6d;
  max-height: 74px;
  margin: 0px;
  margin-bottom: 2px;
  padding: 5px;
  font-family: 'Verdana';
  font-size: 32px;
  text-align: center;
  font-weight: normal!important;
  color: #545454;
  text-shadow: 1px 1px 2px #dfdfdf;
}
.cate_title h2 img {
  margin: -6px;
}
/*Réduire le titre de la catégorie dans les autres pages*/
a.nav img {
  display: inline-block;
  margin-bottom: -5px;
  width: 218px;
  height: 20px;
}


/*Bloc paquet de forum*/
.bloc_ensemble_forum {
  background-color: #a4a4a4;
  border: 1px solid #78787a;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

/*Un seul forum*/
.bloc_un_forum {
  margin: auto;
  background-color: #929292;
  border: 1px solid #6d6d6d;
  padding: 2px;
}

/*Partie gauche du forum*/
.forum_left_bloc {
  padding-top: 1px;
  width: 179px;
  padding-bottom: 1px;
  padding-right: 2px;
  text-align: center;
}
/*Bloc de sous-forums*/
.forum_sf_bloc {
  background-image: url('http://i19.servimg.com/u/f19/17/10/65/34/untit103.jpg');
  width: 159px;
  height: 124px;
  padding: 10px;
  text-align: left;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Sous-forums*/
.forum_sf_block span {
  display: block;
  overflow: auto;
  padding-right: 5px;
  margin-right: -5px;
  height: 124px;
}
/*Police de sous-forums*/
.forum_sf_bloc .gensmall {
  font-size: 13px;
  font-family: 'Verdana';
  color: #202020;
  display: inline-block;
  margin: 1px;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  text-shadow: 10px 0px transparent, -10px 0px transparent;
}
/*Police de sous-forums - Effet au survol*/
.forum_sf_bloc .gensmall:hover {
  color: #000000;
  text-shadow: 0px 0px #000000, 0px 0px #000000;
}

/*Séparation du forum*/
.forum_sep {
  width: 2px;
  border-left: 1px solid #747474;
  border-right: 1px solid #747474;
}

/*Partie droite du forum*/
.forum_right_bloc {
  padding-left: 2px;
  padding-bottom: 1px;
  padding-top: 1px;
  text-align: center;
}
/*Bloc titre et stats*/
.forum_title_stats_bloc {
  margin: auto;
  background-color: #7f7f7f;
  border: 1px solid #5f5e5c;
}
/*Titre de forum*/
a.forumlink {
  display: inline-block;
  float: left;
  font-size: 13px;
  font-family: 'Verdana';
  color: #ffffff!important;
  margin-left: 5px;
  font-weight: normal;
}
/*Stats*/
.forum_stats {
  display: inline-block;
  float: right;
  font-size: 12px;
  font-family: 'Verdana';
  color: #ffffff;
  margin-right: 2px;
}

/*Bloc du dernier message*/
.forum_lastmess_bloc {
  margin: auto;
  min-height: 12px;
  backgorund-color: #929292;
  border: 1px solid #6c6c6a;
  padding: 1px;
  padding-right: 2px;
  font-size: 12px;
  font-family: 'Verdana';
  color: #ffffff;
  font-size: 11px;
  text-align: right;
}
/*Police des liens du dernier message*/
.forum_lastmess_bloc .gensmall, .forum_lastmess_bloc a {
  font-family: 'Verdana'!important;
  color: #ffffff!important;
  font-size: 11px!important;
}

/*Bloc de description de forum*/
.forum_description_bloc {
  background-image: url('http://i19.servimg.com/u/f19/17/10/65/34/untit104.jpg');
  height: 120px;
  padding: 5px;
}
/*Description de forum*/
.forum_description {
  font-size: 13px;
  font-family: 'Verdana';
  color: #202020;
  padding: 2px;
  text-align: justify;
  height: 120px;
  padding-right: 3px;
  margin-right: -3px;
  overflow: auto;
}

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

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier les catégories et avez besoin d'aide.

À plus !