Faire des onglets catégories Edit: 2eme problème!

Bonjour bonjour! Voilà j'ai un petit problème.
Je voudrais installer sur mon forum ces catégories. Seulement, comme mon forum est assez long, j'aimerais rajouter un système d'onglets qui permette de changer de catégories au clic d'un bouton spécifique ^^

Je ne sais pas si c'est trop compréhensible, mais si vous ne comprenez pas, n'hésitez pas à me poser plus de questions ^^'

Merci beaucoup d'avance!


Edit: Après avoir installé le système d'onglets suite au tuto que m'a montré Onyx, j'ai encore un petit problème:
Lorsque je clique sur un forum depuis la page d'accueil pour accéder aux sous forums, ceux ci ont disparus! Comment faire pour les faire réapparaitre?

Salut!

Tu as ce LS-Tuto qui te permet de faire des catégories en onglets. Tu peux commencer par installer tes catégories selon le LS que tu as choisi, puis suivre les instruction pour rajouter des onglets

Oh merci beaucoup j'avais pas vu ce tutoriel! :o
Je file voir ça ^^
Merci Onyx :3

Salut ^^

Il faut savoir que le tuto de Vic est pratique quand on a pas modifié son template, parfois, quand le template est déjà modifié et qu'on ajoute des catégories personnalisés le tuto ce met un peu à bugger.

En fait, la raison est que dans son tuto de base, il ne ferme pas une balise au bon endroit (mais ça, ça arrive, volontaire ou erreur je sais pas) mais ce soucis était réglé par la générateur. C'est pourquoi il était mieux d'utiliser le générateur quand on avait des catégories modifiés, sauf que... Le générateur est mort, paix à son âme...

Je sais pas si le problème vient de là avec toi, puisqu'il est possible que ça vienne juste du JS qui fais déconner un peu tes forums, du coup, on pourrait avoir le lien du dis forum (en hide) histoire de voir si ça viens plus du JS ou plus du template ?

Je pense quand même que ça viens des balises mal fermé, si je ne m'abuse, dans ton template tu devrais avoir :

Code:

<!-- END tablefoot --></div></div><!-- END catrow -->

