Voici un petit LS d'une liste des sujets que j'ai fait pour accompagner ces Catégories Simplettes que j'avais fait à la demande de The One Pandemonium.

Pour voir l'aperçu : cliquez ici.

Ce LS est en deux parties.

• Tout d'abord, nous allons installer la liste de sujets dans le template.
  
• Puis, nous allons la mettre en forme à l'aide du CSS.

1. La liste des sujets (Topics_List_Box)

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

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

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

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->
<link href='http://fonts.googleapis.com/css?family=Lobster|Great+Vibes' rel='stylesheet' type='text/css' />
<table class="sujets" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="center" align="center">
      <span class="sujets_top_title">
        Liste des sujets
      </span>
    </td>
  </tr>
  <tr>
    <td valign="middle" align="center">
      <table class="sujets_list" cellspacing="0" cellpadding="0">
        <tbody>
<!-- END header_table -->
<!-- BEGIN header_row -->
<!-- END header_row -->
<!-- BEGIN topic -->
          <tr>
            <td valign="middle" align="center" colspan="2">
              <table class="sujet" cellspacing="7" cellpadding="0">
                <tbody>
                  <tr>
                    <td valign="middle" align="left" width="210">
                      Composé par
                      <span class="sujet_auteur">
                        {topics_list_box.row.TOPIC_AUTHOR}
                      </span>
                      <br />
                      <span class="sujet_stats">
                        Réponses: <em>{topics_list_box.row.REPLIES}</em> | Vues: <em>{topics_list_box.row.VIEWS}</em>
                      </span>
                    </td>
                    <td valign="middle" align="center" width="320">
                      <div class="sujet_type">{topics_list_box.row.TOPIC_TYPE}</div>
                      <a class="sujetlink" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                      {topics_list_box.row.PARTICIPATE_POST_IMG}
                    </td>
                    <td valign="middle" align="right" width="210">
                      {topics_list_box.row.LAST_POST_IMG} {topics_list_box.row.LAST_POST_TIME}
                      <br />
                      Répondu par
                      <span class="sujet_last_auteur">
                        {topics_list_box.row.LAST_POST_AUTHOR}
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
     <tr>
            <td valign="middle" align="center" colspan="2">
              <table class="sujet" cellspacing="7" cellpadding="0">
                <tbody>
                  <tr>
                    <td valign="middle" align="center">
                      <span class="sujets_font">
                        {topics_list_box.row.L_NO_TOPICS}
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
          </td>
   </tr>
<!-- END no_topics -->
<!-- BEGIN bottom -->
   <tr>
     <td align="left">
            <span class="sujets_font">
               {PAGINATION}
            </span>
          </td>
     <td align="right">
            <a href="#top" class="sujets_font">
              {L_BACK_TO_TOP}
            </a>&nbsp;
          </td>
   </tr>
<!-- END bottom -->
<!-- BEGIN footer_table -->
        </tbody>
      </table>
    </td>
  </tr>
</table>
<!-- END footer_table -->
<!-- BEGIN spacer -->
<br class="gensmall" />
<!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

2. Mise en forme (CSS)

Si vous regardez vote liste, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons la mettre en forme à 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 Sujets *******************************************************/

/*Bloc des sujets*/
.sujets {
  margin: auto;
  margin-bottom: 10px;
  background-color: #0f120f;
  border: 2px solid #1f1d1a;
  padding-bottom: 15px;
  width: 850px;
}
/*Titre du bloc des sujets*/
.sujets_top_title {
  display: block;
  background-image: url('http://img4.hostingpics.net/pics/781032956965Sanstitre.png');
  width: 750px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 5px;
  font-family: 'Great Vibes';
  font-size: 36px;
  text-shadow: 0px 0px 5px #000000;
  color: #23709e;
  font-weight: normal;
  letter-spacing: 1px;
}

/*Liste des sujets*/
.sujets_list {
  width: 760px;
  margin: auto;
  padding: 10px;
  padding-bottom: 0px;
  background-image: url('http://image.noelshack.com/fichiers/2014/48/1416945713-pattern.png');
  text-align: left;
  color: #7b848f;
}

/*Polices des éléments hors sujets*/
.sujets_font {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #7b848f;
}

/*Chaque sujet*/
.sujet {
  position: relative;
  width: 740px;
  margin-bottom: 10px;
  background-color: #1f1d1a;
  border: 1px solid #161412;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

/*Type de sujet*/
.sujet_type {
  position: absolute;
  width: 740px;
  text-align: center;
  top: -7px;
  left: 0px;
  text-shadow: 1px 1px 1px #000000;
}

/*Titre du sujet*/
a.sujetlink {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-shadow: 1px 1px 1px #000000;
  color: #23709e!important;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 2px;
  padding-bottom: 5px;
  text-decoration: none;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre du sujet survolé*/
a.sujetlink:hover {
  text-decoration: none!important;
  letter-spacing: 4px;
}

/*Auteurs des sujets*/
.sujet_auteur a strong, .sujet_last_auteur a strong, .sujet_auteur a, .sujet_last_auteur a {
  font-size: 12px!important;
  font-weight: normal!important;
  font-family: Arial, Helvetica, sans-serif!important;
}

/******************************************************* FIN SUJETS *******************************************************/

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

À plus !