Perfect ^^
On va commencer par le Template "Index_box" :
- 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>
<center><div id="cate_tout"><div id="conteneur_onglets">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="onglet" ><div>Catégorie 1</div></td>
<td class="onglet"><div>Catégorie 2</div></td>
<td class="onglet"><div>Catégorie 3</div></td>
<td class="onglet"><div>Catégorie 4</div></td>
<td class="onglet"><div>Catégorie 5</div></td>
<td class="onglet"><div>Catégorie 6</div></td>
<td class="onglet" style="border-right: none;"><div>Catégorie 7</div></td>
</tr></table>
</div>
<div id="conteneur_categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr><td><table class="forum_bloc" width="100%" cellspacing="0" cellpadding="0"><tr>
<td rowspan="2" class="forum_img_new" 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>
<td class="forum_forumlink" valign="top">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</td>
<td rowspan="2" class="forum_desc" align="center" valign="middle">
{catrow.forumrow.FORUM_DESC}
</td></tr><tr>
<td class="forum_sous" valign="bottom">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</td>
</tr></table></td></tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table></div>
<!-- END tablefoot --><!-- END catrow -->
</div></div></center>
Il est à savoir que les noms des catégories (donc les noms des onglets) doivent être changés directement dans le template à cet endroit :
- Code:
<div id="conteneur_onglets">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="onglet" ><div>Catégorie 1</div></td>
<td class="onglet"><div>Catégorie 2</div></td>
<td class="onglet"><div>Catégorie 3</div></td>
<td class="onglet"><div>Catégorie 4</div></td>
<td class="onglet"><div>Catégorie 5</div></td>
<td class="onglet"><div>Catégorie 6</div></td>
<td class="onglet" style="border-right: none;"><div>Catégorie 7</div></td>
</tr></table>
</div>
Ensuite, pour que les onglets fonctionnent, il va falloir aller installer un petit javascript. Pour cela, on va fonctionner comme ceci :
> Dans => Panneau d'administration => Modules => HTML et Javascript => Gestion des codes Javascript
> Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.
> Ensuite, on clique sur "créer un nouveau Javascript."
> On donne un nom du genre "Catégories en onglets" et on choisit le placement "sur l'index".
> Enfin, on met le javascript suivant et on enregistre :
- Code:
$('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');
}
Par la suite, on va ajouter le CSS pour tout mettre en forme :
- Code:
/********************************************** DÉBUT CATÉGORIES **********************************************/
/* Contient les catégories ET les conglets*/
#cate_tout {
background: #ffffff;
text-align: center;
color: #000000!important;
font-family: New Times Roman;
font-size: 13px;
border: 8px double #a3a3a3;
border-bottom: 7px double #a3a3a3;
width: 700px;
}
/* Contient les onglets */
#conteneur_onglets {
display: none;
text-align: center;
border-bottom: double 8px #a3a3a3;
}
/* Onglets */
.onglet {
cursor: pointer;
width: 100px;
height: 50px;
text-align: center;
background-color: #ffffff;
border-right: solid 1px #a3a3a3;
font-family: monotype corsiva;
font-size: 20px;
text-shadow: 0px 0px 2px #545454;
}
/* Onglet Actif */
.actif {
background: #cccccc;
cursor: default;
}
/* Contient chaque catégorie */
.categorie {
}
/* Bloc de chaque forum */
.forum_bloc {
border-bottom: solid 1px #a3a3a3;
}
/* Bloc de l'image New Old Lock */
.forum_img_new {
width: 75px;
height: 75px;
padding: 2px;
}
/* Image New Old Lock */
.forum_img_new img {
width: 75px;
height: 75px;
}
/* Bloc du titre du forum */
.forum_forumlink {
padding: 2px;
}
/* Titre du forum */
.forumlink {
margin-top: 5px;
font-family: monotype corsiva;
font-size: 28px;
color: #252525!important;
text-shadow: 0px 0px 3px #545454;
letter-spacing: 0px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
/* Titre du forum Survolé*/
.forumlink:hover {
letter-spacing: 1px;
text-decoration: none!important;
}
/* Bloc des sous-forums */
.forum_sous {
height: 25px;
padding: 2px;
}
/* Bloc de l'image de forum et description */
.forum_desc {
width: 200px;
height: 75px;
padding: 2px;
}
/* Infobulle des descriptions des forums */
.desc_infobulle {
position: relative;
margin: auto;
}
/* Image de forum */
.desc_infobulle img {
width: 200px;
height: 75px;
margin-bottom: -16px;
border: 1px solid #a3a3a3;
transition: 0.5px;
}
/* Descriptions cachées des forums */
.desc_desc {
font-family: Times new roman;
font-style: italic;
font-size: 13px;
position: absolute;
top: 0px;
right: 202px;
width: 0px;
height: 69px;
padding: 0px;
padding-bottom: 3px;
padding-top: 3px;
overflow: auto;
text-align: justify;
border: 1px solid #a3a3a3;
border-right: none;
background-color: #cccccc;
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
/* Descriptions visibles des forums */
.desc_infobulle:hover .desc_desc {
width: 400px;
height: 69px;
padding: 3px;
}
/********************************************** FIN CATÉGORIES **********************************************/
Et on va terminer par les descriptions des forums. L'image de chaque forum peut être modifiée et la description en elle-même va à la place du texte en latin. Voici le code :
- Code:
<div class="desc_infobulle"><img alt="Survolez-moi ~" src="http://img15.hostingpics.net/pics/830742Sanstitre.png" /><div class="desc_desc">Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.</div></div>
Voilà ^^
