| | UNE GALERIE D'AVATARS A ETE MISE EN PLACE POUR LES MEMBRES MERCI DE PENSER A COMPLETER VOTRE PROFIL ET DE CHOISIR UN AVATAR |
|
| | Kit SF-BB : Catégories comprimées |
|---|
 |   | ze_chaofan De retour de loin

Age: 16 Nombre de messages: 3231 Localisation: Un peu la même que mon ombre Emploi/loisirs: Dormir Humeur: Mnmnhmnhhmnh ? Date d'inscription: 30/07/2007
Remerciements reçus: 169
|
| Sujet: Kit SF-BB : Catégories comprimées 28/1/2010, 15:35 Par : ze_chaofan | |
| Ce tutoriel a été publié par ze_chaofan 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 --> |
|
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"> <!-- 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 :
| Citation: | .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 |
Dernière édition par ze_chaofan le 1/2/2010, 19:20, édité 2 fois |
| | |
 |   | Final-Blond Staff du forum

Nombre de messages: 771 Localisation: Vertigineuse. Emploi/loisirs: Dépasser les bornes des limites d'un tuto. Humeur: Rasoir d'Occam= vaut mieux se dire qu'elle est mauvaise. Date d'inscription: 21/02/2009
Remerciements reçus: 64
|
| Sujet: Re: Kit SF-BB : Catégories comprimées 15/2/2010, 06:40 Par : Final-Blond | |
| Sorry de rouvrir ce fil...  J'ai quand même une question ZC : Quand tu dis " Ouvrez votre template "index_box", retirez tout, et collez y ceci", c'est l'un des templates les plus modifiés avec cette histoire de fusion, de modification de place des sujets-messages, des descriptions de forums particulières, etc... N'y aurait-il pas un moyen de plus cibler la modification ? (Oui je sais, je --->>).
|
| | |
| Page 1 sur 1 |
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| | Derniers sujets | » Installation Catégories comprimées par Ilianna Hier à 01:31
» pop-up Lorsque vous recevez le MP par Final-Blond 8/3/2010, 20:21
» Menu bizzare par Final-Blond 8/3/2010, 20:18
» installer un sélecteur de thèmes par Final-Blond 8/3/2010, 20:16
» Problème avec catégories comprimées par Final-Blond 8/3/2010, 20:15
» Nouvelle apparence du forum ! par ze_chaofan 8/3/2010, 20:13
» Catégories comprimées [questions] par Final-Blond 8/3/2010, 20:13
» [AIDE] Changer le nom "Membres" par Final-Blond 8/3/2010, 20:11
» Kikou par Ilianna 8/3/2010, 20:03
» Euh... salut ! ^^ par Solitude 8/3/2010, 10:52
» je me presente par Solitude 8/3/2010, 10:52
» Antho ^^ par Solitude 8/3/2010, 10:51
|
|
|
|
| |