Positionner les champs de profil n'importe où dans un sujet

Ce tutoriel nous permettra de placer le(s) champ(s) de profil de notre souhait où l'on veut. Cette méthode consiste à donner un attribut à chaque champ de profil pour pouvoir les différencier et les afficher distinctement à notre goût.

Pour commencer, rendez-vous dans le template viewtopic_body: pour ce tutoriel, on va cloner la partie dédiée aux champs de profil à deux autres endroits pour un total de 3 affichages de ces champs: à sa place d'origine, au-dessus de l'avatar et après droit du message.

Avant d'aller plus loin, il va falloir entourer la variable génératrice de chaque champ par une div à laquelle on va donner la class pfi_1. On va également entourer le contenu (et le séparateur) du champ par un span qui aura pour class pfi_cont.

Dans le template, trouver:

Code:

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

Remplacer par:

Code:

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

On va garder ce dernier code sous la main et le placer à nos deux autres endroits voulus (pour rappel: au-dessus de l'avatar et après message) en modifiant seulement la class pfi_1

Dans le template toujours, trouver:

Code:

{postrow.displayed.POSTER_AVATAR}

Placer juste avant:

Code:

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

Et pour le troisième endroit, trouver:

Code:

<div>{postrow.displayed.MESSAGE}</div>

Placer juste après:

Code:

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

Pour en finir avec les modifications de template: trouver, dans le template:

Code:

Placer juste après:

Code:

<script>
// on sélectionne le span du nom de chaque champ de profil
$('span.label span').each(function() {
$(this).contents().unwrap(); // on fait en sorte de retirer le span qui entoure le nom, que ce soit plus pratique par la suite    
});

// on sélectionne le nom de chaque champ de profil
$("span.label").each(function() {
  
var $content = $(this).text(); // on stocke le nom du champ de profil que le code traite actuellement
$(this).parent().attr('data-field', $content); // on insère ce nom dans l'attribut data-field du parent (qui est .pfi_1/2/3)
});
</script>

Maintenant, sauvegardons et publions le template.
Positionner les champs de profil n'importe où dans un sujet PqitY4Y

Ça y est, chaque champ de profil a son petit nom !

Pour continuer dans l'exemple, disons que je souhaite donner une couleur bleue au champ "Prénom" (que j'ai crée pour ce tuto) au-dessus de l'avatar seulement.
Pour sélectionner ce champ, il faudra spécifier son nom qui a été associé à l'attribut data-field.

Deux choses à savoir:
- Il y aura toujours un espace, deux points ( : ) et un second espace après chaque nom de champ;
- Si on veut ne garder qu'un seul champ (par ex.) au-dessus de l'avatar, il faudra appliquer un display: none; à .pfi_2 et un display: block; au champ voulu.

Ce qui, au final, donnera en CSS:

Code:

.pfi_2[data-field="Prénom : "] {
color: blue;
}

Et si on veut cacher tous les autres champs au-dessus de l'avatar à part le prénom, on aurait:

Code:

.pfi_2 {
display: none;
}

.pfi_2[data-field="Prénom : "] {
color: blue;
display: block;
}

Avec un peu d'imagination (et d'organisation dans les codes), on peut en faire ce qu'on veut.

Un exemple rapide:

Positionner les champs de profil n'importe où dans un sujet SiDiKlq

Merci de me créditer (Jei) quelque part sur le forum: footer, sujet dédié, PA ou autre; c'est un travail qui a pris plusieurs ~~heures~~ jours de mon temps libre.

phpbb2