Le Deal du moment :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

Petit code
 MessageSujet: Petit code   Petit code EmptySam 2 Avr - 10:53

Anonymous
Invité


Click

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.
 MessageSujet: Re: Petit code   Petit code EmptySam 2 Avr - 11:00

Anonymous
Invité


Click

Peux tu nous envoyer un lien ou on peut voir le résultat ? x)
 MessageSujet: Re: Petit code   Petit code EmptySam 2 Avr - 11:09

Anonymous
Invité


Click

Spoiler:

Tout en sachant que vous pouvez modifier les images ect comme bon vous semble.
 MessageSujet: Re: Petit code   Petit code EmptyDim 3 Avr - 10:21

Anonymous
Invité


Click

Personnellement , je me sentirais perdue avec ces onglets :/ Et puis, c'est pas très utile vu que le forum n'est pas très grand --
Je te remercie tout de même de t'impliquer dans son amélioration et t'en suis reconnaissante Smile
 MessageSujet: Re: Petit code   Petit code EmptyDim 3 Avr - 11:04

Anonymous
Invité


Click

Oki si vous voulez diverses améliorations plus tard je vous aiderais volontiers si besoin il y a ^^
 MessageSujet: Re: Petit code   Petit code Empty

Contenu sponsorisé


Click

   
Page 1 sur 1

 Sujets similaires

-
» Petit, petit petit![Mission : Chasse aux Balkan]
» Un petit coin jeu ?
» Tutoriel Code
» Il était un petit navireuh ... ♫
» Un petit nouveau :)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Fairy Tail RPG :: Archives :: Archives RP