Kit SF-BB : Catégories comprimées

**Zeco** · Sujet: Kit SF-BB : Catégories comprimées 28/1/2010, 16:35

Ce tutoriel a été publié par Zeco sur SOS-Forum.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello hello...

Voici un petit kit de Template/CSS tout prêt pour votre forum en SF-BB, vous permettant d'arriver à cet affichage :

Ouvrez votre template "index_box", retirez tout, et collez y ceci :

Spoiler:

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><span class="supprimg">{NAV_CAT_DESC}</span></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>


<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td class="styletable"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle" style="background-color: transparent; background-image: none;"> {catrow.tablehead.L_FORUM} </th></tr></table></div></div></div></div></td></tr></table><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center">



<table cellspacing="0" cellpadding="0" class="forumcell" border="0" style="display: inline-table;"><tr><td style="padding: 3px;"><div class="backcorner2"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
   <td class="transtable" align="center" valign="middle" style="padding: 5px;">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
   </td>
   <td class="transtable" 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><hr />
<i><span class="gensmall">{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</span></i><hr /><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>
</tr></table></div></div></div></div></div></td></tr></table>


</td></tr></table><div style="width: 100%; height: 15px;"></div>

Puis collez ceci dans votre CSS :

Citation:

/*CATEGORIES_COMPRESSEES-------------------------------------------------SOS-FORUM.COM*/
/*Largeur_Categories_Compressees-------------------------------------------------*/
.forumcell {width: 33%;}
/*Couleur_Bordure_Categories-------------------------------------------------*/
.forumcell hr {border-color: #006598;}

En orange : La largeur de chaque petit arrondi.
Pour en avoir 2 sur chaque ligne, mettez 50%, pour 3 mettez 33%, et 4 mettez 25%.
En bleu : La couleur des bordures à l'intérieur.

A savoir : Les petits blocs seront automatiquement centrés, et se placeront tous seuls les un vis à vis des autres, l'ordre de rangement étant l'ordre de lecture classique.

------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------

Pour ceux désirant mettre l'image affichant le statut du forum en arrière plan (permettant ainsi de faire avec un effet coloré pour le nouveaux messages par exemple), voici ce qu'il faut mettre dans votre template :

Spoiler:

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><span class="supprimg">{NAV_CAT_DESC}</span></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>


<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td class="styletable"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle" style="background-color: transparent; background-image: none;"> {catrow.tablehead.L_FORUM} </th></tr></table></div></div></div></div></td></tr></table><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center">



<table cellspacing="0" cellpadding="0" class="forumcell" border="0" style="display: inline-table;"><tr><td style="padding: 3px;"><div class="backcorner2" style="background-image: url('{catrow.forumrow.FORUM_FOLDER_IMG}');"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
   <td class="transtable" 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><hr />
<i><span class="gensmall">{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</span></i><hr /><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>
</tr></table></div></div></div></div></div></td></tr></table>


</td></tr></table><div style="width: 100%; height: 15px;"></div>

Et pour positionner ce fond, il faut ajouter dans le CSS :

Citation:

.backcorner2 {background-position: top right;
background-repeat: repeat;}

Spoiler:

EDIT FB :

Vous pouvez retrouver les détails de ce tuto ICI

**Final-Blond** · Sujet: Re: Kit SF-BB : Catégories comprimées 29/1/2010, 18:41

Superbe ZC et merci.

Une possibilité de personnalisation différente de cette fonction ici, toujours sous le contrôle (presque parentale) de Zeco. Wink


	Forum gratuit \| © phpBB \| Forum gratuit d'entraide\| Statistiques \| Signaler un abus \| Créer un forum \| Contrat CC