Astuce: Affichage des forums avec onglets

[Shadow]

Affichage des forums avec onglets

Beaucoup d'entre vous demandent comment réaliser cet effet : Ce tutoriel tâchera de vous l'expliquer. Évitez les modifications de templates si vous n'avez pas les connaissances minimales requises... Avant toute chose, vous devez : - être fondateur du forum, - être en version phpBB2, - avoir un minimum de connaissances en HTML, & templates. Ajout dans le CSS Panneau d'administration Affichage Couleurs Feuille de style CSS Insérez ce code dans votre feuille de style CSS : Code: /*--- Cette partie correspond à la description du forum ---*/ .forum-description {       margin: auto;       padding: 10px;       color: #000000;       width: 80%;       border: 3px solid #000000;       -moz-border-radius: 14px;       -webkit-border-radius: 14px;       font-size: 12px; } /*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/ .forum-stats {       -moz-border-radius-topleft: 20px;       -moz-border-radius-topright: 20px;       -webkit-border-top-right-radius: 20px;       -webkit-border-top-left-radius: 20px;       border-top-right-radius: 20px;       border-top-left-radius: 20px;       border-bottom: 0 none !important;       border-left: 3px solid #000000;       border-right: 3px solid #000000;       border-top: 3px solid #000000;       color: #000000;       font-size: 11px;       font-style: italic;       height: 14px;       left: 280px;       padding: 3px;       position: relative;       text-align: center;       width: 200px; } /*--- Cette partie correspond à l'affichage des sous-forums ---*/ .forum-sousforum {       color: #000000;       border: 3px solid #000000;       border-top: 0px !important;       -moz-border-radius-bottomleft: 14px;       -moz-border-radius-bottomright: 14px;       -webkit-border-bottom-right-radius: 14px;       -webkit-border-bottom-left-radius: 14px;       border-bottom-right-radius: 14px;       border-bottom-left-radius: 14px;       margin: auto;       padding: 4px;       color: #000000;       width: 50%;       text-align: center;       height: 14px;       font-size: 11px; } Modifications des templates Panneau d'administration Affichage Templates Général Editez le template index_box Remplacez l'intégralité du template par : 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">    <tr>       <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">&nbsp;</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}> <!---- DÉBUT DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ---->       <div class="forum-stats">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div> <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>          <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>       <!-- BEGIN forum_link_no -->       <td class="row3 over" align="center" valign="middle" height="50">          <span class="gensmall">{catrow.forumrow.LAST_POST}</span>       </td> <!---- FIN DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ---->       <!-- 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 --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> Attention : si vous aviez effectué d'autres modifications sur ce template, elles seront perdues. Auquel cas je vous conseille plutôt d'essayer de combiner les deux codes : le vôtre et celui-ci. Vérifiez en cliquant sur En attente Et si vous êtes satisfait du résultat, publiez

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Toto456. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

[FANCH 56]

Bonjour Zen

T'as le même pour INVISION ?

[Netgirl]

Super mais dommage j'utilise phpBB3

[Threax]

Bonjour,

Vous devez vous douter Fanch que sous Invision cet effet ne peut être obtenu... désolé

Idem pour phpBB3, Netgirl... Il n'y a plus qu'à changer de version

[FANCH 56]

Bon ben (coup de pied dans une boite)......tant pis

[Invité]

Merci Zen !

[geokdo]

Quelqu'un a t-il testé cet effet ?

[guillaume7]

Oui, comment ça fait?

[Basil Hawkins]

Super ...
Désolé d'afficher mon mécontentement, mais cet effet est souvent travaillé par des personnes ayant cherché des codes et pris la peine de rendre tout ça original, et maintenant on donne les tutoriels avec un code à copier/coller vite fait à mettre. Après c'est décourageant pour certaines personnes de faire ça ...

[astrella]

Bonsoir,

Je viens de faire un essai,
voilà la capture d'écran :

Spoiler:

Vous pouvez toujours essayer :-)) car il y a une validation à faire avant que cela soit définitif! donc ça n'engage à rien.
Je vous conseille de bien sauvegarder vos données avant sur word ou blocnote.

Je trouve ça pas mal, après on peut modifier la couleur du cadre etc ...

Pour comparer vous pouvez aller voir sur mon forum, je n'ai pas encore fait les modifs:
http://les-anges-de-lastral.forumpro.fr/forum.htm

amicalement,

MERCI à forumactif pour leur travail et leur créativité!


:

[bihabib]

Bonjour
merci c'est joli comme truc
mais si je veux ne pas mettre la partie correspond à l'affichage des sous-forums,, je me limite juste sur ce code

Code:

