Voici le fameux code, n'oubliez pas de modifier le CSS à votre goût, car je doute que cette structure de QEEL vous plaise physiquement ^^

• Vous devez être fondateur de votre forum pour éditer les templates


[size]

D'abord commençons par le plus important, le script Javascript qui nous permet de faire des onglets.
Pour l'installer, rendez vous dans l'onglet Modules > HTML & Javascript > Gestion des codes Javascript et là cliquez sur "Créer un nouveau Javascript", puis insérez le code suivant :
Code:Sélectionner le contenuSélectionner le contenu
function changeOnglet(_this){
  var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('div');
  for(var i = 0; i < getOnglets.length; i++){
      if(getOnglets.id){
        if(getOnglets.id == _this.id){
            getOnglets[i].className = 'mon_onglet_selected';
            document.getElementById('c' + _this.id).style.display = 'block';
        }
        else {
            getOnglets[i].className = 'mon_onglet';
            document.getElementById('c' + getOnglets[i].id).style.display = 'none';
        }
      }
  }
}

[/i][/i][/i][/size][size][i][i][i]

Maintenant la partie template, la partie la plus complexe, rendez vous dans l'ongletAffichage > Template > Général > [i]index_body puis vous trouvez la partie du codeentre les deux commentaires suivants : 

[/i][/i][/i][/i][/size]

Code:

<!-- BEGIN disable_viewonline -->

[size][i][i][i]
 (début du QEEL)
et 
[/i][/i][/i][/size]

Code:

<!-- END disable_viewonline -->

[size][i][i][i]
 (fin du QEEL)

Cette partie est votre ancienne structure de QEEL. Supprimez tout sauf les commentaires BEGIN et END indiqués plus haut, puis ajoutez le code suivant :
Code:Sélectionner le contenuSélectionner le contenu
<table width="800px" cellspacing="5" cellpadding="1">
  <tr>
      <td colspan="2" align="center">
        <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
      </td>
  </tr>
  <tr>
      <td colspan="2" class="groupes">
        <div id="mes_onglets">
            <div id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe1"> Groupe 1 </a>
            </div>

            <div id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe2"> Groupe 2 </a>
            </div>

            <div id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe3"> Groupe 3 </a>
            </div>

            <div id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe4"> Groupe 4 </a>
            </div>

            <div id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe5"> Groupe 5 </a>
            </div>

            <div id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe6"> Groupe 6 </a>
            </div>

            <div id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe7"> Groupe 7 </a>
            </div>

            <div id="o_8" class="mon_onglet_selected" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe8"> Groupe 8 </a>
            </div>

            <div id="o_9" class="mon_onglet" onmouseover="changeOnglet(this);">
              <a href="LIEN" class="groupe9"> Groupe 9 </a>
            </div>
        </div>
      </td>
  </tr>
  <tr>
      <td valign="top">
        <div class="stats">
            <span class="gensmall"> 
            {TOTAL_POSTS}.
            {TOTAL_USERS}.
            {NEWEST_USER}, nous lui souhaitons la bienvenue !
            </span>
            <br /><br />
            <span class="gensmall"> {LOGGED_IN_USER_LIST}</span>
            <br />
            <!-- BEGIN switch_chatbox_activate -->
            <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}</span>
            <!-- END switch_chatbox_activate -->
            <br /><br />
            <span class="gensmall">{TOTAL_USERS_ONLINE}.
            {RECORD_USERS}.
            </span>
        </div>
      </td>
      
      <td colspan="1" align="justify">
        <div class="descgroupes">
            <div id="mes_contenus">
              <div id="co_1" class="mon_contenu">
                  description groupe 1
              </div>
              <div id="co_2" class="mon_contenu">
                  description groupe 2          
              </div>
              <div id="co_3" class="mon_contenu">
                  description groupe 3
              </div>
              <div id="co_4" class="mon_contenu">
                  description groupe 4
              </div>
              <div id="co_5" class="mon_contenu">
                  description groupe 5
              </div>
              <div id="co_6" class="mon_contenu">
                  description groupe 6
              </div>
              <div id="co_7" class="mon_contenu">
                  description groupe 7
              </div>
              <div id="co_8" class="mon_contenu">
                  description groupe 8
              </div>
              <div id="co_9" class="mon_contenu">
                  description groupe 9
              </div>
            </div>
        </div>
      </td>
  </tr>
  
  <tr>
      <td colspan="2">
        <div class="membreconnecte" align="justify"><table>{L_CONNECTED_MEMBERS}</table></div>
      </td>
  </tr>
