[HTML5 & CSS3] - Catégories & forums modernes

Bonjour à tous !  

Me voici avec un nouveau libre service ! Ca faisait très longtemps que j'avais pas codé et du coup cet après midi je me suis dit qu'il était temps de s'y remettre !

Ce que je vous propose la c'est une mise en page des catégories et forums que j'aime pas mal. Je me suis bien débrouillé :)

Pour avoir un petit aperçu je vous invite à regarder cette image. (À noter que la description de forum apparaît au survol de l'image).

Il y a donc trois étapes à suivre pour ce LS donc:
- Le HTML dans les templates
- Le CSS
- Quelques codes dans la description de vos forums et dans votre titres de catégories

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  

Assez parlé, tout d'abord on va premièrement se rendre dans le template 'index-box'. Vous allez tout selectionner et remplacer 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>
<div class="index_fc">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="categorie">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->
   <!-- BEGIN forumrow -->
      <div class="forum">
                <div class="forum_case">
                     <div class="description">
                        {catrow.forumrow.FORUM_DESC}
                     </div>
                     <div class="bottom_section"></div>
                     <div class="bottom_border"></div>                  
                     <div class="forum_name">
                           <a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                     </div>
                     <div class="tnm">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                     </div>
                </div>
      </div>
   <!-- END forumrow -->

<!-- END catrow -->
</div>


N'oubliez pas de publier votre template. Donc à ce stade-ci, votre forum doit être aussi laid que possible. C'est pourquoi nous allons nous occuper des CSS, et plus particulièrement ceux-ci que vous allez coller dans vos feuilles de style:

Code:


/* DEBUT MISE EN PAGE CATEGORIES ET FORUMS - FANGS */
/* clearfix categorie - regle un bug*/
.index_fc::after {
  clear: both;
  content: "";
  display:block;
}

.categorie {
  position: relative;
  clear: both;
  height: 50px;
  position: relative;
  margin-top: 50px;
  margin-bottom: -18px;
  margin-left: 35px;
  z-index: 2;
}

.categorie_txt {
  position: relative;
  font-size: 40px;
  font-family: 'Josefin Slab', Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  text-align: right;
}

.forum {
  width: 980px;
  margin: auto !important;
}

.forum_case {
  float: left;
  width: 490px;
  height: 245px;
  background-color: #111418;
}

.description {
  position: relative;
  width:490px;
  height: 245px;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom_section {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  background-color: #fff;
  opacity: 0.3;
}

.bottom_border {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  border-top: 1px solid #fff;
}

.tnm {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-right: 11px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-family: Georgia, Arial, serif;
}

.forum_name {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-left: 10px;
  z-index: 2;
}

.forum_link {
  color: #fff !important;
  text-shadow: 1px 1px 2px #000;
  font-variant: small-caps !important;
  text-decoration: none;
  font-size: 16px;
  font-family: Georgia, Arial, serif;
}

.description_img {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
}

.description_img:hover {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
  opacity: 0.2;
}

.description_txt {
  position: relative;
  width: 460px;
  height: 215px;
  padding: 15px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 12px;
  font-family: Georgia, Arial, serif;
  text-align: justify;
}

/* FIN MISE EN PAGE CATEGORIES ET FORUMS - FANGS */


Les deux premières étapes sont terminées. Mais ce n'était que du copier-coller. Les deux porchaines risquent d'être un peu plus longues.

Vous allez vous rentre dans la configuration de vos catégories et forums et pour chaque titre de catégories vous allez entrer ce code:

Code:

<span class="categorie_txt">Nom de votre catégorie</span>

Et enfin vous allez vous rendre dans les description de vos forums et allez utiliser ce code:

Code:

<div class="description_txt">
       Lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet.    
</div>
<div class="description_img">
      <img alt="**" src="URL DE L'IMAGE 490*245" />
</div>

Cette étape peut paraître longue mais elle est nécessaire.

Bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?