Puisque tout est bon, je te file les codes ^^
Il faut ajouter ceci au CSS :
- Code:
/**************************************** CATÉGORIES ****************************************/
/*Conteneur des onglets*/
#conteneur_onglets {
display: none;
}
#conteneur_onglets table {
margin: auto;
width: 880px;
}
/*Onglets inactifs*/
.ongleto {
opacity: 0.7;
}
/*Onglets survolés*/
.ongleto:hover {
cursor: pointer;
}
/*Onglets actifs*/
.actif {
opacity: 1;
cursor: default!important;
}
/*Bloc de catégorie*/
.categorie {
margin: auto;
width: 880px;
text-align: center;
}
/*Titre de catégorie*/
.cate_title h2 {
display: block;
margin: auto;
font-weight: normal;
text-align: center;
margin-top: 15px;
margin-bottom: 10px;
padding: 0px;
color: #4777b0;
text-shadow: 1px 1px 1px #ffffff;
font-family: 'Satisfy', cursive;
font-size: 50px;
}
/*Fait disparaître les trucs inutiles*/
.cate_title span, .forumlink img, a.nav img {
display: none;
}
/*Bloc de forum*/
.forum_bloc {
width: 880px;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
/*Bloc de titre de forum*/
.forum_title {
margin: auto;
text-align: center;
height: 30px;
}
/*Titre de forum*/
a.forumlink {
font-family: 'Satisfy', cursive;
font-size: 24px;
color: #4777b0!important;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
font-weight: normal;
text-shadow: 1px 1px 1px #ffffff;
}
/*Titre de forum survolé*/
a.forumlink:hover {
text-decoration: none!important;
letter-spacing: 2px;
color: #6d9fdb!important;
}
/*Bloc de en bas du titre*/
.forum_middle {
margin: auto;
position: relative;
width: 600px;
height: 150px;
border-radius: 100%;
font-size: 12px;
font-family: 'Verdana';
color: #dbcad2;
}
.forum_middle .gensmall {
font-size: 12px;
font-family: 'Verdana';
color: #dbcad2;
}
.forum_middle a.gensmall, .forum_middle a {
color: #dbcad2;
}
.forum_middle a.gensmall:hover, .forum_middle a:hover {
color: #ffffff;
}
/*Séparation sous le titre*/
.forum_img_separation {
position: absolute;
top: -7px;
left: 190px;
width: 221px;
height: 35px;
z-index: 3;
}
/*Bloc du dernier message et statistiques et icone NewOldLock*/
.forum_lastmess_stats_bloc {
position: absolute;
top: 6px;
left: -50px;
width: 150px;
height: 138px;
overflow: hidden;
z-index: 3;
}
/*Bloc de dernier message et statistiques*/
.forum_lastmess_stats {
position: absolute;
top: 0px;
left: 0px;
width: 130px;
height: 98px;
padding: 10px;
padding-top: 30px;
font-size: 11px;
background-image: url('http://img11.hostingpics.net/pics/696199fond.png');
}
/*Statistiques*/
.forum_stats {
margin-bottom: 5px;
font-size: 10px;
}
/*Image New Old Lock*/
.forum_img_newoldlock {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 138px;
transition: 1s;
-webkit-transition: 1s;
}
/*Déplacement Image New Old Lock*/
.forum_lastmess_stats_bloc:hover .forum_img_newoldlock {
top: -138px;
}
/*Description de forum*/
.forum_desc {
position: relative;
border-radius: 100%;
width: 600px;
height: 150px;
z-index: 2;
background-color: #ffffff;
}
/*Image de description de forum*/
.forum_desc img {
border-radius: 100%;
width: 600px;
height: 150px;
}
/*Bloc des sous forums*/
.forum_sf_bloc {
position: absolute;
top: 38px;
right: 1px;
width: 190px;
height: 75px;
background-color: #7f2f59;
border-radius: 10px 67px 67px 0px/10px 38px 37px 10px;
transition: 1s;
-webkit-transition: 1s;
}
/*Image languette*/
.forum_img_sf {
position: absolute;
top: -5px;
right: -28px;
width: 33px;
height: 75px;
z-index: 3;
}
/*Sous forums*/
.forum_sf {
position: absolute;
top: 5px;
left: 55px;
width: 97px;
padding-right: 5px;
height: 65px;
z-index: 1;
overflow: auto;
text-align: left;
transition: 1s;
-webkit-transition: 1s;
font-size: 12px;
font-family: 'Verdana';
}
/*Ouverture de la languette*/
.forum_sf_bloc:hover {
right: -140px;
}
/**************************************** FIN CATÉGORIES ****************************************/
Il faut remplacer entièrement le template Index_Box par ceci :
- Code:
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css' />
<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>
<div id="conteneur_onglets">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ongleto"><img src="http://img4.hostingpics.net/pics/786178Administration.png" alt="Onglet 1" /></td>
<td class="ongleto"><img src="http://img4.hostingpics.net/pics/916090academiesaisho.png" alt="Onglet 2" /></td>
<td class="ongleto"><img src="http://img4.hostingpics.net/pics/645456Machialentours.png" alt="Onglet 3" /></td>
<td class="ongleto"><img src="http://img4.hostingpics.net/pics/517981flood.png" alt="Onglet 4" /></td>
<td class="ongleto"><img src="http://img4.hostingpics.net/pics/504681archives.png" alt="Onglet 5" /></td>
</tr>
</table>
</div>
<div id="conteneur_categories">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="categorie">
<div class="cate_title">
{catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="forum_bloc">
<div class="forum_title">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<div class="forum_middle">
<img class="forum_img_separation" src="http://img4.hostingpics.net/pics/636222imagesousmessage.png" alt="Séparation" />
<div class="forum_lastmess_stats_bloc">
<div class="forum_lastmess_stats">
<div class="forum_stats">{catrow.forumrow.TOPICS} - {catrow.forumrow.POSTS}</div>
{catrow.forumrow.LAST_POST}
</div>
<img class="forum_img_newoldlock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<div class="forum_desc">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="forum_sf_bloc">
<img class="forum_img_sf" src="http://img4.hostingpics.net/pics/930191languette.png" alt="Sous forums" />
<div class="forum_sf">
<span id="sousforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</div>
</div>
<script type="text/javascript">
jQuery('#sousforums').html(jQuery('#sousforums').html().replace(/, /g,',<br />')).removeAttr('id');
</script>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>
Et tu dois aussi aller dans tes Javascript et enregistrer ce javascript avec le placement "Sur l'index" :
- Code:
$('document').ready(function()
{
if($('.categorie').size() > 1)
{
$('#conteneur_onglets').css( 'display' , 'block' );
$('#conteneur_onglets .ongleto').click(function()
{
change_categorie( $('.ongleto', '#conteneur_onglets').index( this ) )
});
$('.ongleto: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 );
$('.ongleto.actif').removeClass('actif');
$('.ongleto:eq('+ index +')').addClass('actif');
}
else alert('Vous ne pouvez pas accéder à cette catégorie');
}
N'oublie pas de t'assurer que tes javascripts sont activés
Quand tu mets les images pour tes titres de catégories, tu dois les mettre sous ce format :
- Code:
<span>Nom de la catégorie</span><img src="URL DE L'IMAGE" alt="Nom de la catégorie" />
C'est tout !
