Des onglets pour les catégories

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Des onglets pour les catégories

Message par LouSheeta Mer 13 Juil 2011 - 21:25

Bonjour,
J'ai vu en parcourant des forums qu'il était possible de créer des onglets pour les catégories et je souhaiterais en faire de même pour un gain de place et éviter avoir à descendre des kilomètres de toile. J'ai fais des recherches, apparemment il y avait un tutoriel mais celui-ci n'existe malheureusement plus :'( je recherche ce résultat grosso modo, après la personnalisation je m'en occuperais (http://monforumm.forumgratuit.org/
). Je me posais plusieurs questions. Avant tout je vais donner quelques informations sur moi et mon forum afin que votre aide soit optimale.

Version forum : phpBB2
Navigateur internet : FireFox
Rang sur le forum : Fondatrice
Ai-je modifié les templates : oui
Lesquels :
Génaral
- index_body
- index_box
- overall_footer
- overall_header
- viewforum_body
- viewtopic_body
Profil
- profile_add_body
- profile_view_body
Ai-je modifié le CCS : oui
Lien de mon forum
Bon après vous avoir éclairé (j'espère) voici mes questions :
- Si je créais des sous-catégories, seront-elles affectées par la mise en place des onglets ? car je ne le souhaite pas.
- Comment dois-je faire pour des onglets pour les catégories ?
- Quels templates dois-je modifier ?
- Comment ?
etc...

Pouvez-vous m'aider ?
Merci d'avance...


Dernière édition par LouSheeta le Ven 22 Juil 2011 - 12:08, édité 1 fois
LouSheeta

LouSheeta
****

Féminin
Messages : 322
Inscrit(e) le : 17/08/2006

http://forum-test-flora.forumactif.com
LouSheeta a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets pour les catégories

Message par LouSheeta Dim 17 Juil 2011 - 14:58

Petit Up ?
LouSheeta

LouSheeta
****

Féminin
Messages : 322
Inscrit(e) le : 17/08/2006

http://forum-test-flora.forumactif.com
LouSheeta a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets pour les catégories

Message par LouSheeta Mar 19 Juil 2011 - 18:48

up
LouSheeta

LouSheeta
****

Féminin
Messages : 322
Inscrit(e) le : 17/08/2006

http://forum-test-flora.forumactif.com
LouSheeta a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets pour les catégories

Message par SoraNoHime Jeu 21 Juil 2011 - 6:57

Bonjour

pouvez-vous me fournir votre template index_box ainsi que votre css, et une liste de vos caégories s'il vous plait ? Vous desirez des onglets cliquables, ou au passage de la souris dessus ?

pour les sous forums, ils ne seront pas affectés.

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets pour les catégories

Message par LouSheeta Jeu 21 Juil 2011 - 11:24

Cliquable

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>
        <br /><br />
        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<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>
                <!-- 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 class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
            <fieldset class="fieldset1">
            </span>
         <legend class="legend1"><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}></legend>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<div class="legend2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            </fieldset>
         <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>
      <br></td>
<td class="row3 over" align="center" valign="middle" height="50">
        <div class="topicpost">  Agressions : {catrow.forumrow.POSTS}  |  Maisons : {catrow.forumrow.TOPICS}<br></div>
        <img src="{SPACER}" alt="" height="3" width="1" />
        <div class="lastpost">{catrow.forumrow.LAST_POST}</div></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 -->

