Introduction

Vous avez envie de personnaliser votre forum à fond, au détail près ? Parmi les modifications qui vous intéressent, vous voudriez remplacer le profil classique :

Citation :

Age: 17
Date d'inscription: xx/xx/xxxx
Messages: xxx

Par une phrase de ce genre ?

Citation :

J'ai 17 ans, j'ai écrit xxx messages et je me suis inscrit le xx/xx/xxxx

Bref, vous voudriez faire ceci ?
C'est ce que je vais tâcher de vous expliquer dans le tutoriel qui va suivre.

Première étape : réglages dans le panneau d'administration

Dans votre Panneau d'administration, allez sous l'onglet Utilisateurs et groupes, dans le menu Utilisateurs » Profils, vous arrivez alors à la liste des différents champs de profils. Vous pouvez en ajouter, en supprimer, etc. N'oubliez pas non plus l'encadré en rouge ci-dessus : les champs de profil ne doivent pas être des images ni des zones de texte.

• Modifiez ou créez vos champs :
  ► Réglez l'affichage, cochez la case "Messages" si vous voulez voir le champ dans les messages, sous l'avatar.
  ► Modifiez/spécifiez le nom du champ par le texte voulu (par exemple "J'ai " à la place de Âge ou bien ", je me suis inscrit " à la place de Date d'inscription). Attention à prévoir les espaces à la fin d'un titre de champ sinon il sera collé à sa valeur (dans le genre "je suis là depuis lexx/xx/xxxx").
  ► Dans le champ "description", mettez le nom d'origine de votre champ. Faites de même d'ailleurs pour tous les autres champs modifiables existant déjà (c'est à dire Sexe, Date de naissance, Localisation, Emploi/loisir, Humeur, Commentaires).
  ► En ce qui concerne le séparateur, choisissez Aucun dans la liste.
  ► Les autres options sont à votre discrétion.
  
• Organisez les champs dans l'ordre dans lesquels vous souhaitez les voir s'afficher.

Attention à l'ordre, sachant qu'un champ est de cette forme : [nom du champ] [valeur], vous devez vous arranger pour que la façon dont ils se suivent forme une phrase cohérente. Par exemple si vous comptez écrire "Bonjour, j'ai écrit [nombre de messages] messages depuis que je me suis inscrit, le [date d'inscription]", le champ du nombre de messages doit avoir pour nom "Bonjour, j'ai écrit " et le champ de la date d'inscription doit s'intituler "messages depuis que je me suis inscrit, le ". De plus, le champ du nombre de messages doit être placé avant (au-dessus) celui de la date d'inscription, sinon ça affichera "messages depuis que je me suis inscrit, le xx/xx/xxxx Bonjour, j'ai écrit xxxx", c'est pas terrible.

Maintenant, les profils de vos membres ne doivent plus ressembler à grand chose, mais ça va s'arranger !

La structure : modification des templates

Dans votre panneau d'administration, allez sous l'onglet Affichage, dans le menu Templates » Général puis dans la liste qui s'affiche cliquez sur le template viewtopic_body.

Les champs de profil sont gérés par cette partie :

Code:

<!-- BEGIN profile_field -->
   {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

Pour se simplifier un peu la tâche, on va rajouter une classe à ces champs de profil, ça nous servira dans la partie CSS. Encadrez la suite de variables entre crochets par un <span> (et bien sûr un </span>) associé à une classe, comme ceci :

Code:

<!-- BEGIN profile_field -->
   <span class="ChampsProfil">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
<!-- END profile_field -->

Et puis c'est tout, on verra les autres possibilités de personnalisation plus tard, pour le moment on s'occupe des bases.

L'apparence : élaboration des styles CSS

Si vous avez tenté de voir ce que donnaient vos modifications, vous allez avoir quelque chose de ce genre-là :
Problème 1 : Même si vous avez mis "séparateur : aucun", il risque d'y avoir un saut de ligne malgré tout, surtout si les titres de champ sont très longs.
Problème 2 : Il y a ces deux points ":" qui vous cassent un peu la baraque.

Plutôt que de vous donner la solution toute faite, je vais vous expliquer pourquoi ça fait ça, et comment on procède pour contourner la difficulté. Vous êtes ici pour apprendre après tout, pas pour faire un bête copier-coller sans réfléchir !

Regardons un peu le code source de ForumActif quand il affiche un champ de profil. Ça ressemble à ça :

Code:

<span class="ChampsProfil"><span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ</span>: </span> Valeur du champ </span>

Avec un petit moment de réflexion, nous réalisons donc que dans le template, cette partie :

Code:

<!-- BEGIN profile_field -->
   <span class="ChampsProfil">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
<!-- END profile_field -->

Se transforme en ceci dans le code final :

Code:

<span class="ChampsProfil"><span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ 1</span>: </span> Valeur du champ 1</span>
<span class="ChampsProfil"><span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ 2</span>: </span> Valeur du champ 2</span>
<span class="ChampsProfil"><span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ 3</span>: </span> Valeur du champ 3</span>
<span class="ChampsProfil"><span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ 4</span>: </span> Valeur du champ 4</span>
<span class="ChampsProfil"><span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ 5</span>: </span> Valeur du champ 5</span>

Donc la ligne entre les deux commentaires BEGIN et END se répète autant de fois qu'il y a de champs de profil ! C'est ce qu'on appelle une boucle.

Dans cette boucle, nous avions trois codes entre crochets, ce sont des variables de templates, qui contiennent une valeur, laquelle peut être du code HTML :

• {postrow.displayed.profile_field.LABEL} affiche

  Code:

  <span style="white-space:nowrap;"><span style="color:#000000;">Titre du champ</span>: </span>

• {postrow.displayed.profile_field.CONTENT} affiche la valeur du champ
  
• {postrow.displayed.profile_field.SEPARATOR} affiche le séparateur

Ce qui nous pose problème ici, c'est la première variable de template, on se rend compte qu'il y a du CSS dedans et on ne peut pas le modifier vu que tout ce qu'on a, nous, c'est {postrow.displayed.profile_field.LABEL} !

Revenons à nos deux problèmes.
• Pourquoi y a-t-il un saut de ligne ? C'est à cause de ce white-space:nowrap;. Cette propriété CSS force le titre du champ à rester sur une seule ligne, quitte à sauter une ligne pour prendre toute la largeur disponible ! Il faut donc qu'on trouve le moyen de la supprimer.
• Comment faire pour retirer les deux points ? Là, on a bien vu qu'on ne peut pas les retirer simplement vu qu'ils sont cachés à l'intérieur de la variable de template.

Nous n'avons donc pour nous que le CSS. Que peut-on faire avec du CSS ? On peut modifier l'apparence de ce qui s'affiche. Nous avons de la chance dans notre malheur, parce qu'il y a des span un peu partout dans ce code et qu'en étant astucieux on peut redéfinir leur apparence.

Si on fait abstraction du titre du champ et du span qui l'entoure (juste au passage, ce span donne au titre du champ la couleur que vous définissez dans le panneau d'admin), on a ceci :

Code:

<span class="ChampsProfil"><span style="white-space:nowrap;">[titre de mon champ]: </span></span>

Débrousaillons un peu avec des sauts de ligne et indentations :

Code:

<span class="ChampsProfil">
   <span style="white-space:nowrap;">
      [titre de mon champ]:
   </span>
</span>

Maintenant que c'est un peu plus lisible, vous constatez vous-même que nous avons un span à l'intérieur du span de classe .ChampsProfil. Bah voilà, c'est parti : On va redéfinir l'apparence des "span à l'intérieur de l'élément de classe .ChampsProfil".

Code:

.ChampsProfil > span {
   white-space:normal !important;
   font-size:0px;
}

► Le !important permet de mettre ce code en priorité, sachant qu'à l'affichage le navigateur se retrouve à devoir choisir entre white-space:normal; et white-space:nowrap;, on lui dit de prendre le plus important.
► Et on a mis la taille du texte à 0, il a donc disparu, en emportant avec lui ces deux points qui nous cassaient les pieds !

Mais du coup, essayez : on ne voit plus le titre des champs @_@ Comment faire pour qu'ils s'affichent ? Vous vous souvenez qu'ils étaient dans un span qui définissait la couleur du texte ? Et bien, on va s'arranger pour que ce span là s'affiche : on lui met une taille de police visible, tout simplement.

Code:

.ChampsProfil > span > span {
   font-size:10px;
}

Et le tour est joué !

Reste le cas des champs de profil de type "choix multiple", qui s'afficheront (côté code) de cette façon :

Code:

<ul class="profile_field_list">
   <li>choix 1</li>
   <li>choix 2</li>
</ul>

Ce qui donnera des sauts de ligne un peu disgracieux.

Vous devez vous arranger pour que :
- La liste et les éléments de liste soient des éléments inline.
- Les items (li) soient séparés par des virgules.
- Qu'il n'y ait pas de virgule pour le dernier item.

Ce qui nous donne les bidouillages CSS suivants :

Code:

/* On transforme la liste et les items de liste en éléments inline */
ul.profile_field_list { display:inline; }
ul.profile_field_list > li {display:inline;}

/* on rajoute une virgule après chaque item */
ul.profile_field_list > li:after {
 content:", ";
}

/* on ne rajoute rien du tout après le dernier item */
ul.profile_field_list > li:last-child:after {
  content:"";
}

Edition de profil et page de profil

Malheureusement, si le profil s'affiche de la façon que vous souhaitiez, il reste encore deux problèmes non négligeables !
- Dans le profil du membre, vous voyez désormais des trucs du genre "messages depuis que je me suis inscrit, le " à la place de Date d'inscription.
- Et c'est la même chose dans la page d'édition du profil (ou d'inscription).

Dans le profil des membres, vous pouvez "corriger" via le CSS par une méthode un peu fourbasse mais qui m'a l'air de fonctionner.
• Tout d'abord, repérez l'identifiant des champs de profil spéciaux (passez votre souris au dessus de l'icone à côté de votre champ de profil, l'adresse s'affiche normalement en bas de votre navigateur et finit toujours par id=x, avec x l'identifiant de votre champ de profil).
• Puis, dans votre CSS, ajoutez ceci pour chaque champ à renommer (en remplaçant x par le bon identifiant, bien sûr) :

Code:

#field_id-x > dt > span { font-size:0px; }
#field_id-x > dt > span:after {
 content:"Titre du champ"; /* nom de remplacement du champ */
 font-size:11px; /* taille du texte */
}

Pour la page d'édition du profil, c'est plus compliqué. Je vous ai dit plus haut dans ce tutoriel de penser à mettre le nom d'origine du champ dans sa description, on va s'en servir.

Rendez-vous dans Templates » Profil et éditez cette fois le template profile_add_body.

Cherchez cette variable de template :

Code:

{switch_informations_menu.switch_profile_fields.field.NAME}

Et remplacez-la par :

Code:

{switch_informations_menu.switch_profile_fields.field.DESCRIPTION}

Et un peu plus bas, trouvez et supprimez cette ligne :

Code:

<span class="gensmall">{switch_informations_menu.switch_profile_fields.field.DESCRIPTION}</span>

Enregistrez vos modifications et publiez votre template : le titre a été remplacé par la description du champ !

Pour aller plus loin

Admettons-le, c'est un peu moche pour le moment ce que je vous ai fait. On pourrait faire ce genre de truc plutôt :
Allez, je vais vous expliquer comment faire ça.

Dans le template viewtopic_body, le profil est géré par cette partie (valeur par défaut) :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
      <span class="postdetails poster-profile">
      {postrow.displayed.POSTER_RANK}<br />
      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
      <!-- BEGIN profile_field -->
      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
      <!-- END profile_field -->
      {postrow.displayed.POSTER_RPG}
   </span><br />
   <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>

Pour faire les choses proprement, on va commencer par débrousailler un peu en sortant l'ancre collée au pseudo pour éviter de la perdre en bidouillant. Donc vous modifiez cette ligne :

Code:

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

De cette façon :

Code:

<a name="{postrow.displayed.U_POST_ID}"></a>
<span class="name"><strong>{postrow.displayed.POSTER_NAME}</strong></span>

Ensuite, on pourrait mettre le profil personnalisé dans un joli bloc, mais le problème c'est qu'une des règles clefs en HTML/CSS, c'est jamais d'élément block dans un élément inline. En d'autres termes, jamais de <div> dans un <span>, entre autres choses. Ne me faites pas ces yeux de merlan frit, regardez le code, que voyez-vous ? Absolument, un <span class="postdetails poster-profile">. Et un peu plus bas, le </span> qui va avec. On peut donc en conclure que tout le profil est un élément inline, impossible d'y mettre un bloc.

Qu'à cela n'y tienne, on remplace notre span par un div, et donc cette partie du code :

Code:

<span class="postdetails poster-profile">
      {postrow.displayed.POSTER_RANK}<br />
      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
      <!-- BEGIN profile_field -->
      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
      <!-- END profile_field -->
      {postrow.displayed.POSTER_RPG}
   </span><br />

Devient :

Code:

<div class="postdetails poster-profile">
      {postrow.displayed.POSTER_RANK}<br />
      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
      <!-- BEGIN profile_field -->
      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
      <!-- END profile_field -->
      {postrow.displayed.POSTER_RPG}
   </div><br />

Maintenant, on a le droit de mettre le profil dans un bloc, et n'oublions pas la fameuse classe .ChampsProfil du début de ce tutoriel :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <a name="{postrow.displayed.U_POST_ID}"></a>
   <span class="name"><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
      <div class="postdetails poster-profile">
      {postrow.displayed.POSTER_RANK}<br />
      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
      <div class="BlocProfil">
         <!-- BEGIN profile_field -->
         <span class="ChampsProfil">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
         <!-- END profile_field -->
      </div>
      {postrow.displayed.POSTER_RPG}
   </div><br />
   <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>

Votre profil est désormais inclus dans un div de classe .BlocProfil. On va lui attribuer un style d'exemple pour voir ce que ça donne :

Code:

.BlocProfil {
    background: #FFFFFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px 0 #000000;
   -moz-box-shadow: 1px 1px 2px 0 #000000;
   -webkit-box-shadow: 1px 1px 2px 0 #000000;
    font-size: 11px;
    padding: 4px;
   text-align:justify;
}

Tout de suite ça a quand même plus de gueule, hein ?

Et si on allait encore plus loin dans la personnalisation, pour faire ce genre de trucs par exemple :
Ce n'est pas bien compliqué en fait ^^ Dans notre code de profil, le pseudo, c'est cette partie :

Code:

<span class="name"><strong>{postrow.displayed.POSTER_NAME}</strong></span>

Et le rang, c'est cette partie :

Code:

{postrow.displayed.POSTER_RANK}

Les deux ont un saut de ligne <br /> directement à la suite, supprimez ces sauts de ligne, ils ne serviront plus à rien.

Rajoutez le pseudo et le rang dans votre bloc de profil, juste après le <div class="BlocProfil">, et mettez-les un peu en forme, genre :

Code:

Je m'appelle <span class="name"><strong>{postrow.displayed.POSTER_NAME}</strong></span>, mon rang est {postrow.displayed.POSTER_RANK}. 

N'oubliez pas de rajouter un espace à la fin (sous la forme  ), sinon il sera collé aux champs de profil qui arrivent directement après.

Au final votre code sera celui-ci :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <a name="{postrow.displayed.U_POST_ID}"></a>
      <div class="postdetails poster-profile">
      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
      <div class="BlocProfil">
         Je m'appelle <span class="name"><strong>{postrow.displayed.POSTER_NAME}</strong></span>, mon rang est {postrow.displayed.POSTER_RANK}.
         <!-- BEGIN profile_field -->
         <span class="ChampsProfil">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
         <!-- END profile_field -->
      </div>
      {postrow.displayed.POSTER_RPG}
   </div><br />
   <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>

Et voilà, vous avez votre profil personnalisé de façon originale. Et je viens de passer plus de cinq heures de ma nuit à tester, rédiger, trouver des bugs, corriger les bugs, mettre ce tutoriel en forme. Je suis un escargot T_T *va s'écrouler dans un coin*

Bon courage à tous, et rendez-vous en section Aide CSS&HTML pour les problèmes éventuels ! N'hésitez pas à critiquer (constructivement) ce tutoriel et à me montrer ce que vous en avez fait sur vos forums, ça fait toujours plaisir.