Insérer un tableau à onglet dans la page index

Cette modification n'est applicable que si vous avez un index personnalisé!

1) L'index.php

Pour commencer, ouvrez votre "index.php" et mettez ce code de préférence à la suite d'un autre module ou une balise :

Code TPL :

 
 
<div id="maintab" class="tabdossier" style="width: 761px; height: 1102px">
 <div id="maintab" class="tabList">
<ul class="shadetabs" id="maintab">
    <li class="selected"><a rel="tcontent1" href="#">Onglet 1</a></li>
    <li class=""><a rel="tcontent2" href="#">Onglet 2</a></li>
    <li class=""><a rel="tcontent3" href="#">Onglet 3</a></li>
    <li class=""><a rel="tcontent4" href="#">Onglet 4</a></li> 
</ul>
<div class="tabcontentstyle" style="width: 761px; height: 348px">
  <div class="tabcontent" id="tcontent1" style="display: block;"> 
Onglet 1
<br /> Je met mon texte ici...
<br /><a href="javascript: expandtab('maintab', 3)">Cliquez ici pour aller à Onglet 4 </a>
</div>
<div class="tabcontent" id="tcontent2" style="display: none;"> 
Onglet 2
<br /> Je met mon texte ici...
</div>
<div class="tabcontent" id="tcontent3" style="display: none;">
Onglet 3
<br /> Je met mon texte ici...
</div>
<div class="tabcontent" id="tcontent4" style="display: none;">
Onglet 4
<br /> Je met mon texte ici...
</div>
<p><script type="text/javascript">initializetabcontent("maintab")</script> <br/></p>
</div>
</div>
</div>

Vous pourrez ensuite réglé la largeur (width) et la hauteur (height) à votre convenance soit en pixel ou en pourcentage dans le id="maintab" et le id="tabcontentstyle".

Code TPL :

<div class="tabcontentstyle" style="width:97%;height:348px;">

Enregistrez et Fermez.

2) Le header.tpl

Éditez le header.tpl avec votre bloc note ou notepad++:

Juste avant la balise </head> ajouter ces trois lignes :

Code TPL :

 
<link type="text/css" rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/tableau/tabcontent.css">
<link type="text/css" rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/tableau/class.css" media="screen">
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/tableau/tabcontent.js"></script>

Enregistrez et Fermez.

3) Le dossier "tableau"

Voici ce qu'il contient:

tableau

class.css

tabcontent.css

tabcontent.js

images
---

fd_onglet.gif
---

fd_onglet_on.gif

Cliquez ci-dessous pour le télécharger:

Télécharger le tableau.zip

Allez à la racine de votre thème (/templates/Votre-theme/) Et dézipper l'archive dedans.

4) Personnaliser le tableau avec le css

Dans le dossier tableau, vous avez deux fichiers ".css", le class.css et tabcontent.css. Celui que vous devez modifier pour personnaliser votre tableau à onglet le "tabcontent.css"

dans celui-ci j'ai mis des commentaire pour vous repérer:

Code CSS :

 
 /*background:transparent url(images/news_content.png) no-repeat scroll center top;*/
background-color:#cccccc; /*  Fond: gris */
border:1px solid #FF0000; /* Couleur: rouge */

- La 1ère ligne en commentaire est là au cas où ! C'est la balise qui vous permettra de mettre une image de fond à la place des cadres gris.

- La 2ème ligne est le fond de couleur gris, celui citer sur la phrase ci-dessus.

Attention: pour affecter un background image, il vous faudra mettre cette ligne en commentaire en la mettant de cette façon : /* backg... */ et de dé-baliser la 1 ère ligne.

- La 3ème ligne La couleur rouge vous guidera car c'est celle de la bordure/cadre, je l'ai fais en rouge intentionnellement pour que vous puissiez la voir plus facilement.

Conseils

Une fois fait tout ceci, et que vous avez un souci, n'oubliez pas de régénérer vos caches : celui de votre navigateur et celui de l'administration de votre site.

Si vous avez des questions ou alors que vous souhaitez de plus amples informations, le forum est à votre disposition