1 Kit SF-BB : Catégories comprimées 28/1/2010, 17: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">
<!-- 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><span class="supprimg">{NAV_CAT_DESC}</span></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 -->
<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">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<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>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</td></tr></table><div style="width: 100%; height: 15px;"></div>
<!-- END tablefoot -->
<!-- END catrow -->
En orange : La largeur de chaque petit arrondi./*CATEGORIES_COMPRESSEES-------------------------------------------------SOS-FORUM.COM*/
/*Largeur_Categories_Compressees-------------------------------------------------*/
.forumcell {width: 33%;}
/*Couleur_Bordure_Categories-------------------------------------------------*/
.forumcell hr {border-color: #006598;}
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">
<!-- 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><span class="supprimg">{NAV_CAT_DESC}</span></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 -->
<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">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<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>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</td></tr></table><div style="width: 100%; height: 15px;"></div>
<!-- END tablefoot -->
<!-- END catrow -->
Et pour positionner ce fond, il faut ajouter dans le CSS :
.backcorner2 {background-position: top right;
background-repeat: repeat;}
- Spoiler:
- En vert :
- Pour que l'image ne se répète pas, inscrivez no-repeat
- Pour que l'image se répète en mosaïque, inscrivez repeat
- Pour que l'image se répète horizontalement, inscrivez repeat-x
- Pour que l'image se répète verticalement, inscrivez repeat-y
En orange :
- Pour aligner le fond en haut, inscrivez top
- Pour aligner le fond en bas, inscrivez bottom
- Pour aligner le fond au centre, inscrivez center
En rouge :
- Pour aligner le fond à gauche, inscrivez left
- Pour aligner le fond à droite, inscrivez right
- Pour aligner le fond au centre, inscrivez center
EDIT FB :
Vous pouvez retrouver les détails de ce tuto ICI
Dernière édition par ze_chaofan le 1/2/2010, 21:20, édité 2 fois