Catégorie en onglet
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Catégorie en onglet
Bonjour, je voudrais mes catégorie en onglet.
J'ai essayer plusieurs tutoriel mais jamais ça n'a fonctionné correctement.
Voila mon Index_Box :
Merci =)
J'ai essayer plusieurs tutoriel mais jamais ça n'a fonctionné correctement.
Voila mon Index_Box :
- 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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div id="table_head"><div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- 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">
<div class="titrecategorie"><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></div>
</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="80%" 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}>
<center><DIV style="TEXT-ALIGN: justify;"><div class="milieu"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span><div class="niveau_inferieur"><br>{catrow.forumrow.L_LINKS}
{catrow.forumrow.LINKS}</div></center></div></div></td>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50" width="300px">
<div class="derniers_sujets"><span class="gensmall"><p>{catrow.forumrow.LAST_POST}<br><br>
<div class="derniers_post">{catrow.forumrow.TOPICS} {L_TOPICS} | {catrow.forumrow.POSTS} {L_POSTS}</div></div></p>
<br/>
</td>
</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><div class="basforum"><img src="{SPACER}" alt="" height="5" width="1" /></div><!-- END tablefoot --><!-- END catrow -->
Merci =)
Re: Catégorie en onglet
Bonjour, avez vous essayé le générateur de vic_le_faucheur sur NU ? C'est un moyen très facile pour créer les onglets tout en gardant votre template modifié. Voici le lien : http://shared-development.clanteam.com/onglet.html. Donc voilà je vous ai mis 5 onglets à vous d'en rajouter ou de changer les titres c'est assez simple je pense :
Le template Index_box :
Le Javascript :
Panneau d'administration > Modules > HTML et Javascript > Gestion des codes Javascript
- Activez la gestion des codes Javascript (cliquez sur "oui", puis sur "enregistrer")
- Cliquez sur "créer un nouveau Javascript"
- Mettez un titre par exemple ("catégories en onglets")
- Vérifiez bien que seule la case "sur l'index" est cochée.
Le CSS :
Cordialement.
Le template Index_box :
- 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>
<div id="conteneur_onglets">
<table><tr>
<td class="onglet"><div>Nom onglet 1</div></td>
<td class="onglet"><div>Nom onglet 2</div></td>
<td class="onglet"><div>Nom onglet 3</div></td>
<td class="onglet"><div>Nom onglet 4</div></td>
<td class="onglet"><div>Nom onglet 5</div></td>
</tr></table>
</div>
<div id="conteneur_categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie"><div id="table_head"><div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- 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">
<div class="titrecategorie"><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></div>
</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="80%" 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}>
<center><DIV style="TEXT-ALIGN: justify;"><div class="milieu"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span><div class="niveau_inferieur"><br>{catrow.forumrow.L_LINKS}
{catrow.forumrow.LINKS}</div></center></div></div></td>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50" width="300px">
<div class="derniers_sujets"><span class="gensmall"><p>{catrow.forumrow.LAST_POST}<br><br>
<div class="derniers_post">{catrow.forumrow.TOPICS} {L_TOPICS} | {catrow.forumrow.POSTS} {L_POSTS}</div></div></p>
<br/>
</td>
</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><div class="basforum"><img src="{SPACER}" alt="" height="5" width="1" /></div></div>
<!-- END tablefoot --><!-- END catrow -->
</div>
Le Javascript :
Panneau d'administration > Modules > HTML et Javascript > Gestion des codes Javascript
- Activez la gestion des codes Javascript (cliquez sur "oui", puis sur "enregistrer")
- Cliquez sur "créer un nouveau Javascript"
- Mettez un titre par exemple ("catégories en onglets")
- Vérifiez bien que seule la case "sur l'index" est cochée.
- Code:
$('document').ready(function()
{
if($('.categorie').size() > 1)
{
$('#conteneur_onglets').css( 'display' , 'block' );
$('#conteneur_onglets .onglet').click(function()
{
change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
});
$('.onglet:eq(0)').click();
}
});
function change_categorie( index )
{
if( $('.categorie:eq(' + index + ')').size() != 0 )
{
$('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );
$('.categorie').css( 'display' , 'none' );
$('.categorie:eq(' + index + ')').fadeIn( 500 );
$('.onglet.actif').removeClass('actif');
$('.onglet:eq('+ index +')').addClass('actif');
}
else alert('Vous ne pouvez pas accéder à cette catégorie');
}
Le CSS :
- Code:
/* CSS pour le conteneur des catégories */
#conteneur_categories
{
}
/* CSS pour les catégories */
.categorie
{
}
/* CSS pour le conteneur des onglets */
#conteneur_onglets
{
display: none;
}
/* CSS pour les onglets */
.onglet
{
cursor: pointer;
}
Cordialement.
Xibition- ****
-
Messages : 457
Inscrit(e) le : 23/05/2011
Re: Catégorie en onglet
Un ÉNORME Merci =)
Je n'avais pas activer les code javacript Je comprend pourquoi les autres onglet avant ne marchais pas!
Je n'avais pas activer les code javacript Je comprend pourquoi les autres onglet avant ne marchais pas!
Re: Catégorie en onglet
Ce n'est rien, si votre problème est résolu, éditez votre 1er message et cochez
Xibition- ****
-
Messages : 457
Inscrit(e) le : 23/05/2011
Sujets similaires
» Catégorie en onglet
» Système de catégorie par onglet
» Catégorie par onglet
» Catégorie par onglet
» Catégorie en onglet qui ne s'affiche pas
» Système de catégorie par onglet
» Catégorie par onglet
» Catégorie par onglet
» Catégorie en onglet qui ne s'affiche pas
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum