| Classer les Catégories de votre Forum par Onglet (messages) | |
|
|
Edelweiss
{ Membre }
Messages : 105
| Coucou,
J'ai une question : si on a déjà modifier le template d'index box on peut quand même faire ce tuto ? | | |
|
| |
Invité Invité
| Bonsoir, Je n'ai pas réalisé le tuto mais logiquement tu dois pouvoir le réaliser mais tu devras adapter tes précédentes modifications à ton nouveau template. Haricoow te confirmera ou non mes propos Bonne soirée | | |
|
| |
ptitlac
{ Membre }
Messages : 226
| Bonsoir ! Premièrement, merci pour ce tuto ! depuis le temps que je cherchais comment faire ^^ Mais problème, cela ne fonctionne pas... J'ai bien l'image de mon onglet actif qui est affiché, mais pas celui des inactifs. pourtant j'ai copier coller comme expliquer et mis l'adresse a la bonne place. D'où viens le problème ? Voici mon template - Spoiler:
- Code:
-
<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>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center"> <ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Administration</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Corbeille</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Teste</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">blablabla</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3');
function change_cat(numero) { document.getElementById(nom_cat[anc_cat]).style.display = 'none'; document.getElementById(nom_cat[numero]).style.display = 'block'; document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif'; document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif'; anc_cat = numero; }
function capture_cat() { if(nom_cat[compteur_cat] == nom_cat[0]) {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">'); } compteur_cat++; }
//--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript"> <!-- capture_cat(); //--> </script>
<!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap" width="50">{L_TOPICS}</th> <th nowrap="nowrap" width="50">{L_POSTS}</th> <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> </span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> </td> <!-- BEGIN forum_link_no --> <td class="row3" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.TOPICS}</span> </td> <td class="row2" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.POSTS}</span> </td> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> <!-- END forum_link_no --> <!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Et mon CSS - Spoiler:
- Code:
-
.text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Administration,#cat_Corbeille,#cat_blablabla,#cat_Teste, /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('http://i30.tinypic.com/rbl7jm.jpg') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('[IMG]http://i27.tinypic.com/30mnv2d.jpg[/IMG]') no-repeat; /*URL de l'onglet étant inactif*/ width:100px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
Ah c'est du teste, donc ne faite pas attention aux images. Merci beaucoup !! Ptitlac | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| @ptitlac : PAS DE BBCODE DANS LE CSS !! Essaye avec ceci : - Spoiler:
- Code:
-
.text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Administration,#cat_Corbeille,#cat_blablabla,#cat_Teste, /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('http://i30.tinypic.com/rbl7jm.jpg') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('http://i27.tinypic.com/30mnv2d.jpg') no-repeat; /*URL de l'onglet étant inactif*/ width:100px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; } @Edelweiss : Il faut juste que tu sois un peu logique ;D Et ça dépend où tu as modifier. Va quand même dans le générateur d'onglets et regarde bien. Normalement tu as : <!-- DEBUT MODIF ONGLETS --> et <!-- FIN MODIF ONGLETS -->Il n'y a que ce qui est entre <!-- DEBUT MODIF ONGLETS --> et <!-- FIN MODIF ONGLETS --> qui concerne les onglets, donc tu copieras dans ton template uniquement cela juste après la : - Code:
-
</table> Si tu n'y arrive pas, n'hésites pas à nous passer ton template avec le nom des onglets que tu veux | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| RAJOUT D'UNE ASTUCE : Si vous souhaitez une couleur unie en fond de vos onglets, remplacez : - Code:
-
background:url('URL_ONGLET') no-repeat; Par - Code:
-
background-color : #FF0000; /*La couleur hexadécimale est à modifier. J'ai fait exprès de vous mettre du rouge pour que ça se voye x) */ | | |
|
| |
ptitlac
{ Membre }
Messages : 226
| Oh lala qu'elle cruche ><"
Navrée pour mon message inutile...surtout que je le sais -_-'
Je ferais plus attention la prochaine fois.
Merci Haricoow !!!
Vais maintenant tenter de faire sa sur un forum au template modifier xDD
Ptitlac | | |
|
| |
ptitlac
{ Membre }
Messages : 226
| Bon je repose mon problème ><" Je suis navrée du double poste, je n'avais tout simplement pas prévu de faire le teste aussi rapidement... alors voilà, j'ai un soucis de structure de mon forum avec se code, je m'explique. Voici ce que j'ai sans retoucher le template et le css avec se code. - Spoiler:
Mais en modifiant, sa me donne cela. - Spoiler:
soit une taille plus petite en largeur, un cadre noir autour pas très joli et sa me décolle les bords de ma mise en page précédente. Voici le CSS - Spoiler:
- Code:
-
/********onglets***************/
.text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Administration,#cat_Corbeille,#cat_blablabla,#cat_Teste, /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('http://i30.tinypic.com/rbl7jm.jpg') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background-color:#FF0000; /*URL de l'onglet étant inactif pour une image background:url('') no-repeat*/ width:100px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
Et le template - Spoiler:
- Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall"><br /> <br /><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>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center"> <ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Administration</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Corbeille</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1');
function change_cat(numero) { document.getElementById(nom_cat[anc_cat]).style.display = 'none'; document.getElementById(nom_cat[numero]).style.display = 'block'; document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif'; document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif'; anc_cat = numero; }
function capture_cat() { if(nom_cat[compteur_cat] == nom_cat[0]) {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">'); } compteur_cat++; }
//--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript"> <!-- capture_cat(); //--> </script>
<!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> </td> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr border="0">
<td class="row1" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" border="0">
<!---- DÉBUT DES MODIF ---->
<form> <fieldset class="affichage_categories"> <legend class="titre_categories"><img src="url" /><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></legend>
<table class="table_categories" align="center"> <tr> <td width="50px"> <div class="bouton_accueil"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"> </div> </td> <td width="600px"> <div class="forum_description"> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> </div> <div class="forum_sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><br /> </td>
<td width="150px"> <div class="messages_sujets_derniers_sujets"> <span class="gensmall"> <div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div> <div class="sujets_messages">{catrow.forumrow.TOPICS} Sujets & {catrow.forumrow.POSTS} Messages</div> </span> </div> </td> </tr> </table> </fieldset> </form>
<!---- FIN DES MODIF ----> </td>
<!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
| | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Et t'as fait ça sur un template qui était déjà modifié ? | | |
|
| |
Edelweiss
{ Membre }
Messages : 105
| Le Générateur enlève les deux premières lignes de la deuxième table (table class="forumline" etc...). Or c'est ce forumline (j'ai changé le nom de la classe) qui donne l'aspect de mon forum xD. Enfin bon, tant pis pour les onglets c'est pas grave ^^. | | |
|
| |
Naki-Shin
{ Membre }
Messages : 34
| Bonjour, Je ne comprend pas pourquoi sa ne marche pas chez moi voici mon forum teste : http://perso.forum-pro.fr/forum.htm et voici ma template et Css [spoiler] - Code:
-
<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>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center"> <ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Votre 1ère catégorie</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">RPG</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1');
function change_cat(numero) { document.getElementById(nom_cat[anc_cat]).style.display = 'none'; document.getElementById(nom_cat[numero]).style.display = 'block'; document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif'; document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif'; anc_cat = numero; }
function capture_cat() { if(nom_cat[compteur_cat] == nom_cat[0]) {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">'); } compteur_cat++; }
//--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript"> <!-- capture_cat(); //--> </script>
<!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap" width="50">{L_TOPICS}</th> <th nowrap="nowrap" width="50">{L_POSTS}</th> <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> </span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> </td> <!-- BEGIN forum_link_no --> <td class="row3" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.TOPICS}</span> </td> <td class="row2" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.POSTS}</span> </td> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> <!-- END forum_link_no --> <!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
- Code:
-
/********onglets***************/
.text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Votre 1ère catégorie,#cat_RPG, /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:800px; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-22px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('http://hitskin.com/themes/13/82/71/i_background.gif') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('http://hitskin.com/themes/13/82/71/i_background.gif') no-repeat; /*URL de l'onglet étant inactif*/ width:150px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }[/spoiler] | | |
|
| |
© Pilepoil
{ Membre }
Messages : 80
| Même soucis, Les onglets ne fonctionnent pas :s Ils n'apparaissent meme pas sur mon forum, il déforme juste ma page . http://rock-werchter.1fr1.net/index.htm CSS - Code:
-
.text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Ready to Rock ?,#cat_On the Road again,#cat_Werchter's Festival,#cat_Teste, /*Wanna be our Friend... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('http://moe.mabul.org/up/moe/2010/07/21/img-154245jasjj.jpg') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('http://moe.mabul.org/up/moe/2010/07/21/img-154245jasjj.jpg') no-repeat; /*URL de l'onglet étant inactif*/ width:100px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
TEMPLATE: - Code:
-
<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>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center"> <ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Ready to Rock ?</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">On the Road again</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Werchter's Festival</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Wanna be our Friend</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3');
function change_cat(numero) { document.getElementById(nom_cat[anc_cat]).style.display = 'none'; document.getElementById(nom_cat[numero]).style.display = 'block'; document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif'; document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif'; anc_cat = numero; }
function capture_cat() { if(nom_cat[compteur_cat] == nom_cat[0]) {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">'); } compteur_cat++; }
//--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript"> <!-- capture_cat(); //--> </script>
<!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap" width="50">{L_TOPICS}</th> <th nowrap="nowrap" width="50">{L_POSTS}</th> <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> </span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> </td> <!-- BEGIN forum_link_no --> <td class="row3" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.TOPICS}</span> </td> <td class="row2" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.POSTS}</span> </td> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> <!-- END forum_link_no --> <!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Merci d'avance | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Je ne sais pas du tout ce qu'on vos forums parce que moi ça marche NIKEL @ Naki : Tes onglets fonctionnent | | |
|
| |
Naki-Shin
{ Membre }
Messages : 34
| Bonjour, Oui mais on vois les deux catégorie quand on va sur "votre première catégorie" et on ne vois rien quand on va sur "RPG" PS : j'ai Firefox | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Peut-être que tu n'as pas de Sous-Forums dans la deuxième catégorie | | |
|
| |
Naki-Shin
{ Membre }
Messages : 34
| Maintenant mes deux catégories sont identique {sauf par les noms} et toujours pas de changement | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Grrrr... Ça m'énerve.. Ce code est censé marcher! | | |
|
| |
Naki-Shin
{ Membre }
Messages : 34
| Ah ! J'ai trouver =) Enfaite il faut que les catégories sois détacher. | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| C'est à dire ? | | |
|
| |
Naki-Shin
{ Membre }
Messages : 34
| Voici le screen : - Spoiler:
Avant c'était cocher sur le moyen du haut se qui fessais que les catégories rester accrocher. Et j'ai cocher celui du bas et sa a marcher. Je ne pourrais pas expliquer autrement. | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Je vais le rajouter dans le tutoriel | | |
|
| |
Naki-Shin
{ Membre }
Messages : 34
| Ok {desoler pour le trop gros sceen}
Il faut bien remplacer "cursor:pointer;" par autre chose si on veut des onglets cliquable ? Si oui par quoi ? | | |
|
| |
Sui
{ Membre actif }
Messages : 346
| Non, le cursor ce n'est pas obligé. (: | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Pour remplacer par des onglets cliquables, remplacez tous les onMouseOver par onClick | | |
|
| |
Crows
{ Membre }
Messages : 18
| Bonjour, Merci pour ce tuto. Je bloque dès la deuxième étape. Je suis un peu quiche sur les bords Je ne comprend pas le site "générateurs d'onglets", je ne vois pas où je peux rentrer les noms des catégories, je n'ai pas non plus de bouton Annuler. j'ai juste un très long code quand je clique sur le site. Est ce normal ? | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Hum... alors au départ tu dois avoir un code oui et ensuite une fenêtre qui apparaît et qui te demande des informations. Quelle version d'Internet Explorer as-tu ? | | |
|
| |
Contenu sponsorisé
| |
| |
| Classer les Catégories de votre Forum par Onglet (messages) | |
|