[Template & CSS] Un corps Catégorie

V

• Partie Template
  
• Partie CSS
  
• Partie Résumé

Tout d'abord, pour pouvoir créer ce corps, nous allons devoir l'introduire à l'aide de balises. Et pas n'importe laquelle, nous allons donc utiliser <div> pour faire cela.
Grâce à cette balise, le corps deviendra un "block" et on pourra lui appliquer un fond, qui sera donc nos entêtes.

On va lui affiler une class, ou une id [C'est la même chose] qui sera reliée au CSS et que l'on pourra modifier. Appellons ces classes :"cathead", "catbody" et "catfoot" !

On va donc dans notre Template Index_Box qui gère l'affichage des catégories et on cherche ou mettre notre entête. Voyons voir, avec un peu de logique, on va le mettre tout en haut ... Et donc .... Oui ! On a juste à le mettre après ceci :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Ce qui nous donnerait :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cathead"></div>


Bon Bon, très bien, on a réussi à mettre les entêtes, maintenant le tronc !
Oula non, partez pas O_O !
C'est encore plus simple x)


On ouvre la une div juste après celle que l'on a créer et on la ferme dans le footer :

On ouvre comme cela :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cathead"></div>
<div class="catbody">

Et on ferme comme ceci :

Code:

</div>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Maintenant, on installe le footer juste après la fermeture de notre div de tronc :

Code:

</div>
<div class="catfoot"></div>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Et on a terminé !

On peut passer à la partie moins complexe et plus simpa : Le CSS.



Tout d'abord, on va récupérer nos class que l'on a crée il y a quelques minutes. Rappellez-vous : "cathead", "catbody" et "catfoot" !
On aura donc cela :

Code:


.cathead
{

}

.catbody
{

}

.catfoot
{

}


Maintenant, on va faire les petits coquets, et on va leur donner un fond, les centrer et leur donner des dimensions ;D

Code:


.cathead
{
  background: url('http://www.pixyup.com/uploads/252043034ef77cc77932a.png') top center no-repeat;
  width: 864px;
  height: 106px;
  margin: auto; /*Permet de centrer la partie du corps*/
}

.catbody
{
  background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
  width: 864px;
  margin: auto;

}

.catfoot
{
  background: url('http://www.pixyup.com/uploads/252044124ef77d0c1817e.png') bottom center no-repeat;
  width: 864px;
  height: 77px;
  margin: auto;
}


Pourquoi ai-je mis ces dimensions ? Ce sont celles de chaque partie du corps.
Ainsi, si vous voulez les changer, penser à modifier les valeurs et mettre celle de vos parties du corps
Enregistrez et regardez ce que vous avez !
C'est trop génial *o*



Si vous avez suivis, je sais que certains seront perdus, donc je vous donne les deux codes, tous beaux, tous propres ;D

Template (PhpBB2 uniquement, pour les autres versions, suivez les étapes en haut) :

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cathead"></div><div class="catbody">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <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>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" 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 class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN ads -->
            <span class="AD_LastPA">
                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                <span class="AD_LastInfos">
                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                    {catrow.forumrow.ads.DATE}<br />
                    {catrow.forumrow.ads.LOCATION}
                </span>
            </span>
            <!-- END ads -->
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table>
</div><div class="catfoot"></div>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS :

Code:


.cathead
{
  background: url('http://www.pixyup.com/uploads/252043034ef77cc77932a.png') top center no-repeat;
  width: 864px;
  height: 106px;
  margin: auto; /*Permet de centrer la partie du corps*/
}

.catbody
{
  background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
  width: 864px;
  margin: auto;

}

.catfoot
{
  background: url('http://www.pixyup.com/uploads/252044124ef77d0c1817e.png') bottom center no-repeat;
  width: 864px;
  height: 77px;
  margin: auto;
}