Je ne comprend pas comment on peut faire un forum sous onglets...

[tony59]

---

Bonjour,

J'aimerais changer ma page d'accueil pour que les différentes rubriques soient accessibles via des onglets,
c'est à dire qu'à première vue quand on ouvre le forum on accède à toutes les rubriques comme maintenant, mais qu'ensuite à côté
(en haut horizontalement) il y aie les différents titres de catégories en onglets puis quand on clic dessus les différents sous forums avec leurs descriptions etc. J'ai essayer de suivre l'astuce concernée mais je n'y comprend pas grand chose.
En effet, j'ai beau arriver à ça :

Code:


        <div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Mon contenu 1</div>
            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
            <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
        </div></div></ul></div>

Ok je peux changer les titres, mais dans les "contenus" je met quoi pour que soient affichés les sous forums... ???

[shirabi]

Essayer de vous aidez de ce sujets :https://forum.forumactif.com/t311835-page-d-accueil-a-plusieurs-onglets

Cordialement.

[tony59]

Bonjour Shirabi,

Merci beaucoup mais... non, ça dit "-> Vous sélectionnez le template complet et le remplacez par celui-ci:" ce n'est pas du tout ce que je veux faire, j'ai déjà fait pas mal de modifications donc voilà, je ne voudrais pas tout perdre, dommage que rien n'est détaillé pour dire exactement ce qu'il faut changer...

Et puis ça dit d'ajouter ça en CSS :

Code:

        .my_modified_table{
          width: 80%;
          margin-left: 10%;
        margin-right: 10%;
        margin-top: 5px !important;
       
        font-family: Verdana;
        }
       
        .my_forum_name{
          display:none;
        }
        .my_img{
        width: 10%;
        margin-left: 50px;
        }
        .my_disc{
        width: 70%;
        text-align:center;
        font-size: 13px;
        }
        .my_stats{
       
        width: 20%;
        text-align:center;
        }
       
        .myfoo_title{
          text-align:center;
          width: 100%;
          -moz-border-radius: 6px;
          border: 1px solid #EAEAEA;
       
        }
        .my_title{
          text-align:center;
          font-size: 14px;
        font-family: Arial;
        }
       
        .my_cat_body{
        border: 1px solid #EEE;
        -moz-border-radius: 3px;
       
        }
       
        .my_cat ul{
        margin:0;
        padding: 0;
        width: 800px !important;
        }
        .my_cat li{
        margin-left: 2px;
        }
        .my_cat_style{
        border-top: 1px #666 solid;
        border-left: 1px #666 solid;
        border-right: 1px #666 solid;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
        text-align:center;
        font-size: 11px;
        padding-left:10px;
        padding-right:10px;
        display:inline;
        background-color: #EAEAEA;
        width: 200px;
        font-family: Arial;
        font-weight: bold;
       
        }
        .my_cat a{
        text-decoration: none !important;
        color: #000;
        }

J'avais déjà ajouter ça comme précisé dans l'astuce

Code:

       
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .mon_onglet:hover{
          background: #b8efa1;
        }       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;}
        #mes_contenus, #mes_onglets{
          width: 400px;
          margin: auto;}

Cela veux t il dire qu'il faut que je retire ça?

Désolé mais je ne comprend rien comme ça, quand j'essaie de me débrouiller tout seul à rechercher ce qu'il faut modifier exactement ça me dit "La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte." :'(

[Invité]

Bonjour,

L'astuce concerne le message d'accueil, et non pas l'index. Si j'ai bien compris, vous souhaitez modifier l'index de votre forum. Dans ce cas, il faut passer par une modification du template index_box. Vous avez la possibilité d'utiliser un générateur pour obtenir vos onglets. Il faudra ensuite relever les class pour créer le CSS personnaliser correspondant.

Je déplace le sujet dans Problèmes avec le CSS/ les templates.

Cordialement.

[tony59]

Bonjour,

Oui il s'agit bien de ça mais j'ai beau utiliser ce générateur, je ne peux que choisir les titres des onglets... comment faire pour que son contenu soit les forums des catégories etc... je n'ai pas compris ce qu'il fallait faire avec le css désolé :'(

[tony59]

Up?

[Invité]