/*--- Cette partie correspond à la description du forum ---*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      width: 80%;
      border: 3px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
}

/*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
.forum-stats {
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      border-bottom: 0 none !important;
      border-left: 3px solid #000000;
      border-right: 3px solid #000000;
      border-top: 3px solid #000000;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      height: 14px;
      left: 280px;
      padding: 3px;
      position: relative;
      text-align: center;
      width: 200px;
}



j'ai fais comme ceci mais j 'ai eu un message d'erreur sur CSS
merci

[Threax]

Bonjour,

Quel message d'erreur ? Le code semble être correct.

[bihabib]

Bonjour,

Quel message d'erreur ? Le code semble être correct.

merci voici le message

Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.
Nous vous conseillons de relire votre code.
et on plus l'astuce marche
merci

[Invité]

Super ...
Désolé d'afficher mon mécontentement, mais cet effet est souvent travaillé par des personnes ayant cherché des codes et pris la peine de rendre tout ça original, et maintenant on donne les tutoriels avec un code à copier/coller vite fait à mettre. Après c'est décourageant pour certaines personnes de faire ça ...

ben oui Basile mais le copier coller est tellement plus rapide que de chercher soi même
Alors tu vois la prochaine fois que tu as une nouveautés sur ton forum ...
Mets les codes a la disposition du staff ca ira plus plus vite

Bref je suis du même avis que toi

[Invité]

cet effet est souvent travaillé par des personnes ayant cherché des codes et pris la peine de rendre tout ça original, et maintenant on donne les tutoriels avec un code à copier/coller vite fait à mettre. Après c'est décourageant pour certaines personnes de faire ça ...

Absolument d'accord avec toi Basile.
Sans parler de ceux (et celles) qui ont compris comment le faire (sans le code source), qui ont réalisé un tuto très impersonnel pour aider sur je ne sais combien de sujets ici, bien avant le que le tuto soit publié, et qui découvre ce tuto "tout fait"...

le copier coller est tellement plus rapide que de chercher soi même

Il faut arrêter de prêcher le vrai pour faire le faux Olivier.

Bref, tout ça pour dire que je trouve le tuto très bien fait, et que ma foi, il faut encore et toujours continuer à se dépasser et trouver d'autres idées...

[Invité]

Le tuto est bien fait en effet

Et je suis d'accord il faut se dépasser mais ca devient dur

[Thedreamspectral]

Pour mes éventuels "clients" pour analyses qui se promèneraient par ici:
Je ne note absolument pas ce truc dans mes analyses, je m'en contre fiche. De 1, ce n'est plus original, de 2 je trouve le vieux système plus beau.

Voilà

[sansan173]

Bonjour

Merci beaucoup pour l'astuce.
Très bonnes explications.

:thanks:

[Threax]

Bonjour,

Il faudrait arrêter l'amalgame entre faire un copier/coller, et réaliser le code depuis 0.
J'ai réalisé ce tutoriel sans la moindre base, je n'ai pas besoin de faire un copier/coller.

Après, vous pouvez penser (et ça peut se justifier) que c'est un peu facile de n'avoir qu'à faire un copier/coller d'un tuto pour obtenir un effet que vous avez obtenu après des heures de travail.

Mais vous devez savoir, si vous parcourez régulièrement ce forum, que la question sur "comment réaliser ça" revient plus que souvent, et malheureusement mis à part quelques membres, personne ne leur répond.
Pour nous (le staff) c'est plus rapide de donner le lien d'un tuto que de devoir réexpliquer à chaque fois.

Si vous avez encore des remarques, contestations, protestations et autres mots en -ion, mes MP vous sont ouverts.

[Invité]

Merci pour le tuto, le rendu est très sympa

[Miettes]

Tout comme Thedreamspectral, je trouve la "vieille" version bien plus agréable à l'oeil là c'est trop imposant à mon gout ^^

Enfin, merci pour ce tuto qui, je suis sure, sera très utile à d'autres ^^ (même si j'avoue trouver cela dommage de balancer un code sans l'expliquer... Du coup, pour les "non-initiés" impossible d'adapter le code à d'autres choses... Mais je sais qu'un tuto de ce type est long à faire )

[K@K]

Bonsoir,
j'ai un petit problème en lieux et place des angle arrondis j'ai des angles droit

Et merci pour se tuto

k@k...

[Basil Hawkins]

C'est normal, vous utilisez IE

[K@K]

C'est normal, vous utilisez IE

Ok merci , dommage

[secouss]

Je veux faire remarquer que bon nombre de codes marches aussi sous invision (chat box ...) Faites le test, si sa marcha pas tant pis et si il y a quelques problème demandez sur le forum !!

Voila merci pour ce tuto.

[Invité]

Je veux faire remarquer que bon nombre de codes marches aussi sous invision (chat box ...) Faites le test, si sa marcha pas tant pis et si il y a quelques problème demandez sur le forum !!

Voila merci pour ce tuto.

bonsoir
et merci je ne comprend rien mais c'est pas grave

[.Maiko]

Super ...
Désolé d'afficher mon mécontentement, mais cet effet est souvent travaillé par des personnes ayant cherché des codes et pris la peine de rendre tout ça original, et maintenant on donne les tutoriels avec un code à copier/coller vite fait à mettre. Après c'est décourageant pour certaines personnes de faire ça ...

Je suis entièrement d'accord avec Basil Hawkins.
Pensez au personne qui on travailler pour le code & qui ne voudrais pas le voir sur tous les forums...
Enfin, je connais une manière plus simple de le faire ce code & qui ne s'applique pas forcement sur tous les catégories.

Sinon c'est un super tuto =)

[Numbuh3]

Bonjour Zen ;


:thanks:

[Kasdead]

Très bon tuto, je suis contente de le trouver ailleurs qu'au milieu de plusieurs milliers d'autres sujets tous aussi paumés les uns que les autres : la plupart du temps, le titre n'est pas spécialement très explicite, ce qui rend plus difficile les recherches.
Merci encore =D

[Sallie]

Très beau tutoriel. Il suffit après de le personnalisé pour qu'il n'y ai plus de problème de plagiat.