|
|
| Auteur | Message |
|---|
 | Sujet: Aide en codage. Mer 7 Déc - 20:47 | |
| Bonsoir, j'aurais besoin d'un petit coup de main pour coder les catégories de mon forum ♥ Adresse de votre forum : http://irianeth-enkidiev.forumgratuit.orgJustification de la demande d'aide spécifique : J'ignore comment on fait et je n'ai pas trouvé de tutos sur le sujet. Aide spécifique choisie : Modification des catégories. En faite j'aimerais mettre les catégories en onglets. Par exemple en se basant sur forum là, il y aurais côte à côte : Bienvenue sur School of Pub ; La rentrée des classes ; .... et pour faire apparaitre es forums de la catégorie il suffirait de cliquer sur le nom de la catégorie. J'ai vue ce système sur plusieurs forum et je le trouve sympa ♥ Merci d'avance. |
|
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Jeu 8 Déc - 17:28 | |
| Salut, voici ce qui est demandé ^^ Avant d'accoster sur les continents Bienvenue Sur Enkidiev Premiers pas sur Irianeth La salle de détente Staff Par contre pour les liens je ne vois pas ce que je dois mettre, il n'y a pas de lien pour y aller, enfin juste celui du forum quoi °° |
|
 | |
 | |
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Sam 10 Déc - 11:15 | |
| Coucou  Ohhh c'est un forum sur les chevaliers d'émeraude *_* Bref ! On va donc s'y mettre Le htmlTout va se passer dans le template " index_box". C'est cette partie du template qu'on va changer | Code: | <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> |
et qu'on va remplacer par :
| Code: | <!-- DEBUT MODIF ONGLETS --> <script type="text/javascript"> <!-- document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet"> <ul class="conteneur_onglets"> <li onClick="change_cat(1)" class="onglet actif" id="onglet_1"> Votre 1ère catégorie </li> <li onClick="change_cat(3)" class="onglet " id="onglet_3"> Catégorie 1 </li> <li onClick="change_cat(4)" class="onglet " id="onglet_4">Corbeille </li> </ul></div>'); var compteur_cat = 1; function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').fadeIn(); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } } function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >'); } else { $('#conteneur_barre_onglet').css("display","block"); document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" style="display:none;">'); } compteur_cat++; } //--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <script type="text/javascript"> <!-- capture_cat(); //--> </script> <!-- FIN MODIF ONGLETS -->
<tr> |
Si on essaie de comprendre un peu ^^
| Code: | document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet"> <ul class="conteneur_onglets"> <li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Nom de la catégorie 1</li> <li onClick="change_cat(2)" class="onglet " id="onglet_2">Nom de la catégorie 2</li> <li onClick="change_cat(3)" class="onglet " id="onglet_3">Nom de la catégorie 3</li> </ul></div>');
|
=> On va mettre en place un bloc qui va contenir les noms de chacune de nos catégories et qui va déclancher un script quand on va cliquer dessus
| Code: | var compteur_cat = 1; function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').fadeIn(); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } } |
=> Par défaut, c'est la catégorie 1 qui est affiché. Quand on clique sur un nom de catégories, celle-ci s'affiche et la catégorie qui était affiché précédement est cachée.
| Code: | function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >'); } else { $('#conteneur_barre_onglet').css("display","block"); document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" style="display:none;">'); } compteur_cat++; } |
=> On récupére les différentes catégories et on se préparer à les afficher
| Code: | <!-- BEGIN catrow --><!-- BEGIN tablehead --> |
=> on commence à afficher les blocs catégories
| Code: | <script type="text/javascript"> <!-- capture_cat(); //--> </script> |
=> On appelle la fonction qui va afficher les catégories.
Est ce que ça c'est bon ?
____________
N'oublie pas de modifier cette partie avec tes noms de catégorie (et n'oublie pas de changer les numéros)
| Code: | <li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Nom de la catégorie 1</li> <li onClick="change_cat(2)" class="onglet " id="onglet_2">Nom de la catégorie 2</li> <li onClick="change_cat(3)" class="onglet " id="onglet_3">Nom de la catégorie 3</li> |
_________
Pour le moment, si tu installes ça sur ton forum, ça ne marche pas tip top On va bosser la mise en page ensuite (en fait, je n'ai pas besoin des liens ^^ ) |
|
 | |
 | |
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Sam 10 Déc - 13:02 | |
| | Code: | <!-- DEBUT MODIF ONGLETS --> <script type="text/javascript"> <!-- document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet"> <ul class="conteneur_onglets"> <li onClick="change_cat(1)" class="onglet actif" id="onglet_1"> Staff </li> <li onClick="change_cat(2)" class="onglet " id="onglet_2"> Avant d'accoster sur les continents </li> <li onClick="change_cat(3)" class="onglet " id="onglet_3"> Bienvenue Sur Enkidiev </li> <li onClick="change_cat(4)" class="onglet " id="onglet_4">Premiers pas sur Irianeth ... </li> </ul></div>'); var compteur_cat = 1; function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').fadeIn(); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } } function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >'); } else { $('#conteneur_barre_onglet').css("display","block"); document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" style="display:none;">'); } compteur_cat++; } //--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <script type="text/javascript"> <!-- capture_cat(); //--> </script> <!-- FIN MODIF ONGLETS -->
|
|
|
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Sam 10 Déc - 17:21 | |
| Voilà je t'ai mit tout le templates x) | 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> <!-- DEBUT MODIF ONGLETS --> <script type="text/javascript"> <!-- document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet"> <ul class="conteneur_onglets"> <li onClick="change_cat(1)" class="onglet actif" id="onglet_1"> Staff </li> <li onClick="change_cat(2)" class="onglet " id="onglet_2"> Avant d'accoster sur les continents </li> <li onClick="change_cat(3)" class="onglet " id="onglet_3"> Bienvenue Sur Enkidiev </li> <li onClick="change_cat(4)" class="onglet " id="onglet_4">Premiers pas sur Irianeth ... </li> </ul></div>'); var compteur_cat = 1; function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').fadeIn(); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } } function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >'); } else { $('#conteneur_barre_onglet').css("display","block"); document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" style="display:none;">'); } compteur_cat++; } //--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <script type="text/javascript"> <!-- capture_cat(); //--> </script> <!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </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}> <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div><div class="stats">{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages<br />{catrow.forumrow.LAST_POST}</div> <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> </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> |
|
|
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Mar 13 Déc - 6:24 | |
| Non, je met en prévisualisation pour voir ce que ça donne =3 heu c'est mieux de tester sur un forum test ? Edit' finalement j'ai testé et ça fonctionne sur un forum test et en faite ça fonctionne, la prévisualisation et la mise en place. J'en conclu que ça va fonctionner sur le véritablement forum non ? ^^' |
|
 | |
 | Sujet: Re: Aide en codage. Mar 13 Déc - 10:51 | |
| yep  ça ira sans souci  Ensuite, il ne te reste qu'à bosser la mise en page  Tu as une idée de comment tu veux mettre en page "les onglets" ? |
|
 | |
 | Sujet: Re: Aide en codage. Mar 13 Déc - 18:08 | |
| Bon ça va alors ^^ Je voudrais que les onglets soit les uns à côtés des autres, sur un fond de couleur uni et heuu les angles arrondis en haut à gauche et en bas à droite et que quand on passe la souris sur l'onglet le texte se "dédouble" je crois que c'est une ombre qu'on ajoute et heuuu c'est tout x) |
|
 | |
|