tutoriel----

Vous croyiez peut-être que ce tutoriel est long mais rassurez-vous, le plus long est le CSS et non pas la partie template puisque vous avez juste à cliquer deux, trois fois sur un bouton OK Nous allons faire a peu près ceci :



Mettez cette configuration sur votre forum : (PA › Affichage › Structure et hiérarchie)

Spoiler:

Ensuite, rendez-vous sur le Générateur d'Onglets. Lorsque vous avez insérer tous les noms de vos onglets, il vous suffit de cliquer sur Annuler. Ensuite, vous prenez TOUT le code et ce sera votre nouveau template index_box N'oubliez pas de le Publier ;D

Nous avons terminé la partie HTML Pas très long, ehin ?

Passons, au CSS qui lui va être légèrement plus compliqué.
Voici le code tout prêt, tout frais avec quelques modifications que vous devrez y apporter

Citation :

.text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_nomonglet1,#cat_nomonglet2,#cat_nomonglet3,#cat_nomonglet4,#cat_nomonglet5 /*nomonglet... à remplacer par le nom des onglets*/ {
padding-top:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/
width:LARGEURpx; /*Largeur de l'onglet étant actif*/
height:HAUTEURpx; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('URL_ONGLET_INACTIF') no-repeat; /*URL de l'onglet étant inactif*/
width:LARGEURpx; /*Largeur de l'onglet étant inactif*/
height:HAUTEURpx; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
}

Ce qui est en vert est à modifier par dessus tout
Le reste, c'est facultatif

Si vous souhaitez une couleur unie en fond de vos onglets remplacez :

Code:

background:url('URL_ONGLET') no-repeat;

Par :

Code:

background-color : #FF0000;

Voilà! Normalement, vous devez arrivez au Résultat souhaité.