Salut !

Voici un petit LS de catégories que j'ai faites pour la demande de TénébreuseRP.

Pour voir l'aperçu : cliquez ici.
Pour voir l'aperçu au survol du bloc de gauche, de sujets et de messages : 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:

<ul class="linklist">
  <!-- BEGIN switch_user_logged_in -->
  <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
  <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
  <!-- END switch_user_logged_in -->
  <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
  <!-- BEGIN switch_user_logged_in -->
  <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
  <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cate_bloc">
  <div class="cate_title">
    <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
    {catrow.tablehead.L_FORUM}
    <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
  </div>
  <!-- END tablehead -->
  <!-- BEGIN forumrow -->
  <div class="forum_bloc">
    <div class="forum_bloc_left">
      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum_title">
        {catrow.forumrow.FORUM_NAME}
      </a>
      <div class="forum_sf">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </div>
      <div class="forum_oldnewlock">
        <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
      </div>
    </div>
    <div class="forum_bloc_middle">
      <div class="forum_desc">
        {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="forum_bloc_right">
      <div class="forum_lastmess">
        <!-- BEGIN switch_topic_title -->
        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
          {catrow.forumrow.LATEST_TOPIC_NAME}
        </a>
        <br />
        <!-- END switch_topic_title -->
        {catrow.forumrow.USER_LAST_POST}
      </div>
      <div class="forum_nbsujets">
        Sujets
        <div class="forum_nbsujets_hide">
          {catrow.forumrow.TOPICS}
        </div>
      </div>
      <div class="forum_nbmessages">
        Messages
        <div class="forum_nbmessages_hide">
          {catrow.forumrow.POSTS}
        </div>
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
  <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
  <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> •&nbsp;</li>
  <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  <!-- BEGIN switch_delete_cookies -->
  <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
  <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

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:

/*Bloc de 1 catégorie*/
.cate_bloc {
  width: 100%;
  margin: 20px auto 10px auto;
}
/*Haut de catégorie*/
.cate_title {
  text-align: center;
  margin-bottom: 15px;
}
/*Images de titre de catégorie*/
.cate_title_img {
  width: 120px;
  height: 76px;
  vertical-align: middle;
}
/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  line-height: 76px;
  vertical-align: middle;
  font-family: 'Dancing Script', cursive;
  font-size: 45px;
  color: #c4c4c4;
  text-shadow: 1px 1px 1px #000000;
}

/*Bloc de 1 forum*/
.forum_bloc {
  position: relative;
  width: 100%;
  margin: auto;
  height: 200px;
  margin-bottom: 20px;
  background: #172326;
  border: 2px solid #26464d;
  font-size: 13px;
  font-family: 'Verdana';
  color: #a3a3a3;
}

/*Bloc de droite*/
.forum_bloc_left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 250px;
  height: 200px;
  border-right: 2px solid #1b4f59;
}
/*Titre de forum*/
.forum_title {
  dislay: block;
  position: absolute;
  width: 240px;
  padding: 5px 5px 10px 5px;
  text-align: center;
  top: 0px;
  left: 0px;
  z-index: 4;
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  color: #2a858c!important;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000000;
}
/*Titre survolé*/
.forum_title:hover {
  color: #35a9b3!important;
}
/*Bloc Image OldNewLock*/
.forum_oldnewlock {
  position: absolute;
  width: 152px;
  height: 154px;
  top: 10px;
  left: -52px;
  z-index: 2;
  background: url('http://img4.hostingpics.net/pics/774596Normal.png');
}
/*Image OldNewLock*/
.forum_oldnewlock img {
  display: inline-block;
  margin: 2px 0px 0px 2px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*Bloc des sous-forums*/
.forum_sf {
  dislay: block;
  position: absolute;
  width: 240px;
  padding-right: 5px;
  height: 105px;
  bottom: 5px;
  left: 5px;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 13px;
  font-family: 'Verdana';
  text-align: center;
  color: #2a858c;
}
/*Liens des sous-forums*/
.forum_sf .gensmall {
  font-size: 13px;
  font-family: 'Verdana';
  color: #2a858c;
}
.forum_sf .gensmall:hover {
  color: #35a9b3;
}
/*Actions au hover du titre*/
.forum_bloc_left:hover .forum_sf {
  visibility: visible;
  opacity: 1;
}
.forum_bloc_left:hover .forum_oldnewlock img {
  visibility: hidden;
  opacity: 0;
}

/*Bloc de milieu*/
.forum_bloc_middle {
  margin-left: 252px;
  margin-right: 202px;
}
/*description des forums*/
.forum_desc {
  margin: 5px 0px 5px 5px;
  padding-right: 5px;
  overflow: auto;
  height: 190px;
  text-align: justify;
}

/*Bloc de gauche*/
.forum_bloc_right {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  height: 200px;
  border-left: 2px solid #1b4f59;
  text-align: center;
}
/*Dernier message*/
.forum_lastmess {
  height: 73px;
  padding: 25px 5px 0px 5px;
  line-height: 16px;
  vertical-align: middle;
}
/*Lien de dernier message*/
.forum_lastmess a {
  color: #2a858c;
}
.forum_lastmess a:hover {
  color: #35a9b3;
}
/*Bloc de sujets et messages*/
.forum_nbsujets, .forum_nbmessages {
  position: relative;
  width: 180px;
  height: 29px;
  font-size: 14px;
  padding: 10px;
  line-height: 29px;
  vertical-align: middle;
  border-top: 2px solid #1b4f59;
}
/*Bloc du nombre de sujets et messages*/
.forum_nbsujets_hide, .forum_nbmessages_hide {
  position: absolute;
  width: 180px;
  height: 29px;
  line-height: 29px;
  vertical-align: middle;
  padding: 10px;
  top: 0px;
  left: 0px;
  opacity: 0;
  background: #172326;
  text-shadow: 1px 1px 1px #000000;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*Apparition des nombres*/
.forum_nbsujets:hover .forum_nbsujets_hide,
.forum_nbmessages:hover .forum_nbmessages_hide {
  opacity: 1;
}

Voilà les boutons Nouveau, Pas de de Nouveaux Messages et Verrouillé :
https://2img.net/r/hpimg4/pics/233690CatgorieForum.png
https://2img.net/r/hpimg4/pics/881805CatgorieNouveau.png
https://2img.net/r/hpimg4/pics/231407CatgorieVerrouill.png

Sinon, dans le CSS, vous avez une image dans la class "forum_oldnewlock" que vous voudrez peut-être modifier si vous voulez personnaliser le tout :
https://2img.net/r/hpimg4/pics/774596Normal.png

---

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 personnaliser le LS et que vous avez besoin d'aide.

À plus !