BuddyPress France

A la demande générale du fan club, voici comment hacker le profil sans faire de mal, ni à buddypress, ni à Fairweb.

Méthode applicable aux versions 1.1 à 1.1.3 de BP. Au-delà, faudra lire la nouvelle doc des templates puis adapter.

Supposons que l’on  veuille masquer un champ du profil, sans pour autant le supprimer en admin. Juste ne pas le montrer. Le rendre invisible aux yeux des visiteurs quoi. Avec CSS, nous pouvons le faire facilement. à l’aide des 2 possibilités que sont display:none et visibility:hidden. Sachant que le premier est plus balaise que le second. Le display vire tout l’affichage environnant autour de lui. Le second ne vire que ce qui le concerne directement. Quoi qu’il en soit les deux jouent très bien à l’homme invisible.

Quand on crée des champs supplémentaires dans le profil, BP nous demande de leur attribuer un nom auquel il ajoute en arrière-plan de manière très basique field_1, field_2 etc. Ceci est ensuite répercuté dans l’affichage sous forme de classe attribuée à une ligne de tableau, qui permet le cas échéant de lui apporter du staïle, Coco. Soit en termes plus choisis, a CSS class called “field_##  nom-que_j’ai_donné-à-ce-champ” for a good design.

Remarquez au passage qu’il y a un espace blanc das l’intitulé. C’est juste pour que l’on comprenne que c’est pour nos yeux à nous. Parce qu’on le vaut bien, ma chère.  Mais pas du tout pour le navigateur ou pour la feuille de style. Leur interprétation s’arrête à l’espace, au simple “field_##”

Ça c’est fait.

C’est pas web 2.0 du tout, du tout, mais BP utilise un bête tableau à 2 colonnes pour construire une fiche profil.
Chaque information est contenue dans une ligne pour laquelle nous avons un champ “label” et un champ “data”.
Oui buddypress est anglophone !

Malheureusement, nous ne pouvons pas intervenir directement sur ces 2 cellules, puisqu’elles sont identiques du point de vue CSS, pour tout le tableau.

Label sous-entend titre du champ. Par exemple: “Couleur de vos Oreilles”. Appelation également utilisée par BP pour nommer la ligne complète.
Data sous-entend “ce que le visiteur voudra bien indiquer”.

Fort de tout ceci, BP va nous bricoler à toute vitesse une belle ligne de tableau en html. A savoir une ligne < tr > contenant deux cellules < td >
La ligne est identifiée par une classe nommée “field_## couleur-de-vos-Oreilles”
Les cellules étant toujours identiques dans le template du profil ont chacune une classe attribuée par défaut: “label” et “data”.

Pour masquer l’affichage de ce bloc d’information, il suffit donc d’indiquer en CSS le fait que la ligne “field….” contenant la cellule x et la cellule z ne doit pas être montrée.

Reste plus qu’à écrire un bout de code CSS pour parvenir à nos fins.

A l’aide du bloc-note ou de notepad++ ou de tout ce qui fait du texte sur un ordi, SAUF WORD, on crée un fichier intitulé “custom.css” que l’on placera dans le répertoire “css” qui se trouve dans le répertoire “_inc” qui est dans le répertoire ” bp-default”, lui-même dans le répertoire “themes” de “wp-content”. Ca va, vous suivez ?

Vous devez avoir ça à l’arrivée:

wp-content/themes/bp-default/_inc/css/custom.php

Vous y inscrivez le bout de code suivant:

tr.nom_du_champ td.label {
display:none;
}

tr.nom_du_champ td.data{
display:none;
}

C’est tout pour la méthode simple ! J’en ai une plus compliquée, mais le résultat est le même, donc j’en reste là.

Pour connaître le nom exact du champ, allez sur la page du profil où se trouve le champ que vous voulez masquer et affichez le code source de la page et repérez le nom attribué par buddy. Là faut savoir lire du html ou être pragmatique et utiliser un outil comme “web developer”…

Pour que “custom.css” fonctionne, il faut décommenter (retirer les 2 slashes en début de ligne) la ligne qui commande ce fichier.
C’est la dernière ligne du fichier “style.css” qui se trouve dans le dossier du thème “bp-default”.