Intégrer PhpBB dans une page

Vous avez un forum PhpBB et aimeriez l'intégrer au skin de votre site ? Mais vous n'y comprenez rien, le système de templates de PhpBB est une vraie usine à gaz ? (et c'est bien vrai !). Je vous ai donc concocté ce petit tutoriel qui se voudra le plus léger possible pour ne pas vous faire lire des tonnes et des tonnes. Je l'ai donc réalisé suite à l'intégration du forum dans le skin du site des Xtacullar, car j'ai eu du mal. Le thème utilisé est celui par défaut de PhpBB 3, Prosilver. C'est pas très intéressant à faire, je vous prévient !

Tout au long de ce tutoriel, j'utilise le thème du site des Xtacullar, donc la disposition des DIV dans le code XHTML et des CSS ne sera sûrement pas la même avec votre site.

Alors si vous êtes prêt, allons-y !

1. Étudions notre thème

Avant toute manipulation, prenons nos repères : nous nous devons de connaître l'organisation du code des différentes parties de notre site. Voici donc une image avec les différentes divisions (DIV) de notre site, pour le choix de celle qui accueillera notre PhpBB :

Étude des DIV

Vous pouvez voir ceci facilement en installant l'extension Firebug dans Mozilla Firefox, qui vous surlignera comme sur mon image les DIV survolées. Maintenant, demandez-vous dans quelle DIV allons-nous mettre le forum ? Dans la content bien évidemment ! Ce qui tombe bien, c'est que dans Prosilver, toutes les dimensions sont relatives. Donc à ce niveau là, pas besoin de s'inquiéter, le forum se redimensionnera automatiquement en fonction de la taille de la DIV qui le contient. Génial, non ?

2. Manipulations sur les templates

Bon, ça vous devez le savoir, pour appliquer une template envoyée sur votre serveur au forum, il faut rafraîchir la catégorie Templates dans votre panel d'administration de PhpBB, onglet Styles.

Okay, donc dans cette étape, nous nous attacherons à "entourer" Prosilver par notre thème du site. Ouvrez "overall_header.html" qui se trouve dans le répertoire template de votre thème, ainsi que "overall_footer.html", dans un éditeur de texte tel que Notepad++. Ce logiciel vous facilitera la tâche puisqu'il dispose de la coloration de code. Vous verrez ce que c'est en l'utilisant.

On va ensuite mixer le code HTML du Head de notre site original avec celui de Prosilver. Conservez toutes les lignes de code de Prosilver, mais par contre, ne copiez que celles qui sont utiles de votre site dans le fichier "overall_header.html". Donc c'est surtout les pour conserver la feuille de style CSS de votre site.

Ceci fait, encadrons les DIV du forum. C'est simple, regardez pour moi :


xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

[...] CODE DU HEAD

id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">





[...] CODE DU FORUM

Puis, ne reste plus qu'à fermer avec les balises de bas de page de notre site sur le "overall_footer.html" :