Mon CSS :
Code:
/* =====couleur des liens======  */
a {color: #C1C1C1;}
a:link {color: #C1C1C1;}
a:hover {text-decoration: none !important;}
a.forumlink {color: #C1C1C1;}
a.forumlink:hover {color: #C1C1C1;}
a.topiclink {color: #C1C1C1;}
a.topiclink:hover {color: #C1C1C1;}
/* =====fin=======  */



.forumline {
  border: 1px solid;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius:20px;}

.forumline {-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 7px;}

td.catLeft {
-moz-border-radius: 30px;}
td.catBottom {
-moz-border-radius: 30px;}
td.catLeft {
-moz-border-radius: 30px;}
td.catHead {
-moz-border-radius: 30px;}
td.catLeft {
-moz-border-radius: 30px;}

.bodyline{ 
  -moz-box-shadow: 0px 0px 10px #000000;
  -webkit-box-shadow: 0px 0px 10px #000000;
  - box-shadow: 0px 0px 10px #000000;
  -moz-border-radius:20px;
  -webkitborder-radius:20px;
}

.secondarytitle {
border:1px;
-moz-border-radius: 20px;}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "The Chat of Night creatures"; }

.forumline {
margin-bottom: 30px;}

.navig {
position: absolute;
top: 0px;
width: 100%;}

.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;}

.desc {
padding-top : 10px;
padding-bottom : 10px;
padding-right : 50px;
padding-left : 50px;
margin-left : 20px;
margin-right : 20px;
border: 3px solid #666666;}

a.mainmenu {margin: 5px;
font-family: Arial;
font-size: 11px;
color: #ffffff;}

 .topicpost{
background-image:url("http://i25.servimg.com/u/f25/11/05/84/49/copie_16.jpg") ;
font-size:11px;
color:#fff;
line-height: 2em;
border: 1px solid #666666;
-moz-border-radius: 3xp ;
-webkit-border-radius: 3px;
-khtml-border-radius: 3xp;
border-radius: 3 xp;
margin-bottom: 10xp
padding-top: 0px;
padding-right: 3px;
padding-left: 3px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
max-width:140px;
min-width:140px;
}

.lastpost{
background-image:url("http://i25.servimg.com/u/f25/11/05/84/49/copie_16.jpg") ;
font-size:11px;
text-align:center;
color:#fff;
line-height: 1,5em;
border: 1px solid #666666;
-moz-border-radius: 3xp ;
-webkit-border-radius: 3px;
-khtml-border-radius: 3xp;
border-radius: 3 xp;
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
max-width:140px;
min-width:140px;
}

.signature_div {max-height:140px;overflow:auto;}

.logo-titre{
   position:absolute;
   z-index: 999;
   margin-top:-45px;
   background-color: transparent;
   background-image: url(http://img11.hostingpics.net/pics/81603801.png);
   background-repeat: no-repeat;
   background-position: center center;
   width:60px;
   height:65px;   
}
.titre-cat{
   position:absolute;
   margin-top:-29px;
   margin-left:40px;
   padding-left:20px;
   padding-right:510px;   
   padding-top:3px;   
   background-color: transparent;
   background-image: url(http://nsm05.casimages.com/img/2011/07/17//1107170608541215738482671.png);
   background-repeat: no-repeat;   
   height:17px;
   font-size:15px;
}

a { text-decoration: none; }

/* Chatbox */
.chatbox_row_1 {
    background: transparent;
}
.chatbox_row_2 {
    background: transparent;
}
.chatbox_row_3 {
    background: transparent;
}

.cadresignSW {
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-topleft: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  border-left: 2px #6B6B6B solid;
  border-bottom: 2px #6B6B6B solid;
  border-top: 2px #6B6B6B solid;
  border-right: 2px #6B6B6B solid;
background-color: #000000;
}

.name{
font-size : 15px;
}

.barre1{
background-color:#000000;border: 1px #2D81EA solid;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:left;
text-decoration: none !important;
height:auto}

.statistiques{
border:0px;
background-repeat: no-repeat;
background-position: center;
height:200px;}

.groupe1{
background-color:#000000;border: 1px #ad9f03 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe2{
background-color:#000000;border: 1px #990303 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe3{
background-color:#000000;border: 1px #014201 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe4{
background-color:#000000;border: 1px #573e00 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe5{
background-color:#000000;border: 1px #525252 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe6{
background-color:#000000;border: 1px #8a8a8a dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe7{
background-color:#000000;border: 1px #02768a dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

.groupe8{
background-color:#000000;border: 1px #02027d dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:14px;padding-left:14px;padding-bottom:3px;margin-right:5px;margin-left:5px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
height:auto}

/*----------Encadrés et légende-------------*/

/* personnalisation d'un encadré */
.SWfieldset {
  /* couleur de fond */
  background: #333333;
 
  /* coins arrondis */
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  border-radius:18px:
 
  /* bordure (épaisseur, couleur, type) */
  border: 2px #a7acab solid;
 
  /*espacement intérieur (entre le contenu et le bord) */
  padding:5px;
 
  /* Personnalisation du texte à l'intérieur */
  text-align:justify; /*texte justifié */
}

/* personnalisation du titre (légende) de l'encadré */
.SWlegend {
  /* couleur de fond */
  background: #333333;
 
  /* coins arrondis */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius:5px;
 
  /* bordure (épaisseur, couleur, type) */
  border: 2px #a7acab solid;
 
  /* espacement intérieur (entre le contenu et le bord), haut/bas puis droite/gauche */
  padding: 5px 5px 5px 5px;
 
  /* taille (width) et hauteur (height) */
  width:150px;
  height:auto;
 
  /* espacement par rapport au bord gauche */
  margin-left: 10px;
 
  /* centrage du texte */
  text-align: center;
}

/* personnalisation du texte dans le titre de l'encadré */
.SWlegend span {
  color : #ffffff;
  font-weight : bold;
  text-decoration : none;
  font-style : italic ;
}
/*--------------TH personnalisé-------------*/
.SWfondth1 {
  background:none;
}

.SWfondth2 {
  background:none;
}
/*------/FIN TH personnalisé------*/

/*------/Légende des sujets------*/
/* boite contenant toutes les images de la légende */
.boite-legende {
  /* couleur de fond */
  background:transparent;
 
  /* espacement intérieur (entre le contenu et les bords) */
  padding: 5px;
 
  /* Bordures arrondies */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius:7px;
 
  /* Bordures : épaisseur, couleur, type */
  border: 1px #8a8a8a dotted;
}

/* Texte accompagnant chaque image de la légende */
.texte-legende {
  margin-top:2px;
  font-seize: 9px;

  /* Mise en forme du texte */
  color: #CCCCCC;  /*couleur*/
  font-weight: bold;  /*en gras*/
 
  /* espacement intérieur (entre le contenu et les bords) */
  padding: 2px;
 
  /* Coins arrondis */
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius:7px;
 
  /* couleur de fond */
  background: transparent;
}
/*------/FIN Légende des sujets------*/

.fieldset.forumrow {
  margin-left: 10%;
margin-right: 10%;
}

/**New Pa **/

box {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#F0F0F0;
color:#718C91;
font-size:11px;
margin:0;
padding:3px 10px;
}

.boxtitle {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#835430;
color:#F0F0F0;
display:block;
font-size:11px;
font-weight:bold;
margin:0 0 5px;
padding:3px 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

#navigation a:link, #navigation a:visited, #navigation a:active {

font-style: verdana;
font-size: 13px;
text-align: center;
padding: 2px;
color: #ffffff;
background-color: #8c8888;
line-height: 13px;
display: block;
border-bottom: 1px solid #000;
-moz-border-radius: 15px 15px 15px 15px;
webkit-border-radius: 15px 15px 15px 15px;
-webkit-box-shadow: 0px 3px 2px #835430;
-moz-box-shadow: 0px 3px 2px #835430;
box-shadow: 0px 3px 2px #835430;
}

#navigation a:hover {
color: #8c8888;
background-color: #5D3E26;
}

.fond {
background: #000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
margin: 5px;
padding: 5px; }

.titres {
background: #fff;
font-size: 18px;
color: #000;
text-shadow: 0 1px 10px #000;
text-transform: uppercase;
tex-align: center;
-moz-border-radius-topleft: 65px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 65px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 65px;
border-top-right-radius: 0px;
border-bottom-right-radius: 65px;
border-bottom-left-radius: 0px;
margin: 5px;
padding-top: 7px;
padding: 10px
border-bottom: 2px dashed #000;}

.Titre1{
font-size:40px;
margin-top:70px;
}

/**FIn PA New**/

.fieldset1
{
margin-left:30px;
margin-right:30px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: -25px;
-moz-border-radius:8px;   
border-radius:8px;
text-align:justify;
font:calibri;
border-top: 1px #8a8a8a dotted;
border-bottom: 0px;
border-right: 0px;
border-left: 0px;
}

.legend1{
border-bottom: 1px solid #000;
-moz-border-radius: 15px 15px 15px 15px;
}

.legend2{
.navigation a:link, #navigation a:visited, #navigation a:active {
font-style: verdana;
font-size: 11px;
text-align: right;
padding: 2px;
color: #ffffff;
line-height: 13px;
display: block;
border-bottom: 1px solid #000;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-webkit-box-shadow: 0px 3px 2px #835430;
-moz-box-shadow: 0px 3px 2px #835430;
box-shadow: 0px 3px 2px #835430;
margin-right:30px;
margin-top:10px
}}

Et la liste de mes catégories :
    Le Blabla Habituel
    Personnages
    Vies et Personnages
    Paris
    The Free Zone
Merci d'avance...
LouSheeta

LouSheeta
****

Féminin
Messages : 322
Inscrit(e) le : 17/08/2006

http://forum-test-flora.forumactif.com
LouSheeta a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets pour les catégories

Message par SoraNoHime Jeu 21 Juil 2011 - 23:33

Voici votre index_box :

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">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>
                    <!-- 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 class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <fieldset class="fieldset1">
                </span>
            <legend class="legend1"><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}></legend>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
    <div class="legend2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                </fieldset>
            <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>
          <br></td>
    <td class="row3 over" align="center" valign="middle" height="50">
            <div class="topicpost">  Agressions : {catrow.forumrow.POSTS}  |  Maisons : {catrow.forumrow.TOPICS}<br></div>
            <img src="{SPACER}" alt="" height="3" width="1" />
            <div class="lastpost">{catrow.forumrow.LAST_POST}</div></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 -->

ajoutez aussi ceci dans votre css :

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

personnaliser si besoin

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets pour les catégories

Message par LouSheeta Ven 22 Juil 2011 - 12:08

Merci beaucoup ^^
LouSheeta

LouSheeta
****

Féminin
Messages : 322
Inscrit(e) le : 17/08/2006

http://forum-test-flora.forumactif.com
LouSheeta a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum