AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Guide du template "index-box" (catégories) pour phpBB2

    Partagez
    avatar
    Asmareth
    FémininAge : 29Messages : 123

    le Jeu 22 Aoû 2013 - 12:23

    Rappel du premier message :



    Bonjour,

    Ce guide est sur la version de forum PhpBB2.

    Je me permets de vous proposer un petit mode d’emploi du template index-box, tel que j’aurais bien aimé en trouver un sur internet lorsque j’ai commencé à travailler à la personnalisation de mon template.

    Ce travail ne prétend pas être exhaustif et répondre à tout (car il y a encore des choses qui m’échappent). A ce titre, toutes les contributions pour l’améliorer seront grandement appréciées :). Il a pour objet de mieux aider à comprendre le fonctionnement du template, et donc à mieux comprendre les tutoriels de modification du template qui peuvent vous être proposés (pour éviter les copier coller bêtes et méchants).

    Nous allons voir d’une part les différents éléments structurants de ce template, qui organisent les éléments sur la page. Et d’autre part, on s’intéressera aux différentes variables qu’il permet d’afficher.

    Un p’tit merci suffit à faire apparaître la suite :).

    Voici en premier lieu le template index-box de base de forumactif :
    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"> {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">&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}>
     <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>
     <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>
     </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 -->

    1.  La structure du template

    Contrairement à ce que l’on pourrait croire, les indications fournies entre crochets "<  !--TEXTE --  >" ne sont pas de simples commentaires, mais contiennent tous les éléments de structuration des pages de votre forum.


    La toute première table du template, ci-dessous, correspond à la ligne au-dessus de votre première catégorie qui comporte le titre de votre forum et « voir les messages sans réponse » (quand vous n’êtes pas connecté) et aux trois lignes au-dessus de votre première catégorie (quand vous êtes connectés).

    Ceci:
    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>
    Fait donc apparaître cela:


    D'ailleurs, ce tableau comporte deux "commentaires" de type "switch_user_logged_in".
    "switch_user_logged_in" : Les éléments contenus entre sa balise BEGIN et sa balise END n’apparaissent qu’à la connexion du membre au forum. Ils sont donc invisibles aux simples invités.

    A la suite de ce premier tableau, toute l’organisation de la page sera régie par les commentaires.

    " catrow" :  Il s’agit du bloc contenant l’ensemble des catégories, forums et sous-forums. Il débute visuellement sur votre page sous le tableau ci-dessus et termine au-dessus de la ligne « marquer tous les forums comme lus ».

    "tablehead": Il s’agit de l’en-tête du tableau dans le design de base. Si dans « structure et hiérarchie » vous avez choisi le mode « conserver les catégories sur l’index », cela correspond alors à la première ligne, qui contient « forum, sujets, messages, derniers messages », ci-dessous en gris.

    Si vous avez choisi l’option « séparer les catégories sur l’index », alors cette ligne affichera directement le titre de la catégorie au lieu du mot « forum », comme ci-dessous.


    Lorsque vous souhaiterez personnaliser votre template, notamment pour ajouter un en-tête à vos catégories, c’est entre ces balises qu’il faudra positionner votre div d’en-tête.


    "cathead": Cette ligne n’apparaît dans le tableau de base que lorsque vous avez fait le choix de « conserver les catégories sur l’index ». Il s’agit alors de la ligne bleue de ma première illustration, qui n’affiche que le titre de catégorie.
    Si vous avez choisi de « séparer les catégories sur l’index », alors les informations contenues entre ces balises ne seront pas affichées.

    "forumrow": Tout ce qui est affiché entre ces balises constitue les listes de forums et sous-forums qui seront affichés sur votre page d’accueil, en fonction du nombre de niveaux que vous avez choisi d’afficher dans « structure et hiérarchie ».

    La première colonne du tableau contient l’image indiquant s’il y a ou non un nouveau message :
    Code:
    <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>
    La deuxième colonne contient le titre du forum, le descriptif du forum, les modérateurs du forum, et les liens vers les sous-forums (on reviendra sur le détail des variables dans la partie suivante).
    Code:
    <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>

    A l’intérieur de ce bloc, ce sont les balises "switch_moderators_links" qui vont permettre l’affichage des modérateurs du forum. Si vous ne voulez plus les afficher, c’est donc ce bloc qui est à supprimer :
    Code:
    <!-- BEGIN switch_moderators_links -->
     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
     <!-- END switch_moderators_links -->


    Enfin, les trois colonnes suivantes affichent respectivement le nombre de sujets postés dans le forum, le nombre de messages postés dans le forum, et le dernier message posté dans le forum :
    Code:
    <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>
    "catfoot": N’ayant pas trouvé précisément à quoi correspond ce bloc, j’en déduis qu’en symétrie du bloc "cathead", son utilisation se fait en mode « conserver les catégories sur l’index ». Information qui reste à vérifier.

    "tablefoot": Il s’agit du pied du tableau pour chacune des catégories lorsqu’elles sont séparées. Pour personnaliser une catégorie en lui rajoutant un pied de page, c’est entre ces balises qu’il faudra placer la div.

    Si vous souhaitez créer un corps de catégorie qui dispose de son propre fond, il faudra impérativement ouvrir votre div de corps dans  "tablehead" et la fermer dans "tablefoot" afin qu’elle se positionne bien derrière les forums.


    Résumons-nous :

    Les éléments entre crochets "< !--TEXTE -- >", qui ressemblent à des commentaires, sont structurants pour l’organisation de la page et ne doivent donc pas être enlevés !

    Les éléments se positionnent comme suit sur votre page :
    Premier cas : vous avez choisi un affichage en mode « conserver les catégories sur l’index » :
    Spoiler:

    Deuxième cas : vous avez choisi un affichage en mode « séparer les catégories sur l’index » :
    Spoiler:


    2. La liste des variables du template index-box

    Maintenant que vous savez à peu près comment se positionnent les éléments sur la page, intéressons-nous aux variables qu’appelle le template index-box.

    {LAST_VISIT_DATE}:  « Dernière visite le [date/heure]» affiché au-dessus du forum, visible seulement lorsque le membre est connecté.

    {CURRENT_TIME}:« La date/heure actuelle est [date/heure]» affiché au-dessus du forum, visible seulement lorsque le membre est connecté.

    {L_INDEX}: Titre du forum global (du site internet, donc).

    {NAV_CAT_DESC}: La description du forum qui se situe en-dessous du titre du forum sous la bannière.

    {L_SEARCH_NEW}: « Voir les nouveaux messages depuis votre dernière visite », visible seulement lorsque le membre est connecté.

    {L_SEARCH_SELF}: « Voir ses messages », visible seulement lorsque le membre est connecté.

    {L_SEARCH_UNANSWERED}:« Voir les messages sans réponse ».

    {catrow.tablehead.L_FORUM}: Affiche le titre de la catégorie dans le bandeau "tablehead" lorsque les catégories sont séparées sur l’index (cf. première partie) ou bien affiche simplement « forum » lorsque les catégories sont conservées sur l’index.

    {L_TOPICS}: Affiche le terme « sujets » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

    {L_POSTS}: Affiche le terme « messages » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

    {L_LASTPOST}: Affiche le terme « derniers messages » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

    {catrow.cathead.CAT_TITLE}: Affiche le titre de catégorie lorsque les catégories sont conservées sur l’index, dans le bandeau "cathead" (cf. première partie).

    {catrow.forumrow.FORUM_NAME}: Titre du forum au sein de la catégorie.

    {catrow.forumrow.FORUM_DESC}: cette variable appelle le texte de description du forum, tel que rédigé dans la zone : « général », « catégories et forums ».

    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}: Affiche les modérateurs de chaque forum, en indiquant préalablement « modérateurs: ».

    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}: Affiche les liens vers les sous-forums.

    {catrow.forumrow.TOPICS}: Affiche le nombre de sujets postés dans le forum donné.

    {catrow.forumrow.POSTS}: Affiche le nombre de messages postés dans le forum donné.

    {catrow.forumrow.LAST_POST}: Affiche le dernier message posté dans le forum donné.

    Enfin, une autre variable est assez utile à connaître :
    < img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" / >: Cette variable appelle l’image de « nouveau message » ou « pas de nouveau message » pour chaque forum.

    Normalement, avec ces éléments, vous pourrez déjà commencer à vous orienter plus aisément dans votre template :).


    Dernière édition par Asmareth le Mar 13 Mai 2014 - 20:24, édité 2 fois
    Louanaka
    FémininAge : 18Messages : 24

    le Jeu 20 Mar 2014 - 21:04

    Merci! :3
    avatar
    tenderness
    FémininAge : 23Messages : 54

    le Ven 21 Mar 2014 - 1:27

    Merci !
    avatar
    CandyNeko
    MasculinAge : 23Messages : 7

    le Dim 23 Mar 2014 - 18:01

    merci
    avatar
    Sophia
    FémininAge : 22Messages : 43

    le Jeu 27 Mar 2014 - 13:24

    Merci *w*
    avatar
    Philia
    FémininAge : 24Messages : 16

    le Dim 30 Mar 2014 - 13:42

    merci beaucoup Very Happy
    avatar
    Mélusine
    FémininAge : 34Messages : 6

    le Lun 31 Mar 2014 - 8:57

    Merci !
    avatar
    Taoro
    MasculinAge : 24Messages : 78

    le Lun 31 Mar 2014 - 10:34

    Merci  :love: 



    avatar
    Ryosaki
    MasculinAge : 24Messages : 109

    le Lun 31 Mar 2014 - 18:33

    MERCI



    avatar
    alex24d
    FémininAge : 29Messages : 94

    le Lun 31 Mar 2014 - 19:14

    merci
    Luinette
    FémininAge : 16Messages : 32

    le Mar 1 Avr 2014 - 16:51

    Merci !
    avatar
    arturb
    MasculinAge : 16Messages : 48

    le Mar 1 Avr 2014 - 21:09

    Merci :))
    avatar
    Slown
    FémininAge : 22Messages : 61

    le Mer 2 Avr 2014 - 15:29

    Merci ♥
    avatar
    Lutine
    FémininAge : 29Messages : 101

    le Jeu 3 Avr 2014 - 12:46

    merci!
    avatar
    Ryuu
    FémininAge : 23Messages : 61

    le Jeu 3 Avr 2014 - 14:23

    Merci



    avatar
    Eirlys
    FémininAge : 24Messages : 62

    le Lun 7 Avr 2014 - 16:11

    merci
    avatar
    Miss lili
    FémininAge : 26Messages : 49

    le Mar 8 Avr 2014 - 17:34

    merci sa va fortement m'aider
    avatar
    Nesis
    FémininAge : 20Messages : 63

    le Mer 9 Avr 2014 - 17:27

    Thanks :3



    arithmetics
    FémininAge : 23Messages : 5

    le Dim 13 Avr 2014 - 19:58

    Merci beaucoup, j'ai vachement de mal à me dépatouiller avec tout ces templates Very Happy
    avatar
    DreamCatcher
    FémininAge : 20Messages : 63

    le Lun 14 Avr 2014 - 8:37

    Merci
    avatar
    Angy Salvatore
    FémininAge : 21Messages : 28

    le Sam 19 Avr 2014 - 19:53

    Merci!
    avatar
    Joxtop
    FémininAge : 25Messages : 47

    le Lun 21 Avr 2014 - 3:19

    merci :)
    Valkoor
    MasculinAge : 20Messages : 34

    le Mer 23 Avr 2014 - 5:52

    Super ,merci!
    avatar
    darkhero246
    MasculinAge : 24Messages : 177

    le Mer 23 Avr 2014 - 18:07

    merci :)
    avatar
    ass kicker
    FémininAge : 22Messages : 76

    le Ven 25 Avr 2014 - 22:37

    Tout ce dont j'avais besoin, merci beaucoup



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©endlesslove
    avatar
    l'intruse
    FémininAge : 22Messages : 39

    le Mar 29 Avr 2014 - 20:56

    Merci! *.* c'est exactement ce dont j'avais besoin!
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 17:40