catégories en onglets + onglets sur la droite

[Ossyane]

Bonjour !

Comme de nombreuses personnes, j'aimerais avoir des catégories en onglets. Cependant, j'aimerais qu'ils se situent à droite, comme sur l'image ci-dessous :

Spoiler:

(l'image provient de ce magnifique forum : agency)

J'ai trouvé deux tutos pour avoir les catégories en onglets, mais ils demandent de remplacer intégralement le template index_box, mais je l'ai modifié et ne veux pas tout perdre. Je ne m'y connais pas trop en template, mais je ne veux pas non plus qu'on me mâche le travail, hein, ce n'est absolument pas ce que je demande.

Et bien voilà, je serais très reconnaissante à la (ou les !) personne(s) qui pourront m'aider C:

[Lixyr]

Bonjour. (ou Bonsoir).

Si vous le désirez, vous pouvez me poster votre template index_box modifié, ainsi que votre CSS modifié. Je tâcherai d'expliquer comment introduire les onglets à l'intérieur, et potentiellement, à gauche, tout en gardant vos modifications.

Cordialement.

[Ossyane]

Salut !

Merci de me répondre, c'est vraiment gentil de m'aider ♥

Donc, voilà ce que vous demandez :
- le template index_box :

- et mon CSS :

[Lixyr]

Oulala. Utilisez la balise code, également, la prochaine fois. Ce sera plus pratique.


Bon, pour les catégories en onglets, y a pas de soucis :

Code:

 <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->

</span>
<!-- END switch_user_logged_in -->

</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->
</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">Le Blabla Habituel </li>
    <li onClick="change_cat(2)" class="onglet " id="onglet_2">Personnages</li>
    <li onClick="change_cat(3)" class="onglet " id="onglet_3">Vies et Personnages</li>
    <li onClick="change_cat(4)" class="onglet " id="onglet_4">Paris </li>
    <li onClick="change_cat(5)" class="onglet " id="onglet_5">The Free Zone</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" id="categorie_' + compteur_cat + '" >');
      }
      else
      {
          $('#conteneur_barre_onglet').css("display","block");
          document.write('<table class="forumline" 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>
    <td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
    <div class="logo-titre"></div>
    <div class="titre-cat">{catrow.tablehead.L_FORUM}</div>

    </td>
                </tr>
                <!-- END tablehead -->
                <!-- BEGIN cathead -->



<tr>

<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>

</span>
</h{catrow.forumrow.LEVEL}>

<span class="genmed">{catrow.forumrow.FORUM_DESC}
</div><div class="forum-stats">{catrow.forumrow.POSTS} dossiers et {catrow.forumrow.TOPICS} feuilles volantes</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 -->

</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall"><div class="derniers_messages">{catrow.forumrow.LAST_POST}</div></span>
</td>

<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->


Cependant, pour les mettre à gauche, j'ai essayé pas mal de combinaisons, mais aucune de fonctionne bien. Je ne peux pas utiliser de tableaux, comme pour les onglets sur la PA, à cause des balises, et la position relative les places bien à gauche, ou a droite, seulement, l'écart concret des onglets, à la place où ils devraient être, reste. Hum... je ne sais pas comment modifier ça.

J'ai également essayé un autre code pour les onglets, mais ça reste encore sans résultat.

Je vous ai donc mis ici, pour l'instant, votre template modifié avec le code des onglets que j'ai rajouté.
Attendons de voir si quelqu'un sait mieux que moi, pour placer les onglets sur le côté.



Cordialement,
Lixyr.

[Ossyane]

Merci pour le code, c'est sympa.

Par contre les méthodes qui ne sont pas supers... qu'est-ce qu'elles donnent ? Ca pourrait éventuellement me convenir car je ne souhaite pas les coller au bord du forum en fait.

[Lixyr]

Ajoutez ceci dans le css :

Code:

  .onglet{
    display:inline-block;
    padding:5px;
    }

))

Et bien si vous voulez savoir, la meilleure "donne" que j'ai eu fut celle-là :

css à rajouter :

Code:

    .onglet{
    display:inline-block;
    padding:5px;
    }

#conteneur_barre_onglet {-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
border:2px solid #5C3C3D; background-color:#875859; padding:10px; display:block; position:relative; left:-220px; top:100px;width:150px;}


et template à rajouter :

Code:

 <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->

</span>
<!-- END switch_user_logged_in -->

</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->
</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">Le Blabla Habituel </li>
</ul>
<ul>
    <li onClick="change_cat(2)" class="onglet " id="onglet_2">Personnages</li>
</ul>
<ul>
    <li onClick="change_cat(3)" class="onglet " id="onglet_3">Vies et Personnages</li>
</ul>
<ul>
    <li onClick="change_cat(4)" class="onglet " id="onglet_4">Paris </li>
