AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

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

    Asmareth
    Asmareth
    FémininAge : 36Messages : 123

    Jeu 22 Aoû 2013 - 12:23



    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
    Tartine
    Tartine
    MasculinAge : 35Messages : 5

    Ven 23 Aoû 2013 - 7:04

    Merci
    Milkiniz
    Milkiniz
    FémininAge : 30Messages : 72

    Ven 23 Aoû 2013 - 11:02

    Merci !
    Mzelle Machin
    Mzelle Machin
    FémininMessages : 118

    Ven 23 Aoû 2013 - 19:53

    Merci :)
    Leïlan
    Leïlan
    FémininAge : 35Messages : 22

    Lun 26 Aoû 2013 - 2:35

    Merci :3
    Fleurine
    Fleurine
    FémininAge : 24Messages : 75

    Lun 26 Aoû 2013 - 11:46

    merci ! =]
    - NYLY -
    - NYLY -
    FémininAge : 32Messages : 10

    Mar 27 Aoû 2013 - 13:05

    Merci beaucoup pour cette aide ^^
    BROKENHEART.
    BROKENHEART.
    FémininAge : 31Messages : 6

    Mar 27 Aoû 2013 - 14:46

    merci
    Sokaro
    Sokaro
    FémininAge : 28Messages : 195

    Ven 30 Aoû 2013 - 17:59

    Merci (:



    guide du template - Guide du template "index-box" (catégories) pour phpBB2 540068Sokacadre2
    (Signature provisoire.)
    Shanilae
    Shanilae
    FémininAge : 30Messages : 78

    Sam 31 Aoû 2013 - 16:54

    Merci ! =)
    RadioEuphoria
    RadioEuphoria
    FémininAge : 27Messages : 14

    Dim 1 Sep 2013 - 0:32

    Merciiii~
    alexe-gawa
    alexe-gawa
    FémininAge : 29Messages : 8

    Dim 1 Sep 2013 - 3:43

    merci ! :3
    Hippopotame
    Hippopotame
    FémininAge : 110Messages : 32

    Dim 1 Sep 2013 - 10:51

    Merci beaucoup ! :)
    Everald
    Everald
    FémininAge : 24Messages : 17

    Dim 1 Sep 2013 - 17:50

    Merci fufufu ~
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Lun 2 Sep 2013 - 20:44

    merci
    Miss Pirate
    Miss Pirate
    FémininAge : 23Messages : 24

    Mar 3 Sep 2013 - 12:36

    Merci :)
    -Dr3ams-
    -Dr3ams-
    FémininAge : 31Messages : 29

    Mer 4 Sep 2013 - 15:06

    Merci !
    kitoune
    kitoune
    FémininAge : 39Messages : 23

    Jeu 5 Sep 2013 - 14:18

    Merci beaucoup c'est effectivement une grande aide pour ceux voulant apprendre comme il faut les template



    guide du template - Guide du template "index-box" (catégories) pour phpBB2 1309040335014312311522953
    Parking
    Parking
    FémininAge : 28Messages : 29

    Jeu 5 Sep 2013 - 20:54

    merci beaucoup ^^
    Kathee
    Kathee
    FémininAge : 30Messages : 680

    Ven 6 Sep 2013 - 0:09

    Merci !!!





    Forum dérivé ouat
    dans un univers steampunk :heart:
    troublemaker
    troublemaker
    FémininAge : 26Messages : 17

    Dim 8 Sep 2013 - 1:20

    Merci beaucoup \o/
    Elf-of-Nature
    Elf-of-Nature
    FémininAge : 29Messages : 156

    Dim 8 Sep 2013 - 15:49

    Oh ben ça c'est bien gentil !
    Un énorme merci à toi ! :)



    guide du template - Guide du template "index-box" (catégories) pour phpBB2 216988Renardssigna
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 8 Sep 2013 - 17:00

    Super ! Merci du partage Wink



    sign
    Geen
    Geen
    FémininAge : 24Messages : 33

    Dim 8 Sep 2013 - 17:31

    Merci ♥
    lora7
    lora7
    FémininAge : 33Messages : 20

    Dim 8 Sep 2013 - 21:45

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 23:43