Bonjour,

Si vous avez modifié le template Index_Box, pourriez-vous nous le donner? Cela permettra d'inclure vos modifications dans les explications.

On va prendre le problème autrement . J'ai fait une exemple rapide sur mon forum test, en reprenant en gros les catégories de votre forum. En me servant du générateur, j'ai créé le template qui me permet d'avoir les onglets. J'ai ajouté la partie CSS ( avec des couleurs affreuses, mais c'est plus facile pour tester ). Dites-moi si c'est quelque chose comme cela que vous souhaitez.

Cordialement.

[tony59]

Bonjour Isolde, ok
Voici mon template :

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>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <th nowrap="nowrap" width="100%" class="secondarytitle"> <font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></h1>
                              </td></th>
              <th nowrap="nowrap" width="55">TOPICS</th>
              <th nowrap="nowrap" width="55">POSTS</th>
              <th nowrap="nowrap" width="130"><div style="width:160px;">LE DERNIER POST ?</div></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>
              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <table width="100%" border="0" cellspacing="1" cellpadding="0"><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}</span>
                <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></table></td>
              <td class="row3" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.TOPICS}</span>
              </td>
              <td class="row2" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.POSTS}</span>
              </td>
              <td class="row3 over" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->
        <meta http-equiv="refresh" content="150" />
        <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>

Oui c'est exactement quelque chose dans ce genre là que je voudrais, j'imagine après qu'on peut simplement changer les couleurs, ou faire des rectangle etc à la place via le CSS de toute façon

[tony59]

Up ! J'ai modifier mon template tout à l'heure, voici le bon, désolé :

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>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <th nowrap="nowrap" width="100%" class="secondarytitle"> <font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></h1>
                              </td></th>
              <th nowrap="nowrap" width="55">TOPICS</th>
              <th nowrap="nowrap" width="55">POSTS</th>
              <th nowrap="nowrap" width="130"><div style="width:160px;">LE DERNIER POST ?</div></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>
              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <table width="100%" border="0" cellspacing="1" cellpadding="0"><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}</span>
                <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></table></td>
              <td class="row3" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.TOPICS}</span>
              </td>
              <td class="row2" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.POSTS}</span>
              </td>
              <td class="row3 over" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->
        <meta http-equiv="refresh" content="150" />
        <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>

[Invité]

Bonjour,

Je crois que tout est bon dans le template:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<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">Membre</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Candidats</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">A commenter</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Presse</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Secrets et indices</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6">Rumeurs et sccops</li>
<li onClick="change_cat(7)" class="onglet " id="onglet_7">Endemol</li>
<li onClick="change_cat(8)" class="onglet " id="onglet_8">Souvenirs</li>
<li onClick="change_cat(9)" class="onglet " id="onglet_9">A propos du forum</li>
<li onClick="change_cat(10)" class="onglet " id="onglet_10">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%" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" width="100%" 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 nowrap="nowrap" width="100%" class="secondarytitle"><font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
 <a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="160"><div style="width:160px;">LE DERNIER POST ?</div></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>
              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <table width="100%" border="0" cellspacing="1" cellpadding="0"><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}</span>
                <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></table></td>
              <td class="row3" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.TOPICS}</span>
              </td>
              <td class="row2" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.POSTS}</span>
              </td>
              <td class="row3 over" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
<meta http-equiv="refresh" content="150" />
        <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>

J'ai nommé les catégories d'une manière assez courte parce que j'ai un tout petit écran, et avec un nom plus long les onglets se mettent sur 2 lignes. Les onglets sont mis en place grâce à une liste et à du javascript. Pour ajouter un onglet, il faut ajouter un élément à la liste (<li...></<li>) avant la fin de la liste (/ul) .

Dans votre feuille CSS, il faut ajouter le code ci-dessous, je l'ai réduit au plus simple:

Code:

/*onglets categories*/
.onglet {
float: left;
margin-left:8px;
margin-bottom:-2px;
text-decoration: none !important;
border: 1px solid #000000;
padding: 5px;
background: bleu;
list-style-type:none;
font-size: 14px;}

/*onglet au survol*/
.onglet:hover{
color: #ff0000;
font-size: 14px;}

/*onglet selectionné*/
.actif {
background: gray;}