</ul>
<ul>
    <li onClick="change_cat(5)" class="onglet " id="onglet_5">The Free Zone</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" id="categorie_' + compteur_cat + '" >');
      }
      else
      {
          $('#conteneur_barre_onglet').css("display","block");
          document.write('<table class="forumline" 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>
    <td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
    <div class="logo-titre"></div>
    <div class="titre-cat">{catrow.tablehead.L_FORUM}</div>

    </td>
                </tr>
                <!-- END tablehead -->
                <!-- BEGIN cathead -->



<tr>

<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>

</span>
</h{catrow.forumrow.LEVEL}>

<span class="genmed">{catrow.forumrow.FORUM_DESC}
</div><div class="forum-stats">{catrow.forumrow.POSTS} dossiers et {catrow.forumrow.TOPICS} feuilles volantes</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 -->

</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall"><div class="derniers_messages">{catrow.forumrow.LAST_POST}</div></span>
</td>

<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->


Comme vous le voyez, le problème reste le grand écart marqué au dessus des forums : la place que doit prendre normalement les onglets est marquée par l'écart. Même si le block est bougé de place.



*edit*

Hum j'ai parlé trop vite. J'ai réussi à trouver une alternative, en rajoutant une hauteur de 0px :

Rajoutez ceci dans le template (en vert) :

<script type="text/javascript">
<!--

document.write('<div align="center" style="display:none;height:0px;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">

[Ossyane]

Woaw ! c'est déjà époustouflant que vous soyez arrivé à faire ça !
Mais malheureusement oui, l'écart reste un peu important. bah, je vais faire des onglets habituels alors ;D

Encore merci !

[Lixyr]

J'ai trouvé quelque chose qui pourrait vous intéresser.

Essayez ceci :

template :

Code:

 <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->

</span>
<!-- END switch_user_logged_in -->

</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->
</td>
</tr>
</table>



<!-- DEBUT MODIF ONGLETS -->


 <script type="text/javascript">
    <!--

    document.write('<div align="center" style="display:none;height:0px;" id="conteneur_barre_onglet">
    <ul class="conteneur_onglets">

    <li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Le Blabla Habituel </li>
</ul>
<ul class="conteneur_onglets">
    <li onClick="change_cat(2)" class="onglet " id="onglet_2">Personnages</li>
</ul>
<ul class="conteneur_onglets">
    <li onClick="change_cat(3)" class="onglet " id="onglet_3">Vies et Personnages</li>
</ul>
<ul class="conteneur_onglets">
    <li onClick="change_cat(4)" class="onglet " id="onglet_4">Paris </li>
</ul>
<ul class="conteneur_onglets">
    <li onClick="change_cat(5)" class="onglet " id="onglet_5">The Free Zone</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" id="categorie_' + compteur_cat + '" >');
      }
      else
      {
          $('#conteneur_barre_onglet').css("display","block");
          document.write('<table class="forumline" 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>
    <td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
    <div class="logo-titre"></div>
    <div class="titre-cat">{catrow.tablehead.L_FORUM}</div>

    </td>
                </tr>
                <!-- END tablehead -->
                <!-- BEGIN cathead -->



<tr>

<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>

</span>
</h{catrow.forumrow.LEVEL}>

<span class="genmed">{catrow.forumrow.FORUM_DESC}
</div><div class="forum-stats">{catrow.forumrow.POSTS} dossiers et {catrow.forumrow.TOPICS} feuilles volantes</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 -->

</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall"><div class="derniers_messages">{catrow.forumrow.LAST_POST}</div></span>
</td>

<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->


et css :

Code:

  .onglet{
    display:inline-block;
    padding:5px;
    }

#conteneur_barre_onglet { display:block; position:relative; left:-200px; top:10px;width:150px;}

.conteneur_onglets {-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
border:2px solid #5C3C3D; background-color:#875859; padding:10px;}


Si ça vous plait, je me mets à l'explication des codes et on modifiera ça de manière à ce que ça s'accorde avec votre forum.

[Ossyane]

Ah oui, ça marche bien !

Par contre je ne sais pas trop comment modifier l'ordre des catégories, je veux dire changer certaines catégories d'onglet parce ça ne correspond pas vraiment en fait et que j'ai peur de faire une bêtise ^^"

[Lixyr]

Oui je sais. Je vais manger, et je vous explique le code ensuite. ^^


*edit*

Alors, le code, comme indiqué :

<script type="text/javascript">
<!--

c'est du javascript.

Comment marche-t-il ?


Je ne suis pas encore experte en javascript, alors je vais contourner le sujet du "qu'est-ce que tous ces petits mots veulent dire" pur n'expliquer que l'essentiel : ce qu'il faut savoir pour pouvoir modifier ses onglets sans soucis :


Regardons la structure :

<!--

document.write('<div align="center" style="display:none;height:0px;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">

Nous avons l'id de la div contenant les onglets : ça va permettre de pouvoir déplacer le contenu via du css (ce que j'ai fait) afin de le manier comme on veut.

On a ensuite la classe de la balise <ul>. C'est ça qui est intéressant :

<ul class="conteneur_onglets">
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Personnages</li>
</ul>

Chaque liste correspondant aux onglets est entourée d'une ligne de liste (j'appelle ça comme ça) : <ul> dont la classe est conteneur_onglets.
Si vous regardez dans les codes css que je vous ai donné plus haut : conteneur_onglets correspond à la classe de chacune des "listes". C'est à dire que par cette classe, vous pouvez modifier la bordure, la couleur de fond etc de ce qui entoure les onglets.
(ps :Les balises <ul> et <li> marchent comme les balises <tr> et <td> pour les tableaux, si vous connaissez.)
Comme son nom l'indique, donc, la balise <ul> contient les onglets.


Alors pour faire simple, disons que l'ID permet de modifier le bloc entier contenant tous les onglets, et que la classe de l'ul permet de modifier le conteneur de chaque onglet (bordure, fond etc qui entoure l'onglet).


On descend encore :

<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Le Blabla Habituel </li>
</ul>
<ul class="conteneur_onglets">
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Personnages</li>
</ul>
<ul class="conteneur_onglets">
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Vies et Personnages</li>
</ul>
<ul class="conteneur_onglets">
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Paris </li>
</ul>
<ul class="conteneur_onglets">
<li onClick="change_cat(5)" class="onglet " id="onglet_5">The Free Zone</li>

Si vous regardez bien, ici, nous avons disposé les cinq onglets : chaque onglet est numéroté par ordre croissant :

Le premier onglet :
<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Le Blabla Habituel </li>

le premier onglet est chiffré d'un 1.
Chaque onglet a son numéro, je ne pense pas que l'ordre importe, mais je n'ai pas essayé. Pour comprendre un peu, sachez que ce code est expliqué, codé par cette partie, dans le javascript, plus bas :

/* affichage du bon onglet */
$('.actif').removeClass("actif");
$('.ongletolor=violet]+numero+']').addClass("actif");

Si on lit, même sans s'y connaitre en javascript, on peut aisément comprendre que ce qui permet au code de bien fonctionner, et donc au navigateur de bien afficher le bon onglet, c'est le fait que chaque onglet est associé à son numéro de cette manière : onglet_numero.

Il ne faut donc pas toucher à ces parties du code, qui correspondent au script Js.

Ce que vous pouvez toucher :
Ce sont les titres de ces onglets :

<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Le Blabla Habituel </li>

L'onglet 1 comporte la classe "onglet actif", pour désigner cet onglet comme celui qui sera affiché quand on lance la page. C'est pourquoi les autres onglets n'ont que la classe "onglet". C'était une petite parenthèse.

Alors vous pouvez changer les noms des titres des catégories comme ici : Le Blabla Habituel.


Si vous n'avez pas assez d'onglet :
vous pouvez rajouter ces lignes, en suivant ce schéma :

<ul class="conteneur_onglets">
<li onClick="change_cat(NUMERO_DE_LONGLET)" class="onglet " id="onglet_NUMERO_DE_LONGLET">TITRE_DE_LONGLET</li>
</ul>

modifier uniquement ce qui est en vert, sans se tromper dans les chiffres.
Faites attention, quand vous rajouter votre dernier onglet, à ne pas avoir deux balises </ul> :

<li onClick="change_cat(4)" class="onglet " id="onglet_4">Paris </li>
</ul>
<ul class="conteneur_onglets">
<li onClick="change_cat(5)" class="onglet " id="onglet_5">The Free Zone</li>
</ul>

</ul></div>');

Modifier l'apparence des onglets :

Maintenant, vous pouvez modifier vos onglets, les titres notamment, dans le template.
Cependant, vous modifier l'aspect, vous pouvez
- soit utiliser la classe de l'ul contenant les onglets, c'est à dire utiliser la classe : conteneur_onglets
- ou bien utiliser la classe générale à chaque onglet : .onglet
- ou bien utiliser l'id de chaque onglet, de cette manière dans le css :

Code:

#onglet_1 {CODE}

et ainsi, personnifier chaque onglet etc.

Seulement, je ne vois pas encore la possibilité de modeler l'onglet qui est sélectionné.
J'ai bien trouvé comment modifier l'onglet au passage de la souris. Facile c'est :

Code:

    .onglet:hover{
    display:inline-block;
SUITE DU CODE    }


mais onglet:selected ne semble pas fonctionner.


Voilà donc pour les explications. J'espère avoir été assez claire.

Bon courage à vous.

[Ossyane]

Oui, ce fut assez clair, merci.

J'ai réussi à modeler mes onglets selon l'apparence de mon forum, et puisque je ne savais pas intégrer deux catégories dans un onglets j'ai fusionné mes catégories. Ça marche très bien maintenant, merci !

[Lixyr]

Super. Ravie d'avoir pu faire ça.