| Classer les catégories en onglets | |
|
|
Auteur | Message |
---|
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Classer les catégories en onglets Dim 1 Aoû - 11:58 | |
| Nous allons faire a peu près ceci : Mettez cette configuration sur votre forum : (PA › Affichage › Structure et hiérarchie) - Spoiler:
Ensuite, rendez-vous sur le Générateur d'Onglets http://toutsurlinformatique.zxq.net/onglets.html (a ouvrir dans une nouvelle fenêtre ). Lorsque vous avez insérer tous les noms de vos onglets, il vous suffit de cliquer sur Annuler. Ensuite, vous prenez TOUT le codeet ce sera votre nouveau template index_box.N'oubliez pas de le Publier ! Passons au CSS - Citation :
- .text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_nomonglet1,#cat_nomonglet2,#cat_nomonglet3,#cat_nomonglet4,#cat_nomonglet5 /*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('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/ width:LARGEURpx; /*Largeur de l'onglet étant actif*/ height:HAUTEURpx; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('URL_ONGLET_INACTIF') no-repeat; /*URL de l'onglet étant inactif*/ width:LARGEURpx; /*Largeur de l'onglet étant inactif*/ height:HAUTEURpx; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; } Ce qui est en vert est à modifier par dessus tout Le reste, c'est facultatif Tuto par HARRICOW du forum http://css-actif.forumactif.org | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 12:08 | |
| Merci ! :) Mais alors, dans le générateur, on marque tous les noms de catégories "en une fois", ou...? Ensuite, je voulais savoir, comment faire pour placer des forums, dans les catégories ? Et, enfin, il faut copier tout le nouveau code, & le coller à la place de l'autre index_body ? | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 13:27 | |
| Dans le générateur il faut que tu marque les noms des catégories une par une et tu clique sur ok a chaque fois. Une fois que a tu fini tu clique sur Annuler et cela te termine le template.
Pour les forums dans les catégories tu n'a rien a faire cela ce fait automatiquement.
Et pour finir oui il faut que tu colle TOUT le code et que le remplace TOUT dans index_box (Affichage > Template > Général > Index_box) Par contre si tu a modifié le tempalte index_box il faut que tu "fusionne" ta modif et le template du générateur | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 13:57 | |
| Okay merci ! :) Je vais m'affairer à ça cet après-midi ^^ (pas sur Paradisiac :) ) Je voulais savoir aussi, on est sensé mettre quoi dans URL_ONGLET_ACTIF & URL_ONGLET_INACTIF ?
Dernière édition par Anis le Dim 1 Aoû - 14:07, édité 1 fois | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:04 | |
| Je voulais juste rajouter qu'avant de publier le template après avoir enregistrer tu peut voir le résultat en cliquant sur le petite flèche après "En Attente" | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:13 | |
| | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:13 | |
| - Anis a écrit:
- )
Je voulais savoir aussi, on est sensé mettre quoi dans URL_ONGLET_ACTIF & URL_ONGLET_INACTIF ? | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:23 | |
| En faite c'est 2 fond pour les onglet qui sert de structure Par exemple sur Enchanted-Forest j'ai mis crée 2 fond de couleur uni (rose pale et rose soutenu avec un effet de coin arrondi) Je sais pas si j'ai était clair ^^
Est ce que tu pourrait me donner le lien du forum sur lequel tu fait cette manip pour que je voit le résultat ^^ | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:26 | |
| D'accord ! :) J'essaye & je te montre, okay ? | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:31 | |
| | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:37 | |
| Sa marche pas -.- Regarde ici ... Voilà le code CSS : - Spoiler:
- Code:
-
.text { color:#F8CB86; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_LUCKY'S ADMINISTRATION,#cat_LUCKY'S SHOP,#cat_LUCKY'S ART,#cat_LUCKY'S MAG,#cat_LUCKY'S WWW /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #F9EDD5; 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://img10.hostingpics.net/pics/595371Copie_de_Copie_de_Sans_titre_29.png') no-repeat; /*URL de l'onglet étant actif*/ width:90px; /*Largeur de l'onglet étant actif*/ height:45px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_inactif { background:url('http://img10.hostingpics.net/pics/400749A.png') no-repeat; /*URL de l'onglet étant inactif*/ width:90px; /*Largeur de l'onglet étant inactif*/ height:45px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
& 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">{LAST_VISIT_DATE}
{CURRENT_TIME}
</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>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- 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">LUCKY'S ADMINISTRATION</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">LUCKY'S SHOP</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">LUCKY'S ART</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">LUCKY'S MAG</li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">LUCKY'S WWW</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4');
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>
</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 -->
| |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 14:47 | |
| Essaye d'enlever tous les ' dans le template et dans le CSS | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 15:42 | |
| Est-ce que tu pourrais essayer de le faire sur mon forum, & m'expliquer comment tu as fais après ? :s | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 15:49 | |
| Bien sur ^^ On voit sa par Mp ^^ Par contre il faut que je puisse avoir accès aux templates et pour cela il faut être fondateur ... Et puis si j'y arrive tu aura juste a changer les couleurs par la suite quand tu changera de design ;) | |
|
| |
Anis A dmin
Age : 26 Messages : 997 Date d'inscription : 01/05/2010
| Sujet: Re: Classer les catégories en onglets Dim 1 Aoû - 17:07 | |
| Ok, je t'envoie mon MDP etc par MP ! :) Merci ! :23: | |
|
| |
RETROBEAR.
Messages : 13 Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Mar 10 Aoû - 18:08 | |
| | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Mar 10 Aoû - 18:23 | |
| il faut que tu change les valeurs du CSS qui sont en rouge essaye 150px en largeur et 25px en hauteur
.onglet_actif { background: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/ width: LARGEURpx; /*Largeur de l'onglet étant actif*/ height :HAUTEURpx; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('URL_ONGLET_INACTIF') no-repeat; /*URL de l'onglet étant inactif*/ width: LARGEURpx; /*Largeur de l'onglet étant inactif*/ height: HAUTEURpx; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; } | |
|
| |
RETROBEAR.
Messages : 13 Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Mar 10 Aoû - 18:36 | |
| | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Mar 10 Aoû - 18:49 | |
| Dans le CSS, remplace: - Code:
-
.text { color:#FFFFFF; /*Couleur du texte de vos onglets*/ cursor:pointer; } Par : - Code:
-
.text { font-family:Arial,sans-serif;/*police d'écriture*/ font-size:25px;/*taille de l'écriture*/ color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; } et rajoute ce code dans les parties onglet_actif et .onglet_nactif : - Code:
-
font-family:Arial,sans-serif; font-size:10px; | |
|
| |
RETROBEAR.
Messages : 13 Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Mar 10 Aoû - 19:36 | |
| | |
|
| |
Musary C o- A dmin
Age : 35 Messages : 415 Localisation : La Rochelle Date d'inscription : 05/05/2010
| Sujet: Re: Classer les catégories en onglets Mar 10 Aoû - 21:49 | |
| | |
|
| |
Contenu sponsorisé
| Sujet: Re: Classer les catégories en onglets | |
| |
|
| |
| Classer les catégories en onglets | |
|