Iron CrazeK Fondateur du Forum.
Messages : 106 Jeton de Gameurs : 1112225940 Réputation : 4 Date d'inscription : 12/09/2014
| Sujet: [Qui est en Ligne] Onglet/Groupe Lun 3 Nov - 16:30 | |
| CODEVous devez poster un message à la suite pour afficher le code 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
LA PARTIE JAVASCRIPT[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] LA PARTIE TEMPLATE[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] LA PARTIE CSS[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] L'AJOUT D'ONGLET[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] |
|