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 profile_view_body

    Partagez
    avatar
    Sélène
    FémininAge : 20Messages : 321

    le Sam 31 Déc 2016 - 0:37

    Le template profile_view_body

    Ce guide du template profile_view_body s'adresse pour les forums PhpBB2. Il vous permettra de modifier la page "voir le profil" . Je n'ai pas la prétention de vous présenter un résultat final mais juste les moyens pour y accéder.

    Ce template est méconnu de la plupart des personnes et pour cause, il se trouve dans la catégorie "Profil" et non pas dans "Général" comme l'index-box ou encore le viewtopic-body. Pourtant il est très simple à manipuler, en effet les composants de celui-ci sont très explicites.

    Avant de modifier ce template, il est nécessaire d'aller dans :
    PA -> Utilisateurs et groupes -> Profils -> Options Générales -> Activer le profil avancé -> Non



    La structure du template


    La page "voir le profil" est organisée comme un tableau avec 2 colonnes et 4 cellules :

    Ici tu trouveras l'avatar, le rang, le bouton online et les amis si cette fonction est activée sur ton forum.Ici sont regroupés deux "blocs" d'informations : les statistiques du membre : dernière visite, nombre de messages/sujets ... Puis dans un deuxième temps il y a toutes les informations renseignées par le membre comme son sexe, sa date de naissance ...
    Cette dernière cellule regroupe tous les champs de contact comme profil, mp, email, www ... Il y a également la partie "commentaire" qui est seulement visible par les admins et les modos.
    Dernière partie : c'est la feuille de personnage

    Ces différents éléments sont contenus dans la table forumline des lignes 7 à 142. Le bout de code précédent (l.1 à l.6) correspond à un raccourci de navigation : depuis cette page-ci vous pouvez accéder à l'index.


    A quoi ça sert de savoir tout ça ?

    Le template est divisé exactement de cette manière, le tableau commence en renseignant les noms des cellules. Puis,on peut alors distinguer 4 parties qui correspondent aux 4 cellules présentes : le template débute par la cellule en haut à gauche suivie de la cellule de droite. On continue ensuite avec la cellule des champs de contact et la feuille de personnage se trouve à la fin du template. Facile non ?

    L.8 à L.14 correspondent aux noms des colonnes et du tableau.
    L.15 à L.45 permettent de modifier la première cellule.
    L.46 à L.69 correspondent aux éléments présents dans la deuxième cellule.
    L.70 à L.81 ce sont les lignes de codes pour modifier les champs de contact suivi des commentaires des lignes 82 à 100.
    L.101 à L.141 concernent la feuille de personnage.


    Les variables : A quoi servent-elles ?



    L.8 à L.14


    {L_Index} = Index du forum
    {L_VIEWING_PROFILE} = Titre du tableau "voir le profil : nom du membre"
    {L_USER_PRESENCE} = Nom de la colonne de gauche "Présence sur le forum"
    {L_ABOUT_USER} = Intitulé de la colonne de droite "Tout à propos de nom du membre"
    Si vous désirez modifier ces titres, il faudra donc supprimer ces variables et écrire vos textes directement dans le template.


    L.15 à L.45


    {L_AVATAR_IMG} = Champ "avatar :"
    {AVATAR_IMG} = Avatar
    {L_RANK} = Intitulé du champ rang
    {POSTER_RANK} = Le rang qu'il soit sous forme de texte ou d'image s'affichera grâce à cette variable.
    {L_STATUT} = Champ "statut :"
    {USER_ONLINE} = Correspond au texte "en ligne" ou "hors-ligne" selon votre situation.
    {L_FRIENDS_AND_FOES} = Champ "amis"
    {FRIENDSFOES} = Liste des amis
    {L_ADMINISTRATE_USER} = Champ "Administrer l'utilisateur"
    {ADMINISTRATE_USER}{BAN_USER} = Lien permettant d'accéder au profil de l'utilisateur depuis le panneau d'administration et éventuellement de pouvoir en modifier certaines informations voire de bannir le membre.
    Pour un rendu plus esthétique, il va sans dire que les intitulés de ces champs sont inutiles. Vous pouvez donc les supprimer sans encombre.


    L.46 à L.69


    {L_LAST_VISITED} = Champ "dernière visite"
    {LAST_VISIT_TIME} = Variable donnant la date de la dernière visite
    {L_PRIVATE_MSG} = Champ "messages privés"
    {PRIVATE_MSG} = Variable informant sur le nombre de MP reçus par le membre
    {profile_field.LABEL} = Regroupe l'ensemble des champs du profil (messages, date de naissance ...)
    {profile_field.CONTENT} = Contenu des champs du profil (ex : 27/05/1991)
    [{POST_PERCENT_STATS} / {POST_DAY_STATS}] = Pourcentages du nombre de messages postés par jour
    {L_SEARCH_USER_POSTS} = Champ "Trouver tous les sujets ouverts par le membre"
    {L_TOPICS} = Permet d'accéder aux sujets du membre
    {L_POSTS} = Les messages postés par le membre

    L.70 à L.81


    {L_CONTACT} [Invité] = Nom de la troisième cellule "Contacter le membre" (les crochets sont pour empêcher le bon fonctionnement de la variable dans ce tuto ! )
    {contact_field.LABEL} = Champs de contact
    {contact_field.CONTENT} = Contenu qui correspond à vos images mp,www, email ...

    L.83 à L.100


    {L_COMMENTS} = Champ "Commentaire"
    {L_MODS_AND_ADMINS} = Indique que ce champ est réservé aux modérateurs et aux admins : il n'est visible et modifiable que par eux.
    {ADMIN_USER_COMMENT} = Cette variable correspond à la zone de commentaire.

    L.101 à L.141


    {L_VIEWING_RPG} = Titre de cette dernière partie "voir la feuille de personnage"
    {RPG_IMAGE} = Correspond à l'image que l'on peut lier dans la feuille de personnage
    {switch_rpg.rpg_fields.F_NAME} = Champs de la feuille de personnage en général
    {switch_rpg.rpg_fields.F_VALUE_NEW} = Contenu de la feuille de personnage
    {U_ADMIN_RPG} = Lien administratif pour modifier le contenu de la feuille de personnage

    Analysons un template modifié


    J'ai récemment modifié ce template pour une commande dont vous pouvez voir l'aperçu ci-dessous, en sachant qu'en plus au survol de l'avatar la feuille de personnage apparaît.


    On va y aller morceau par morceau !

    Code:
    <div id="PFILbody">  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
    D'une manière générale j'ai préféré enlever les tableaux pour travailler seulement avec des div, toutefois on peut garder la table forumline comme point de repère, surtout si vous ne souhaitez pas encadrer votre profil comme je l'ai fait (ce fameux fond blanc est dût à #PFILbody).


    Code:
    <div class="PFIL"><div class="namePFIL">{USERNAME}</div><div class="namefield"></div><div style="text-align:center;text-transform:uppercase;text-shadow:1px 1px 1px grey;color:black;margin-top:-80px;">Hey look my beautiful profil</div>
          </div><br/><span class="onlinetext"> Je suis {USER_ONLINE}</span><br/>
    <div id="vavaPFIL"><div class="vavaPFIL"><div id="adminPFIL"><div class="adminPFIL">
    <!-- BEGIN switch_rpg -->
      <div style="float:left;margin:3px;overflow:auto;width:195px;"><!-- BEGIN rpg_fields -->
     <span class="gen"><span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span>  {switch_rpg.rpg_fields.F_NAME} : </span>{switch_rpg.rpg_fields.F_VALUE_NEW} <br/>
        <!-- END rpg_fields -->
      </div>
    </div></div>{AVATAR_IMG}</div></div>
     
     <!-- END switch_rpg -->
    Travaillez toujours de haut en bas : le premier élément visible sur ma page est le premier codé. En l'occurrence ici j'ai remanié l'entête du profil en remplaçant la variable {L_VIEWING_PROFILE} par un simple Invité. Dans un deuxième temps j'ai codé l'avatar et la feuille de personnage.


    Code:
    <div class="infoPFIL"> <div style="width:550px;height:140px;overflow:auto;"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div>  <!-- END profile_field -->
          </div></div>
        <div class="abtPFIL"><div class="abTD">{POSTER_RANK}</div><div id="ktactPFIL"><!-- BEGIN contact_field --><div class="ktactPFIL">{contact_field.CONTENT}</div><!-- END contact_field --></div></div>
    Le rang et les champs de contact sont réunis dans le même bloc. Ils sont cependant encadrés par 2 div différentes afin de pouvoir en gérer le positionnement à l'aide des float.


    Code:
    <div class="boxPFIL"><div class="statsPFIL"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_SEARCH_USER_POSTS}</a></div><div class="subPFIL"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_TOPICS}</a></div><div id="msgPFIL"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div><br/>
        </div> </table></div>
    La fin de la page se termine par les boutons statistiques, on les retrouve donc à la fin du template. A nouveau, j'ai enlevé les champs pour que le résultat soit plus agréable à l'oeil. Chacun des liens sont contenus dans une division différente pour en gérer le positionnement et l'apparence de manière individuelle. Cependant une division gère le positionnement général c'est la .boxPFIL.


    Enfin à la suite de ce morceau de code se trouvera le javascript dont on n'en a guère l'utilité.

    Félicitations vous pouvez désormais vous lancer dans la personnalisation de ce template ♥

    Hum je ne suis pas convaincue de l'utilité de mon guide, j'ai l'impression de répéter plusieurs fois la même chose ou d'être trop vague x)
    Donc n'hésitez pas à me dire si ça ne va pas ^^ c'est la première fois que j'écris un tuto et ce n'est pas si facile que ça :panic: (ou alors je n'ai définitivement pas la fibre x) )






    Thanks père nono ou mère nono anonyme
    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Ven 27 Jan 2017 - 19:13

    Coucou Sélène !

    Merci pour ton tuto (et félicitations puisque c'est le premier !)
    Tu l'auras remarqué, le forum tourne un peu au ralenti ces temps ci mais promis ton tuto sera regardé plus en détail :)

    Un guide comme ça c'est toujours utile ! Et puis ça peut inciter les gens qui ont un peu peur à mettre le nez dedans Very Happy

    Je n'ai lu que très rapidement (en diagonale en fait), mais je te conseille d'insister encore plus sur le côté "c'est le template du profil simple".
    Attention, à un moment tu as un { USERNAME } qui est remplacé par le pseudo, car dans un message { USERNAME } (sans les espaces) est l'username de la personne qui lit. Je te conseille de rajouter des espaces pour empêcher le remplacement ^^

    Un gros merci pour ton guide, ce genre de tuto est souvent très apprécié ♥︎



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    alsayed
    MasculinAge : 45Messages : 75

    le Jeu 15 Juin 2017 - 11:16

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Déc 2018 - 11:20