Alors, je ne sais pu (à une époque je l'avais retenu par coeur XD) si c'est les deux balises qui sont mal fermé ou une seule (enfin en soit, elles sont bien fermé, elles ne sont juste pas fermé après ou avant le bon commentaire )

Du coup bah soit c'est :

Code:

</div><!-- END tablefoot --><!-- END catrow --></div>

soit

Code:

<!-- END tablefoot --></div><!-- END catrow --></div>

Avec un penchant plus sur pour la deuxième, test avec les deux, et vois si l'un des deux règles ton soucis

Coucou! Merci de t'intéresser à mon problème ^^
Vu que mon forum est en travaux, j'ai réinstallé pareil sur mon forum test: Ici

Même avec le deux codes que tu m'as donnés, ça ne marche toujours pas U.U

Mmh... J'arrive pas à bien cerner le problème, ni même le voir vraiment, à part que sur le forum que tu me donnes, il n'y a pas de sous-forums donc impossible de les tester, et ton jeu d'onglets ne marche pas du coup :s

Je pourrais avoir les codes (sous hide si tu veux) que tu as utilisé pour les catégories pour tester sur mon forum de test à moi, tenter de reproduire le bug, et de t'apporter une aide ensuite ? ^^

C'est souvent ça le problème avec moi, c'est que je ne suis pas bonne en explications U.U
Voici le template:

Code:

 <link href="http://fonts.googleapis.com/css?family=Cinzel+Decorative|Metamorphous" rel="stylesheet" type="text/css" />
<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>

  <div id="conteneur_onglets">
    <center><table><tr>
      <td class="onglets"><div></div></td>
      <td class="onglet"><div><div class="image_onglets"><img class="duree image_bam" src="http://zupimages.net/up/15/20/xzsa.png" /></div></div></td>
      <td class="onglet"><div><div class="image_onglets"><img class="duree image_bam" src="http://zupimages.net/up/15/20/it8c.png" /></div></div></td>
      <td class="onglet"><div><div class="image_onglets"><img class="duree image_bam" src="http://zupimages.net/up/15/20/tdqz.png" /></div></div></td>
      <td class="onglet"><div><div class="image_onglets"><img class="duree image_bam" src="http://zupimages.net/up/15/20/e4yy.png" /></div></div></td>
      <td class="onglet"><div><div class="image_onglets"><img class="duree image_bam" src="http://zupimages.net/up/15/20/mphb.png" /></div></div></td>
      </tr></table><div class="barre_onglets"> </div></center>
  </div>

 <div id="conteneur_categories">  <!-- BEGIN catrow -->
 <!-- BEGIN tablehead --><div class="categorie">
<div class="cate_titre"><span class="catetitre_bloc"></span>
  <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>

 <!-- END tablehead -->
 <!-- BEGIN cathead -->


 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 

<div class="forum_bloc">
<div class="forum">
 
  <span class="forumlink">
  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  </span>
 
  <div class="forum_contenu">
    {catrow.forumrow.FORUM_DESC}<br />
   
    <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
      <td><span class="stats_lastpost">
        <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
        <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
        </span></td>
      </tr></table></div>
   
  </div>
 
  <div class="sous_forum">
    <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
    <span class="ouverture_sousforum">Voir les sous-forum</span>
  </div>
 
</div>
</div>


 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->

  <!-- END tablefoot --></div><!-- END catrow --></div>

Le CSS:

Code:

.duree {-o-transition-duration: 2s;
webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}/* MISE EN FORME DES CATEGORIES ET FORUMS */
 
 
  /* CSS pour le conteneur des catégories */
  #conteneur_categories
  {
      display: none;
  }

  /* CSS pour les catégories */ 
  .categorie
  {
 
  }
 
  /* CSS pour le conteneur des onglets */
  #conteneur_onglets
  {
      display: none;
  }
 
  /* CSS pour les onglets */
  .onglet
  {
      cursor: pointer;
  }
 
.barre_onglets{
  width:85%;
  height:10px;
  background-color: #FFEFB6;
  box-shadow: 0px 0px 6px;
  margin-top: 30px;
 
}

.image_onglets{
  margin-bottom: -30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 0px 3px;
}

.image_bam{
  transform: rotate(0deg);
  webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  border-radius: 50%;
}

.image_bam:hover {
  transition-property: transform, -moz-transform, webkit-transform, -o-transform;
  transform: rotate(359deg);
  webkit-transform: rotate(359deg);
  -moz-transform: rotate(359deg);
  -o-transform: rotate(359deg);
}
 

.cate_titre
{
  clear: both;
  height: 100px;
  margin-top: 50px;
}
.catetitre_bloc
{
position: relative;
z-index: 1;
display: block;
width: 90%;
height: 20px;
margin-left: auto;
margin-right : auto;
background-color: #FFFAFA;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-htm-transform: rotate(5deg);
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 950px;
margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
text-align: center;
padding: 2px;
  border-bottom: 3px dotted #FFA420;
}
.catetitre
{
color: #FF9300;
font-family: Metamorphous;
font-size: 26px;
font-weight: bold;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
}

.forum_bloc
{
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
}
.forum
{
float: left;
width: 460px;
height: 250px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
}
a.forumlink
{
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: #FFA420 !important;
  text-align: center;
font-family: arial;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
a.forumlink:hover
{
  letter-spacing: 4px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.forum_contenu
{
  position: relative;
  z-index: 1;
  width: 98%;
  height: 90%;
  padding: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -8px;
  background-color: #f7efbd;
  border-left: 1px dotted #FFFAFA;
  border-right: 1px dotted #FFFAFA;
  border-bottom: 1px dotted #000000;
  border-top: 5px solid #FFFAFA;
}
.description
{
  display: block;
  width: 400px;
  margin: auto;
  height: 100px;
  overflow: hidden;
  border: 2px solid #9c9c9c;
  box-shadow: 1px 1px 1px #191817;
  -moz-box-shadow: 1px 1px 1px #191817;
  -htm-box-shadow: 1px 1px 1px #191817;
  -webkit-box-shadow: 1px 1px 1px #191817;
  -o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
  position: absolute;
  display: block;
  width: 391px;
  height: 91px;
  overflow: auto;
  background-color: #FFFAFA;
  font-size: 10px;
  color: #000000;
  text-align: justify;
  padding: 5px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.icone_stats
{
  width: 300px;
  margin: auto;
  margin-top: -30px;
}
.stats_lastpost
{
  display: block;
  width: 160px;
  height: 80px;
  margin-left: 10px;
  background-color: #FFFAFA;
  border: 1px solid #b5b5b5;
  padding: 5px;
  text-align: center;
}
.stats
{
  display: block;
  margin-bottom: 5px;
  border-bottom: 1px dotted #b5b5b5;
  padding-bottom: 5px;
  font-size: 10px;
  color: #8f8f8f;
}
.lastpost
{
  display: block;
  font-size: 11px;
}
.sforum
{
  position: relative;
  z-index: 3;
  display: block;
  height: 0;
    background: #FFFAFA;
  color: #FFA420;
  overflow: hidden;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.ouverture_sousforum
{
  position: relative;
  z-index: 3;
  display: block;
  float: right;
  width: 120px;
  margin-right: 20px;
  background: #FFFAFA;
  color: #FFA420;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
  height: 50px;
  background: #FFFAFA;
  color: #FFA420;
  padding: 4px;
  overflow: auto;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sous_forum a
{
  color: #b5b5b5 !important;
  text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
  color: #ffffff !important;
}

Le JS:

Code:

$('document').ready(function()
  {
  if($('.categorie').size() > 1)
    {
      $('#conteneur_onglets').css( 'display' , 'block' );
      $('#conteneur_onglets .onglet').click(function()
      {
        change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
      });
     
      $('.onglet:eq(0)').click();
}
  });

  function change_categorie( index )
  {
      if( $('.categorie:eq(' + index + ')').size() != 0 )
      {
        $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

       
        $('.categorie').css( 'display' , 'none' );
        $('.categorie:eq(' + index + ')').fadeIn( 500 );
       
        $('.onglet.actif').removeClass('actif');
        $('.onglet:eq('+ index +')').addClass('actif');
      }
      else alert('Vous ne pouvez pas accéder à cette catégorie');
  }

Juste, est-ce normal que sur ton forum de test, et que sur mon forum de test quand j'essaye le code, le JS ne marche carrément pas ? On voit toutes les catégories et le seul truc qui change quand on clique sur un des onglets, sur le fait que le nom d'une catégorie est affiché ou non ^^'

Et, autre chose, si ton soucis c'est qu'on voit pas tes sous forums, ou alors que tes sous forums vont aussi un jeu d'onglet quand tu vas dans un forum, est-ce que tu as bien coché UNIQUEMENT "sur l'index" dans ton code JS ?

Voilà! C'est ça aussi que ça me fait, le jeu d'onglets est sur les titres des catégories....
Pour les sous forums, j'en ai mis un dans la catégorie :::, sauf qu'il ne s'affiche pas du tout!

Et oui j'ai bien coché uniquement la case Sur Index

Upounnet ^^

Coucou :)

Je viens de tester sur mon forum test, et pour la fin (celle qui est mauvaise dans le tuto), ça doit être comme ceci :

Code:

    <!-- BEGIN tablefoot -->
</div>
      <!-- END tablefoot --><!-- END catrow --></div>

Sinon, s'il y quelque chose entre END tablefoot et END catrow, cet élément se répète un peu partout dans le template et fait tout casser
Ici, comme il y a une fermeture de div, ça ferme d'autres div (pas les bonnes) et ça crée une belle petite pagaille ><
Je suis un train de rédiger un petit sujet pour signaler au staff ce qu'il faut changer dans le tuto, sinon on va continuer d'avoir des problèmes avec (^-^)

Pour les sous forum, tu as pensé à activer l'option dans le panneau d'admin :) ?
PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs : oui ou "avec une image"

Merci beaucoup ça marche!!

Du coup problème terminé! ^^