Je ne sais pas par où commencer pour expliquer tout ça donc posez-moi des questions, n'hésitez pas.

Cordialement.

[tony59]

Bonjour Isolde,

Je ne comprend pas trop, je ne vois aucune modification, rien n'a changer quand j'ai remplacer ce template et ajouter ce css ...

Je ne vois ni onglet nul part ni quoi que ce soit d'autre :'(
Aussi, je m'excuse davance mais quand j'avais dit "Up ! J'ai modifier mon template tout à l'heure, voici le bon, désolé : " je m'étais trompé j'avais remis le même template que lors du message précédent, c'est à dire l'ancien, pas encore modifié, le bon était celui ci :

Spoiler:

Est ce que ça serait possible de revoir avec le nouveau, ou bien d'expliquer les changements exactement s'il vous plait?

[tony59]

Up!

Peut être un soucis avec ma page CSS ?
La voici au cas où :

Code:

{ text-decoration: none; }
blink {
          visibility: expression((function(){
          if (!window.IEBlink) {
          window.IEBlink = "visible";
          setInterval(function() {
          window.IEBlink = (window.IEBlink=="visible"?"hidden":"visible");
          var blinks = document.getElementsByTagName("blink");
          for (var i=0; i < blinks.length; i++) { blinks[i].style.visibility=window.IEBlink; }
          }, 700)
          }
          return "";
          })());
        }

  /* Début - style pour vérification pseudo à l'inscription */
#username_reg {
  color: #a90c0c;
}
#username_reg.okusername {
  color: #2f9122;
}
/* Fin - style pour vérification pseudo à l'inscription */

    a { text-decoration: none; }
