Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Des onglets pour les catégories

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

Résolu Des onglets pour les catégories

Message par LouSheeta le 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
avatar

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 le Dim 17 Juil 2011 - 14:58

Petit Up ?
avatar

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 le Mar 19 Juil 2011 - 18:48

up
avatar

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 le 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.
avatar

SoraNoHime
Membre actif

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

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par LouSheeta le 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...
avatar

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 le 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.
avatar

SoraNoHime
Membre actif

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

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par LouSheeta le Ven 22 Juil 2011 - 12:08

Merci beaucoup ^^
avatar

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


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