Voici un petit LS de catégories beiges et vertes que j'ai fait pour la demande de Nana-Chan.

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. Corps des 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:

<link href='http://fonts.googleapis.com/css?family=Parisienne|Shadows+Into+Light' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
<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="cate_bloc_cadre">
<div class="cate_bloc">
  <div class="cate_title">
    <span>
      {catrow.tablehead.L_FORUM}
    </span>
  </div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
  <table class="forum_bloc" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="right" valign="middle">
        <span class="forum_stats">
          <span class="forum_stats_in">
            {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
          </span>
        </span>
      </td><td></td>
    </tr>
    <tr>
      <td width="99%"><div class="forum_bloc_left">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td rowspan="2" class="forum_newoldlock" 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 align="left" valign="middle">
              <span class="forumlink">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                  {catrow.forumrow.FORUM_NAME}
                </a>
              </span>
            </td>
          </tr>
          <tr>
            <td valign="middle">
              <div class="forum_desc">
                {catrow.forumrow.FORUM_DESC}
              </div>
            </td>
          </tr>
        </table>
      </div>
      </td>
      <td></td>
      <td align="center" valign="middle">
        <div class="forum_last_bloc">
          <div class="forum_last">
            {catrow.forumrow.LAST_POST}
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td align="left" valign="middle">
        <span class="forum_sf">
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td></td>
    </tr>
  </table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</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:

/********************************************* CATÉGORIES *********************************************/
/*Cadre du bloc qui contient chaque catégorie*/
.cate_bloc_cadre {
  background: #ffffff;
  border: 4px solid #c3ec50;
  margin-bottom: 15px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
}
/*Bloc qui contient chaque catégorie*/
.cate_bloc {
  background: #fefdb1;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
}

/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  background: #d5e978;
  border-radius: 15px;
  box-shadow: 2px 2px 1px #ffffff;
  margin: 0px;
  margin-right: 5%;
  padding: 10px;
  padding-left: 180px;
  padding-right: 180px;
  color: #006600;
  font-family: Lobster, cursive;
  font-size: 28px;
  text-shadow: 0 2px 2px #fefdb1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transition: 1s;
  -webkit-transition: 1s;
}
/*Titre de catégorie au survol*/
.cate_title h2:hover {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

/*Bloc qui contient chaque forum*/
.forum_bloc {
  margin-top: 50px;
  margin-bottom: 30px;
}

/*Bloc du Nombre de messages et de sujets*/
.forum_stats {
  display: inline-block;
  background: #f2e485;
  border-radius: 15px 15px 0 0;
  box-shadow: 0px 0px 5px 2px #a87f4c;
  margin-right: 30px;
  margin-bottom: -10px;
  padding: 20px;
  padding-top: 2px;
  padding-bottom: 6px;
  color: #312516;
  font-family: Times New Roman;
  font-size: 13px;
}

/*Bloc contenant la description, le nom du forum et l'image NewOldLock*/
.forum_bloc_left {
  position: relative;
  background: #f2e485;
  border-radius: 15px;
  box-shadow: 0px 0px 5px 2px #a87f4c;
  padding: 10px;
}

/*Image NewOldLock*/
.forum_newoldlock img {
  width: 90px;
  height: 120px;
  margin-right: 15px;
}

/*Titre de forum*/
span.forumlink {
  display: block;
  text-align: left;
}
/*Lien du titre de forum*/
a.forumlink {
  color: #006600!important;
  font-family: parisienne;
  font-size: 24px;
  text-shadow: 2px 2px 1px #fefeea;
  text-decoration: none!important;
  letter-spacing: 0px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Lien du titre de forum au survol*/
a.forumlink:hover {
  color: #003a00!important;
  letter-spacing: 5px;
}

/*Description des forums*/
.forum_desc {
  max-height: 85px;
  margin-top: 1px;
  margin-right: -5px;
  padding-right: 5px;
  overflow: auto;
  color: #312516;
  font-family: Times New Roman;
  font-size: 14px;
  text-align: justify;
}

/*Bloc des sous-forums*/
.forum_sf {
  display: inline-block;
  max-width: 80%;
  background: #f2e485;
  border-radius: 0 0 15px 15px;
  box-shadow: 0px 0px 5px 2px #a87f4c;
  margin-left: 30px;
  margin-top: -11px;
  padding-left: 10px;
  padding-right: 10px;
  color: #006600;
  text-align: center;
}
/*Liens des sous-forums*/
.forum_sf a.gensmall {
  display: inline-block;
  padding-bottom: 1px;
  padding-top: 4px;
  color: #006600;
  font-family: Times New Roman;
  font-size: 13px;
}

/*Bloc du dernier message*/
.forum_last_bloc {
  display: block;
  width: 258px;
  height: 108px;
  background: url('http://img4.hostingpics.net/pics/365067Sanstitre.png');
  margin-left: 15px;
  padding-top: 50px;
}
/*Contenu du dernier message*/
.forum_last {
  color: #312516;
  font-family: Times New Roman;
  font-size: 14px;
  text-align: center;
}
/*Mise en forme des liens du dernier message*/
.forum_last a {
  color: #006600;
  font-family: Times New Roman;
  font-size: 14px;
}

/*Mise en forme des liens survolés*/
.forum_last a:hover, .forum_sf a.gensmall:hover {
  color: #003a00;
}
 /********************************************* 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 !