</table>
N'oubliez d'enregistrer vos modifications puis de publier votre template pour que le forum prenne en compte vos modifications.

[/i][/i][/i][/size][size][i][i][i]

Maintenant la dernière partie, que vous avez le droit de changer ^^. Toujours dans l'onglet Affichage mais cette fois dans Images & Couleurs > Couleurs > Feuille de style CSS, collez le code suivant :
Code:Sélectionner le contenuSélectionner le contenu
/* ======================================
Personnalisation de la structure du QEEL 
fait par Faucon pour CSS ACTIF
=========================================
Début du code 
=========================================*/

/*zone groupes*/
.groupes {/*aspect des groupes*/
font-size: 11pt;
text-shadow: #000000 1px 1px 1px ;
font-family: courrier new, courrier, cursive
}
.mon_onglet, .mon_onglet_selected { /*position des onglets*/
padding-left : 5px;
padding-right : 5px;
display:inline-block;
}

/*Couleur des groupes*/
a.groupe1 { color:#d93f32;}
a.groupe2 { color:#FFF;}
a.groupe3 { color:#980819;}
a.groupe4 { color:#E67D22;}
a.groupe5 { color:#B17F98;}
a.groupe6 { color:#5CDF72;}
a.groupe7 { color:#980852;}
a.groupe8 { color:#F76AA5;}
a.groupe9 { color:#675C52;}
 
/*zone de description des groupes*/
.descgroupes { /*description des groupes*/
width:400px;
padding: 5px;
box-shadow:0px 0px 10px #6581C1; 
-moz-box-shadow: 0px 0px 10px #6581C1; 
-webkit-box-shadow: 0px 0px 10px #6581C1;
}

#mon_contenu, .descgroupes { height : 190px; }
.mon_contenu { display:none; }
 
/*zone des statistiques*/
.stats { /*partie statistique du forum*/
width:400px;
height:200;
text-align: justify;
padding: 5px;
box-shadow:0px 0px 10px #5CDF72; 
-moz-box-shadow: 0px 0px 10px #5CDF72; 
-webkit-box-shadow: 0px 0px 10px #5CDF72; 
}
.membreconnecte{ /*partie membres connéctés*/
overflow: auto; 
height: 75px;
padding: 5px;
box-shadow:0px 0px 10px #d93f32; 
-moz-box-shadow: 0px 0px 10px #d93f32; 
-webkit-box-shadow: 0px 0px 10px #d93f32;
}

/* ======================================
Personnalisation de la structure du QEEL 
fait par Faucon pour CSS ACTIF
=========================================
Fin du code
=========================================*/
Et le tour est jouer vous avez un code que vous pouvez modifier au fil de vos envies ^^

[/i][/i][/i][/size][size][i][i][i]

Maintenant que vous avez le code, je vais vous donner l'astuce pour rajouter des groupes, donc des nouveaux onglets. Tous se passe dans le template à part pour la couleur des groupes.
Rien de plus simple, vous pouvez même le voir si vous analyser votre template. Les onglet sont dirigés par deux codes :
¤ Le premier qui donne le nom à l'onglet, à mettre en dessous du dernier onglet
Code:Sélectionner le contenuSélectionner le contenu
<div id="o_XX" class="mon_onglet" onmouseover="changeOnglet(this);">
    <a href="LIEN" class="groupe9"> Groupe XX </a>
</div>
¤ Le second qui donne le contenu de l'onglet, à mettre en dessous de la dernière description
Code:Sélectionner le contenuSélectionner le contenu
<div id="co_XX" class="mon_contenu">
      description groupe XX
</div>
N'oubliez pas de mettre un nombre à la place de XX, mais ce dernier doit être différent de ceux déjà utilisés.

Voili voulou ^^[/i][/i][/i][/size]