.colorpicker {
  width: 356px;
  height: 176px;
  overflow: hidden;
  position: absolute;
  background: url(http://goo.gl/4Ptts);
  font-family: Arial, Helvetica, sans-serif;
  display: none;
}
.colorpicker_color {
  width: 150px;
  height: 150px;
  left: 14px;
  top: 13px;
  position: absolute;
  background: #f00;
  overflow: hidden;
  cursor: crosshair;
}
.colorpicker_color div {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: url(http://goo.gl/zMLUm);
}
.colorpicker_color div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  overflow: hidden;
  background: url(http://goo.gl/QWjxV);
  margin: -5px 0 0 -5px;
}
.colorpicker_hue {
  position: absolute;
  top: 13px;
  left: 171px;
  width: 35px;
  height: 150px;
  cursor: n-resize;
}
.colorpicker_hue div {
  position: absolute;
  width: 35px;
  height: 9px;
  overflow: hidden;
  background: url(http://goo.gl/ZmaO6) left top;
  margin: -4px 0 0 0;
  left: 0px;
}
.colorpicker_new_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 213px;
  top: 13px;
  background: #f00;
}
.colorpicker_current_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 283px;
  top: 13px;
  background: #f00;
}
.colorpicker input {
  background-color: transparent;
  border: 1px solid transparent;
  position: absolute;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #898989;
  top: 4px;
  right: 11px;
  text-align: right;
  margin: 0;
  padding: 0;
  height: 11px;
}
.colorpicker_hex {
  position: absolute;
  width: 72px;
  height: 22px;
  background: url(http://goo.gl/SfqDK) top;
  left: 212px;
  top: 142px;
}
.colorpicker_hex input {
  right: 6px;
}
.colorpicker_field {
  height: 22px;
  width: 62px;
  background-position: top;
  position: absolute;
}
.colorpicker_field span {
  position: absolute;
  width: 12px;
  height: 22px;
  overflow: hidden;
  top: 0;
  right: 0;
  cursor: n-resize;
}
.colorpicker_rgb_r {
  background-image: url(http://goo.gl/yGnwB);
  top: 52px;
  left: 212px;
}
.colorpicker_rgb_g {
  background-image: url(http://goo.gl/n8Mj4);
  top: 82px;
  left: 212px;
}
.colorpicker_rgb_b {
  background-image: url(http://goo.gl/Kc5d4);
  top: 112px;
  left: 212px;
}
.colorpicker_hsb_h {
  background-image: url(http://goo.gl/97xwY);
  top: 52px;
  left: 282px;
}
.colorpicker_hsb_s {
  background-image: url(http://goo.gl/DlZ8F);
  top: 82px;
  left: 282px;
}
.colorpicker_hsb_b {
  background-image: url(http://goo.gl/MJU25);
  top: 112px;
  left: 282px;
}
.colorpicker_submit {
  position: absolute;
  width: 22px;
  height: 22px;
  background: url(http://goo.gl/Lmk3S) top;
  left: 322px;
  top: 142px;
  overflow: hidden;
}
.colorpicker_focus {
  background-position: center;
}
.colorpicker_hex.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_slider {
  background-position: bottom;
}

    .ces1 {color : #ff0829;font-weight: bold;}

.bodyline {
      -moz-border-radius-topright: 80px;
}
.bodyline {
      -moz-border-radius-topleft: 80px;
}
.bodyline {
      -moz-border-radius-bottomright: 80px;
}
.bodyline {
      -moz-border-radius-bottomleft: 80px;
}

input,textarea, select {
border:2px solid #00000;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;}

.numeroid { ... }

.class
{background-color: black;}

.cadreinfo{
background-repeat: no-repeat;
  background-image: url(http://goo.gl/N43mh);
  background-color: #b5bec6;
        border: 2px solid #000000;
  min-height: 83px;
  background-position: 5px 5px;
  padding-left: 85px;
  color: #000;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  width: 80%;
    margin: 5px;
      padding-right: 3px;
      padding-top: 3px;
      padding-bottom: 3px;
}

.mpmsg {
background-color : #ffffff;
color: #FE0101;
background-image:url("http://goo.gl/y3dzk");
}

body {

  font-size:1em;

}

    /*Cadre de l'avatar*/
      .cadravatar  {
    border : 3px solid #000000;
    margin-right : 20px; /*marge à droite pour incorporation du triangle obligatoire*/
    margin-left : 20px; /*marge à gauche pour égaliser, vous pouvez l'enlever si besoin*/
    }

    /*Bulle autour du message*/
    .bulle{
    background-color : #ffffff; /*couleur du fond de la bulle*/
    border : 1px solid #150061; /*couleur de la bordure*/
    -moz-border-radius: 10px ; /*adapter les arrondis en réglant le 10px des 4 phrases*/
    -webkit-border-radius:10px;
    -border-radius:10px;
    -khtml-border-radius:10px;
    padding : 5px; /*espacement interne obligatoire pour éviter les débordements de texte et d'images*/
    }
    /*Image du triangle de la bulle*/
    .attache {
      background-image : url("http://goo.gl/zz6Wt"); /*Image du triangle de la bulle à vous de faire la votre, vous pouvez prendre modèle sur la mienne*/
    width: 20px; /*largeur de l'image à remettre, obligatoire*/
    height :20px; /*hauteur de l'image à remettre, obligatoire*/
    position : relative;
    top :50px; /*à régler si besoin il s'agit de la position en hauteur initiale de l'image par rapport à celle qu'elle aura en visuel, obligatoire*/
    left :-19px; /*idem, mais en largeur, calculer facilement, largeur de l'image -1, obligatoire*/
    }

body {
filter:alpha(opacity=97);
-moz-opacity:0.97;
-khtml-opacity: 0.97;
opacity: 0.97;
}

/* CADRE VERT */
.vert{
  background-repeat: no-repeat;
  background-image: url("http://goo.gl/zhFF9");
  padding: 10px;
  width: 500px;
  height: 70px;
  color:#F0E36B;
  font-family: Papyrus, time new roman, serif;
  text-align: center;
  background: #4E3D28;
  border: 1px solid #ffff00;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

        a:hover {
        text-shadow: #ff00ff 1px 1px 1px;
        }


.post {
background-image: url('http://goo.gl/i6fgT');
}

        .fondmsg {
        background-image:url('http://goo.gl/cH8OL');
        }
.row4
        {
    background-image: url('http://goo.gl/Q3D7h');
    background-repeat: repeat;
        }
.tdescrip{
color: #ffffff;
font-size: 8;}

.postbody a:link, .postbody a:visited {
color: #a80000;
background: url('http://goo.gl/iXZrq') bottom right no-repeat;
padding-right: 1px; /* Espacer l'image de fond de la gauche du lien. */
}
.a{
text-decoration: none !important;
}

.sondannon {
color : #ffffff;
}
    .page a {
    color : #ffffff;
    }
    .page {
    color : #ffffff;
    }

.haut
{
margin-left:96%;
margin-top:-16px;

}
.bas
{
margin-left:96%;
margin-top:-16px;
}
    .selectCode { float:right; text-transform: uppercase; cursor:pointer; }

    #savec { position:relative; }
    .save-bloc { dispay: none; color: #555!important; cursor: point; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
    .save-bloc div:hover { color: #050505!important; }
    .save-bloc div { cursor: pointer; }
    .save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

    #right{
    width:0px !important;}
    #left{
    width:0px !important;}

input[name=hideonline] {
 
  display:none;
}

/* CSS pour modifier la taille des images dans les sujets */
div.postbody img { max-width: 825px; max-height: 525px; }

/* CSS pour jQuery lightBox plugin @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) */
#jquery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
}
#jquery-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
#lightbox-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    width: 49%;
    height: 100%;
    zoom: 1;
    display: block;
}
#lightbox-nav-btnPrev {
    left: 0;
    float: left;
}
#lightbox-nav-btnNext {
    right: 0;
    float: right;
}
#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
}
#lightbox-container-image-data {
    padding: 0 10px;
    color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
    width: 70%;
    float: left;
    text-align: left;
}   
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
    display: block;
    clear: left;
    padding-bottom: 1.0em;   
}           
#lightbox-secNav-btnClose {
    width: 66px;
    float: right;
    padding-bottom: 0.7em;   
}


#oneline
{
background: url('http://2img.net/i/fa/Offline.png') no-repeat;
width: XXpx;
height: XXpx;
padding: 0;
border: 0;
}

        #fa_ticker_block td{background: none !important;}
        #fa_ticker_block table{background: none !important;}

                /*--- Cette partie correspond à la description du forum ---*/
                .forum-description {
                      margin: auto;
                      padding: 10px;
                      color: #fff;
                      width: 75%;
                      border: 4px solid #fff;
                      -moz-border-radius: 14px;
                      -webkit-border-radius: 14px;
                      font-size: 12px;
                }
             
                /*--- Cette partie correspond à l'onglet "X messages dans X topics" ---*/
                .forum-stats {
                      -moz-border-radius-topleft: 20px;
                      -moz-border-radius-topright: 20px;
                      -webkit-border-top-right-radius: 20px;
                      -webkit-border-top-left-radius: 20px;
                      border-top-right-radius: 20px;
                      border-top-left-radius: 20px;
                      border-bottom: 0 none !important;
                      border-left: 3px solid #fff;
                      border-right: 3px solid #fff;
                      border-top: 3px solid #fff;
                      color: #fff;
                      font-size: 11px;
                      font-style: italic;
                      height: 15px;
                      left: 280px;
                      padding: 3px;
                      position: relative;
                      text-align: center;
                      width: 225px;
                }
             
                /*--- Cette partie correspond à l'affichage des sous-forums ---*/
                .forum-sousforum {
                      color: #fff;
                      border: 0px solid #fff;
                      border-top: 0px !important;
                      -moz-border-radius-bottomleft: 14px;
                      -moz-border-radius-bottomright: 14px;
                      -webkit-border-bottom-right-radius: 14px;
                      -webkit-border-bottom-left-radius: 14px;
                      border-bottom-right-radius: 14px;
                      border-bottom-left-radius: 14px;
                      margin: auto;
                      padding: 0px;
                      color: #fff;
                      width: 60%;
                      text-align: center;
                      height: 100%;
                      font-size: 11px;
                }

        /*onglets categories*/
        .onglet {
        float: left;
        margin-left:8px;
        margin-bottom:-2px;
        text-decoration: none !important;
        border: 1px solid #000000;
        padding: 5px;
        background: bleu;
        list-style-type:none;
        font-size: 14px;}
       
        /*onglet au survol*/
        .onglet:hover{
        color: #ff0000;
        font-size: 14px;}
       
        /*onglet selectionné*/
        .actif {
        background: gray;}

[Invité]

Bonjour,

Merci pour toutes ces précisions, je ne vous oublie pas, mais les modifications à faire et les explications à rédiger me prennent du temps . N'hésitez pas à Upper pour que le sujet reste actif.

Cordialement.

[tony59]

Salut Isolde,

Merci beaucoup, c'est superbe
Ok je fais un UP une foi par semaine pour éviter le verrouillage uniquement si j'ai bien compris?

[Invité]

Bonjour,

Vous avez le droit à un UP par 24 heures . J'ai avancé un peu. Je n'ai pas réussi à inclure les onglets dans votre template modifié. Mais j'ai réussi à inclure vos modifications dans le template donné par le générateur d'onglets. Un détail m'echappent mais je ne sais pas lequel ...

•Etape 1: La hiérarchie du forum.
Pour que les onglets fonctionnent et soient visibles, la hiérarchie du forum doit séparer les catégories sur l'index. Dans panneau d'admin > Affichage > Structure et hiérarchie, choisissez le niveau de compressionde l'index "Séparer les catégories sur l'index - Moyen".

•Etape 2: Le template "de base".
C'est celui que l'on va obtenir en se servant du générateur. Les modifications apportées sont nombreuses dans le template:
-Un script JQuery au tout début du template
-Une liste dont chaque élément correspond à un onglet
-Un code javascript qui permet de faire correspondre chaque onglet avec sa catégorie du forum automatiquement.

•Etape 3: Inclure les modifications.

► Le titre des catégories:
Cherchez:


Code:

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>


et remplacez par:


Code:

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> <font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></h1> </th>


► Les titres des forums:
Ajoutez deux points après:


Code:

<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>


► Les colonnes sujets et messages:
Cherchez et supprimez:


Code:

<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>

et


Code:

<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>


► La modification de présentation des descriptions:
Cherchez:


Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

et remplacez par:


Code:

<div class="forum-stats">Il y a {catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} topics !!!</div>
                <div class="forum-description">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                <div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                </div>


► Le script de rafraîchissement.
A la fin du template, ajoutez:


Code:

                        <meta http-equiv="refresh" content="150" />
                        <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>

•Etape 4: Personnaliser les onglets.
Les onglets sont contenus dans une liste qui est associée à un code javascript. CHaque élément de la liste est donc un onglet, vous pouvez les renommer en remplaçant la partie en rouge:

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

Dans le script vous allez voir ceci:

Code:

if(compteur_cat == 1)
   {
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
   }

Modifiez-le par:

Code:

if(compteur_cat == 1)
   {
      document.write('<table class="forumline" width="100%" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" width="100%" id="categorie_' + compteur_cat + '" style="display:none;">');
   }

Ainsi les catégories prendront toute la place disponible.

Cordialement.

[tony59]

Bonjour,

Merci beaucoup, mais malheureusement, je n'y arrive pas, quand j'essaie de modifier cela avec les modifications du template j'obtiens ceci



J'en suis arrivé à ceci pour mon template :

Code:

                <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                      <td valign="bottom">
                        <!-- BEGIN switch_user_logged_in -->
                        <span class="gensmall">{LAST_VISIT_DATE}
             
                        {CURRENT_TIME}
             
                        </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>
             
                        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
             
                        <!-- END switch_user_logged_in -->
                        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
                      </td>
                  </tr>
                </table>

                              <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> <font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></h1> </th> <font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></h1> </th>

        <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">onglet 1</li>
        <li onClick="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>
        <li onClick="change_cat(3)" class="onglet " id="onglet_3">onglet 3</li>
        <li onClick="change_cat(4)" class="onglet " id="onglet_4">onglet 4</li>
        <li onClick="change_cat(5)" class="onglet " id="onglet_5">onglet 5</li>
        <li onClick="change_cat(6)" class="onglet " id="onglet_6">onglet 6</li>
        <li onClick="change_cat(7)" class="onglet " id="onglet_7">onglet 7</li>
        <li onClick="change_cat(8)" class="onglet " id="onglet_8">onglet 8</li>
        <li onClick="change_cat(9)" class="onglet " id="onglet_9">onglet 9</li>
        <li onClick="change_cat(10)" class="onglet " id="onglet_10">onglet 10</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%" id="categorie_' + compteur_cat + '" >');
          }
          else
          {
              $('#conteneur_barre_onglet').css("display","block");
              document.write('</table><table class="forumline" width="100%" id="categorie_' + compteur_cat + '" style="display:none;">');
          }
         
          compteur_cat++;
        }
       
        //-->
        </script>
       
        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
       
        <script type="text/javascript">
        <!--
          capture_cat();
        //-->
        </script>
                <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>

                      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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> :
             
                            </span>
                        </h{catrow.forumrow.LEVEL}>
             
             
                      <div class="forum-stats">Il y a {catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} topics !!!</div>
                <div class="forum-description">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                <div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                </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="75">
                        <span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->
                        <meta http-equiv="refresh" content="150" />
                        <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>

[Invité]

Bonjour,

Il y a toute une partie qui se répètedans votre template:

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">

Essayez avec le template ci-dessous:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<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}
 
{CURRENT_TIME}
 
</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>
 
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
 
<!-- 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">onglet 1</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">onglet 3</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">onglet 4</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">onglet 5</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6">onglet 6</li>
<li onClick="change_cat(7)" class="onglet " id="onglet_7">onglet 7</li>
<li onClick="change_cat(8)" class="onglet " id="onglet_8">onglet 8</li>
<li onClick="change_cat(9)" class="onglet " id="onglet_9">onglet 9</li>
<li onClick="change_cat(10)" class="onglet " id="onglet_10">onglet 10</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%" id="categorie_' + compteur_cat + '" >');
  }
  else
  {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" width="100%" 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"> <font color="#fcfcfc">LE FORUM SECRET : LA MEILLEUR RÉFÉRENCE SUR LA SAISON 5 DE SECRET STORY</font><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/secretstory.saison5&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" /></a><a href="http://www.wikio.fr//#vurl={FORUM_URL}{TOPIC_URL}" target="_blank"><script src="http://www.wikio.fr/getvote?style=styleold2" type="text/javascript"></script></a></h1> </th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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> :
 
</span>
</h{catrow.forumrow.LEVEL}>
<div class="forum-stats">Il y a {catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} topics !!!</div>
                <div class="forum-description">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                <div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                </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>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
                        <meta http-equiv="refresh" content="150" />
                        <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>

Cordialement.

[tony59]

Mercii Ca marche très bien
Juste une petite question au cas où. Est il possible de faire en sorte que le premier onglet affiche l'intégralité du forum? Ou bien que lorsque l'on arrive sur le forum c'est tout qui s'affiche et non l'onglet 1 "par default" ?

[Invité]

Avec ce script là, je ne suis pas sure que ce soit possible. Je sais qu'Etana avait donner une solution pour avoir plusieurs onglets, dont un global ... il faut juste retrouver le sujet dans les archives . Une fois trouvé,nous pourrons l'adapter à vos modifications ^^.

Cordialement

[tony59]

Ok merci beaucoup, je vais voir ça.

[tony59]

Ah voilà j'ai trouver ici : https://forum.forumactif.com/t300799-besoin-d-aide-pour-des-onglets#2635327
J'ai ajouter dans javascript celui proposé "dans le cadre noir" sur le lien proposé mais rien n'a changer, je ne sais pas ce qu'il faut faire exactement comme modifications?

Edit : Ah désolé j'ai pas fais exprès de faire le double post, j'ai voulu supprimé pour rééditer sur l'ancien message mais on peut pas supprimer nos posts ici. Ca n'arrivera plus désolé

[tony59]

Un petit UP au cas où Etana passerait par ici. On n'est pas à une demi heure près je suppose

[tony59]

Gros UP s'il vous plait?
J'ai l'impression qu'il n'y a plus grand chose à faire pourtant...

[tony59]

Up???

[tony59]

Up?

[Invité]

Bonjour,

Le problème d'installation des onglets est résolu, pour l'adaptation d'un onglet regroupant toutes les catégories, vous avez réouvert un sujet ici:
> https://forum.forumactif.com/t315011-mettre-tout-les-forums-sur-le-premier-onglet-adapter-un-template-a-un-script-propose-par-etana . Je verrouille donc celui-ci.

Cordialement.