INDEX_BOX : Analyse & Modification Perso

Lien Never-Utopia ->
Tuto : Etape 4 : mise en forme des catégories et création des icônes. Clik ici

Never-Utopia --> menu Codage --> cursus codage.
Mise en forme des catégorie:

Code:: .forumline
{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #e9e9e6;
border: 1px solid #ffffff;
box-shadow: 0px 0px 5px #595959;
-moz-box-shadow: 0px 0px 5px #595959;
-o-box-shadow: 0px 0px 5px #595959;
-htm-box-shadow: 0px 0px 5px #595959;
-webkit-box-shadow: 0px 0px 5px #595959;
}

.Vos catégorie sont en Mode rectangle !!
Résultat en image ici :

INDEX_BOX : Analyse & Modification Perso Captur10

J'ai rajouté ces ligne de code ( à voir réellement l'effet ?? )

Code:: table
{
width: 98%;
margin: auto;
}

INDEX_BOX
la ligne de 1 à 20 n'a pas été modifié :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>

Ensuite:
L'auteur a supprimé les colonnes en trop ->

Code:: <tr>
   <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
   <th nowrap="nowrap" width="50">{L_TOPICS}</th>
   <th nowrap="nowrap" width="50">{L_POSTS}</th>
   <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>

Cependant, il reste cette ligne de code de BASE qu'il a supprimer également:

Code:: <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

En retirant ce code vous décalez tout le forum ..
Ensuite:
L'auteur a mis un DIV pour les titres" FORUM " ->

Code:: <div class="cate_titre">{catrow.tablehead.L_FORUM}</div>

Note: les titres forum seront placé au dessus des cadres catégories avec une possibilité de mettre une image mais j'ai personnalisé pour un titre encadré et un style d'écriture différent!!

Le CSS:

Code:: .cate_titre h2 {
  background-color: #591b00;
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: 'rancho', cursive;
  font-size: 33px;
  color: #fff;
  v-align: middle;
  margin-bottom: -5px;
  border: 1px dotted #fff;
}

.cate_titre h2:hover {
  color: #aa434d;
  letter-spacing: 2px;
}

Ensuite ->
L'auteur a mis un DIV categorie juste après nôtre Div titre forum.

Code:: <div class="categorie">

Note: il n'a pas fermé le DIV dirrectement !!

Le CSS qui va avec :

Code:: .categorie
{
width: 98%;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #e9e9e6;
border-top: 3px solid #4c4842;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
box-shadow: 0px 0px 5px #595959;
-moz-box-shadow: 0px 0px 5px #595959;
-o-box-shadow: 0px 0px 5px #595959;
-htm-box-shadow: 0px 0px 5px #595959;
-webkit-box-shadow: 0px 0px 5px #595959;
}

Cela permet de mettre une barre noir au dessus des cadre catégorie !
Un effet qui complétera la suite de l'explicatif qui suivra ...
Juste après ->

Code::

L'auteur a de nouveau mis un DIV :

Code:: <div class="forum">

Le CSS:

Code:: .forum
{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
background: #f3f3f3;
border: 1px dotted #c0c0c0;
padding: 2px;
}