Coucou ! Pour améliorer le forum j'ai pensé que je pourrais vous donner des codes pour mettre les catégories en onglet si ça vous intéresse :
Voici les étapes :
1_il faut se mettre en séparé moyen (dans hiérarchie)
2_Ensuite faire une page html ( dans pa > modules > gestions des pages html )
3_Dedans il faut mettre "abc" comme contenu puis enregistrer.
4_Ensuite il faut éditer cette page et remplacer le "abc" par :
- Code:
-
var ctable= new Array();
$('#forums-index th.secondarytitle h2').each(function(){
var cid= ctable.length+1;
var ctext= $(this).text();
ctable.push(new Array(cid,ctext));
for(var trc= $(this).closest('tr').addClass('trcelem trc'+cid).next(); $(trc).length==1 && $(trc).find('td.cat').length==0; trc=$(trc).addClass('trcelem trc'+cid).next());
});
var ccurrent= 1;
function displayc(c) {
ccurrent= parseInt(c);
my_setcookie('ccurrent',""+ccurrent,1,0);
$('.trc'+ccurrent).show();
$('.trcelem:not(.trc'+ccurrent+')').hide();
$('#ongline a').removeClass('ccurrent');
$('#ongc'+ccurrent).addClass('ccurrent');
}
var ongline='';
for(key in ctable) { ongline+=' <a id="ongc'+ctable[key][0]+'" href="javascript:void()" onMouseover="displayc('+ctable[key][0]+')">'+ctable[key][1]+'</a>'; }
$('div.nav').closest('table').next().before('<div id="ongline">'+ongline+'</div>');
if(!(ccurrent=my_getcookie('ccurrent'))) ccurrent= 1;
displayc(ccurrent);
5_Après cela il faut juste éditer la template index_body ( pa > affichage > templates | général > index_body > edit ) et remplacer le : {BOARD_INDEX}
6_Vous remplacez par :
- Code:
-
<div id="forums-index">
{BOARD_INDEX}
</div>
<script type="text/javascript" src="/h1-"></script>
7_( si la page créée a une autre adresse il faut mettre la bonne adresse à la place de /h1- )
Ensuite il suffit donc d'enregistrer puis publier et le fonctionnement en onglet est là.
Pour finir il y a juste du css à mettre comme on souhaite ( dans PA > Affichage > Couleurs > Feuille de style ) pour obtenir l'affichage qu'on souhaite, par exemple pour avoir les onglets centrés, une marge de 30 pixels autour du conteneur des onglets, que les liens ne soient pas souligné et en vert, et puis qu'un onglet activé ou survolé soit encadré d'un bord rouge :
- Code:
-
/* code du conteneur des onglets */
#ongline {
text-align: center;
padding: 30px;
}
/* code s'appliquant a chacun des onglets */
#ongline a {
text-decoration: none!important;
color: green;
}
/* code s'appliquant a l'onglet selectionne et aux onglets survoles */
#ongline a.ccurrent,#ongline a:hover {
border: 1px solid red;
}
/* code s'appliquant a l'onglet selectionne */
#ongline a.ccurrent {
}
Voilà c'est fini ! =3 Source : forum des forums actifs.
Il y a aussi un petiti bonus :
Voilà un code qui permet de mettre des images comme onglet :
- Code:
-
var ctable= new Array();
var lctable= new Array();
lctable[1]= 'http://r24.imgfast.net/users/2413/10/00/00/smiles/49380.png';
lctable[3]= 'http://r24.imgfast.net/users/2413/10/00/00/smiles/732256.png';
$('#forums-index th.secondarytitle h2').each(function(){
var cid= ctable.length+1;
var ctext= $(this).text();
ctable.push(new Array(cid,ctext,(!lctable[cid]?'':lctable[cid])));
for(var trc= $(this).closest('tr').addClass('trcelem trc'+cid).next(); $(trc).length==1 && $(trc).find('td.cat').length==0; trc=$(trc).addClass('trcelem trc'+cid).next());
});
var ccurrent= 1;
function displayc(c) {
ccurrent= parseInt(c);
my_setcookie('ccurrent',""+ccurrent,1,0);
$('.trc'+ccurrent).show();
$('.trcelem:not(.trc'+ccurrent+')').hide();
$('#ongline a').removeClass('ccurrent');
$('#ongc'+ccurrent).addClass('ccurrent');
}
var ongline='';
for(key in ctable) { ongline+=' <a id="ongc'+ctable[key][0]+'" href="javascript:void()" onMouseover="displayc('+ctable[key][0]+')">'+(ctable[key][2]==''?ctable[key][1]:'<img src="'+ctable[key][2]+'" />')+'</a>'; }
$('div.nav').closest('table').next().before('<div id="ongline">'+ongline+'</div>');
if(!(ccurrent=my_getcookie('ccurrent'))) ccurrent= 1;
displayc(ccurrent);
La seule partie à modifier est la partie :
lctable[1]= 'https://2img.net/u/2413/10/00/00/smiles/49380.png';
lctable[3]= 'https://2img.net/u/2413/10/00/00/smiles/732256.png';
Le chiffre à mettre entre [ et ] est la position de la catégorie ( 1 si c'est la première catégorie, 2 si c'est la deuxième catégorie, 3 si c'est la troisième catégorie, ... ) et après il y a juste l'adresse de l'image entre apostrophe.