Ce petit tutoriel vous permettra de mettre vos premières catégories sous onglet afin de limiter la hauteur de votre forum ou pour des raisons esthétiques. Attention, Vous devez régler vos permissions de vos forums (au moins un par catégorie) en “voir le forum”, sinon vos onglets ne fonctionneront pas correctement et certains catégories ne s’afficheront pas, alors vous risquerez d’avoir un onglet qui n’est pas le bon !

categoriesousonglet

Installation du code “Javascript”
1) rendez-vous sur votre panneau d’administration.
2) Allez dans l’onglet “Module”, puis cherchez “HTML & Javascript”, cliquez sur ‘Gestion des codes Javascrip”
3) Cliquez sur le bouton “Créer un nouveau Javascript
4) Mettez un titre qui vous fera rappeller sa fonctionnalité comme “Catégorie sous onglet”
5) Cochez “sur toutes les pages” pour son placement.
6) Et faites un copier du code ci-dessous et collez-le dans la code “Code Javascript”, puis validez. 

$(‘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’);
}

7) Cochez “Oui” à l’option “Activer la gestion des codes Javascript :”
8) Et c’est terminé pour l’installation du Javascript !

Procédons, maintenant à l’installation du code Html dans votre template !
Attention, vous devez être fondateur du forum pour accéder aux templates !
9) Allons dans l’onglet “Affichages”, “Templates”, puis “Général”.
10) Allez dans le template “index_box” (Page d’accueil – affichage des catégories). Cliquez sur la rouage jaune “Modifier” pour y accéder.
11) Nous allons insérer le code qui vous permettra d’afficher les boutons pour vos catégories sous onglet. Vous avez le choix d’afficher des liens ou des images. Le code est à afficher tout au début, avant tous les autres codes.

Affichage avec des images en guise de bouton

<br><div id=”conteneur_onglets”>
<table align=”center”><tr>
  <td class=”onglet”><img src=”LIEN-IMAGE”></td>
        <td class=”onglet”><img src=”LIEN-IMAGE”></td>
    <td class=”onglet”><img src=”LIEN-IMAGE”></td>
              <td class=”onglet”><img src=”LIEN-IMAGE”></td>
      </tr></table>
 <br></div>

Affichage avec des textes en guise de bouton

<br><div id=”conteneur_onglets”>
<table align=”center”><tr>
<td class=”onglet”><div class=”titreOnglet”>NOM DE LA CATEGORIE</div></td>
<td class=”onglet”><div class=”titreOnglet”>NOM DE LA CATEGORIE</div></td>
<td class=”onglet”><div class=”titreOnglet”>NOM DE LA CATEGORIE</div></td>
<td class=”onglet”><div class=”titreOnglet”>NOM DE LA CATEGORIE</div></td>
</tr></table>
<br></div>

12) Cherchez la balise :

<!– BEGIN catrow –><!– BEGIN tablehead –>

13) Avant cette balise, ajoutez :

<div id=”conteneur_categories”>

14) Après cette balise, ajoutez :

<div class=”categorie”>

15) A la fin du template, cherchez cette balise :

<!– END tablefoot –><!– END catrow –>

16) Avant et après la balise ci-dessus, ajoutez la balise ci-dessous afin de chercher le code que vous avons ajouté précédemment.

</div>

Une fois rempli, vous pouvez cliquez sur “Enregistrer”.

Passons maintenant à la partie CSS
1) Rendez-vous dans l’onglet “Affichages”, “Images et Couleurs”, puis “Couleurs”
2) Cliquez sur l’onglet “Feuille de Style CSS”
3) Vous allez maintenant copier un des deux codes (onglet par images ou texte) ci-dessous et le coller dans votre feuille de style CSS.

Code CSS pour l’affichage avec des images en guise de bouton, vous n’avez rien à rajouter !

/* CATEGORIE SOUS ONGLETS
————————————————*/

#conteneur_categories { }
.categorie { }
#conteneur_onglets { display: none; }

Code CSS pour l’affichage avec des textes en guise de bouton, vous devez modifier les MAJUSCULES !

/* CATEGORIE SOUS ONGLETS
————————————————*/

#conteneur_categories { }
.categorie { }
#conteneur_onglets { display: none; }

.onglet { background-color:#COULEUR; border:2px inset #COULEUR; padding-right: 15px; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; cursor: pointer; }
.onglet:hover { background-color:#COULEUR; border:2px inset #COULEUR; padding-right: 15px; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; cursor: pointer; }

.titreOnglet { color: #COULEUR; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-variant: normal; font-size: 19pt; }

– La balise “.onglet” sert à décorer votre bouton
– La balise “.onglet:hover” sert à décorer votre bouton lors du survol de la souris
– La balise “titreOnglet” sert à personnalisé le texte.

Vous devez changer la couleur de certaines balises qui sont indiqués en majuscule #COULEUR qui sont indiqués.
– Background-color est la couleur de fond.
– Border est la couleur du de la bordure. 

14) Une fois que vous avez fini, vous n’avez qu’à sauvegarder en cliquant sur le bouton “Valider”.
15) c’est terminé !

© By Shaynee sur MoF Design

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *