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 : 30Messages : 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
    avatar
    Desya
    MasculinAge : 28Messages : 10

    le Mar 17 Déc 2013 - 21:11

    Merci beaucoup!
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Mer 18 Déc 2013 - 19:07

    Merci



    avatar
    Bambi's logic
    FémininAge : 21Messages : 25

    le Dim 22 Déc 2013 - 12:16

    Merci !
    avatar
    Katerinata
    FémininAge : 23Messages : 22

    le Mar 24 Déc 2013 - 0:54

    merci
    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 694

    le Mar 24 Déc 2013 - 2:04

    merci j'espères que cela m'aidera ^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Kai Turindo
    MasculinAge : 17Messages : 80

    le Mar 24 Déc 2013 - 12:42

    Danke. °w°
    avatar
    Nightbird
    MasculinAge : 25Messages : 81

    le Mar 24 Déc 2013 - 22:33

    Merci
    avatar
    Nico Robin
    FémininAge : 28Messages : 45

    le Lun 30 Déc 2013 - 20:52

    Merci beaucoup ^^



    avatar
    Afterglow.winter
    FémininAge : 22Messages : 138

    le Ven 3 Jan 2014 - 15:41

    Merci :)



    How do you get up from an all time low?
    avatar
    Krolinger
    MasculinAge : 27Messages : 67

    le Jeu 9 Jan 2014 - 12:51

    Merci!



    avatar
    Shany
    FémininAge : 33Messages : 59

    le Ven 10 Jan 2014 - 11:47

    Merci
    avatar
    Zarwins
    FémininAge : 21Messages : 152

    le Ven 10 Jan 2014 - 14:07

    Merci !



    avatar
    Hana Evali
    FémininAge : 27Messages : 164

    le Dim 26 Jan 2014 - 2:09

    merci beaucoup !



    avatar
    Trenz
    MasculinAge : 15Messages : 44

    le Dim 26 Jan 2014 - 10:10

    Merci pour ce tuto <3
    avatar
    Amera
    FémininAge : 25Messages : 67

    le Dim 26 Jan 2014 - 18:25

    Merci beaucoup !



    avatar
    Anéa
    FémininAge : 28Messages : 157

    le Lun 27 Jan 2014 - 16:34


      Aaah merci, je butais sur un truc  cheers 



    avatar
    MlleNamiya
    FémininAge : 22Messages : 34

    le Mar 28 Jan 2014 - 21:04

    Merci !
    avatar
    Black Diamond
    FémininAge : 28Messages : 90

    le Mar 28 Jan 2014 - 22:09

    Un aperçu aurait pu être aussi bien avant de remercier pour voir les codes non ?
    Enfin c'est gentil de donner ton aide !

    Merci d'avance :3




    avatar
    Allysae
    FémininAge : 22Messages : 27

    le Mer 29 Jan 2014 - 20:38

    Merci :3



    avatar
    Yogurt01
    MasculinAge : 27Messages : 79

    le Mer 29 Jan 2014 - 20:48

    Merci du partage
    avatar
    Sinavlia
    FémininAge : 20Messages : 158

    le Dim 2 Fév 2014 - 3:45

    Merci beaucoup :)



    avatar
    Invité

    le Dim 2 Fév 2014 - 4:11

    Merchi :)
    avatar
    Sheppynette
    FémininAge : 28Messages : 63

    le Mar 4 Fév 2014 - 17:02

    Un grand merci pour ce tuto très utile!
    avatar
    Enidech
    MasculinAge : 26Messages : 39

    le Mar 4 Fév 2014 - 18:25

    Merci
    Nal Souclade
    MasculinAge : 18Messages : 163

    le Mer 5 Fév 2014 - 14:36

    Du templaaaate !! Merci beaucoup pour ce tuto !
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Oct 2017 - 15:21