Version PDF Version LaTeX
   
\maketitle \newpage \tableofcontents \newpage

Avant de commencer

Quelques informations importantes

Avant propos

Avant tout, vous devez savoir que le système de templates implémenté à TBF permet de simplifier fortement le problème de l'intégration de votre forum dans votre site web. Mais malgré cela, il y a quand même certaines étapes qui dépendent fortement de la structure de votre site web, c'est pourquoi, je ne parlerai que du cas de l'intégration de TBF au site freewemaster.fr, ce qui servira d'exemple mais que vous pourrez facilement adapter à votre site web.

Quelques remarques

Le forum reste ouvert à toutes les questions éventuelles auxquelles vous ne trouvez pas de réponse. Sachez aussi que la future version de TBF (2.1) passera au format UTF-8, cela fonctionnera mieux si votre site web l'est aussi. Le forum respecte les standards du W3C, c'est-à-dire qu'il passe la validation XHTML strict 1.1 et CSS 2.1, pour vous éviter pas mal de problème de codage je vous conseille d'en faire autant.

Votre site web

Mise en page du site web

L'intégration du forum TBF à votre site dépend fortement de l'organisation du code (x)html de vos pages. En gros, il y aura forcément un tableau, une balise "div" ou une autre balise permettant de délimiter la zone, le cadre dans lequel sera contenu le forum. Dans le cas du site freewebmaster.fr il s'agit d'une balise "div", voir le code ci-dessous ainsi que la figure \ref{zone_insertion} :

			



... ]]>
\begin{figure}[ht] \centering \includegraphics[scale=.5]{img_integr_tbf_1.png} \caption{On voit ici la zone que délimite la balise div.} \label{zone_insertion} \end{figure}
  On voit que le contenu des pages est donc à l'intérieur du
, c'est à cet endroit qu'il faudra ajouter le code du forum. La première étape, en ce qui vous concerne est donc de trouver "l'endroit" de votre site web où vous souhaitez intégrer votre forum.

XHTML et CSS


  Avant de passer à la suite j'insiste une dernière fois sur l'importance d'avoir un site web valide XHTML et CSS, car le forum l'est. A la limite, le XHTML transistional 1.0 suffit. Vous verrez par la suite que c'est utile !

Header, Footer et CSS

Entrons dans le vif du sujet. La première étape consiste à vous munir d'un éditeur de texte, pour ma part j'utilise notepad++ qui est bien plus pratique que le notepad et permet d'éviter pas mal d'erreurs et de bien s'y retrouver grâce à la colorisation syntaxique. Maintenant, ouvrez les fichiers 'style.css', 'tpl/header.html' et 'tpl/footer.html' du forum ainsi que la page de votre site web qui contiendra le forum et sa feuille de style css associée.

Feuille de style

Vous l'aurez compris, nous allons commencer par modifier le fichier css du forum. La feuille de style css du forum est entièrement contenue dans le fichier style.css qui se présente comme suit :

 La suite du fichier ne nous intéresse pas, en effet, seule cette partie doit être directement remplacée par la partie correspondante de votre site web. Exemple, pour le cas de freewebmaster.fr, le début du fichier css est donné ci-dessous, je remplace donc le code que je viens de donner par celui-ci :
 a,
a:link, 
a:visited, 
a:active 
{ 
 color              :#182b4e; 
 text-decoration    :none;	
 font-size          :11px; 
 font-family        :Verdana,Sans-Serif; 
}
 a:hover { text-decoration :none; color :#acbfd8; } ]]>

 Placez également tout le reste de la feuille de style de votre site dans le fichier style.css du forum afin de garder toutes les autres propriétés de votre site web. Ne touchez en aucun cas à la suite du fichier, nous verrons cela plus tard. Je précise, qu'il s'agit ici de la feuille de style de freewebmaster.fr, vous ne devez pas copier ce code mais insérer celui de votre site !

Header


  Dans cette section, nous allons voir comment modifier le fichier 'tpl/header.html' du forum. Le début de cette page se présente comme suit :


	TBF
	
	

]]>

 Notez que pour la version 2.1 on passera de iso-8859-1 à UTF-8... Cette fois, il va falloir remplacer l'élément par ce qui, dans votre site web, est situé entre le et l'élément qui contient le contenu principal de votre page (on l'a vu précédemment, dans le cas de freewebmaster.fr c'est
). Donc dans mon cas je dois remplacer le par :

			

]]>

 Ce qui donne finalement ceci :
  \begin{figure}[ht] \centering \includegraphics[scale=.5]{img_integr_tbf_2.png} \caption{Modification apportée sur le fichier header.html.} \label{modif_header} \end{figure}
 Notez que trois balises "div" supplémentaires viennent d'être ouvertes entourées en rouge sur la figure \ref{modif_header}, il ne faudra pas oublier de les refermer plus tard.

Footer

Passons maintenant au fichier 'tpl/footer.html'... Cette fois, il va falloir ajouter le code à la fin du fichier. Souvenez-vous, le contenu de votre site figure entre deux balises, pour moi c'est :
et
, pour le fichier header, nous avons ajouté cette balise (
), pour le fichier footer, vous allez chercher l'endroit où se ferme cette balise (
correspondante) et copier tout le contenu de votre site à partir de cette balise jusqu'en bas de votre page, sauf les balises et . Si le bas de votre forum s'affiche mal (comme c'est le cas pour moi) repérez l'endroit où se ferme la dernière balise du bas de votre site (image de copyright par exemple pour freewebmaster.fr) et ajoutez un "
" à cet endroit pour fermer la balise qui entoure le forum... Dans ce cas, n'oubliez pas de rajouter, tout en bas de la page footer, une balise "
" pour compenser celle qui a été fermée. Vérifiez que toutes les balises ouvertes sont fermées au bon endroit, ce qui normalement est le cas. Voyons ce que ça donne :
 \begin{figure}[ht] \centering \includegraphics[scale=.5]{img_integr_tbf_3.png} \caption{Voici à quoi ressemble le forum à ce niveau.} \label{apercu1} \end{figure}
 Notez qu'à ce niveau j'ai enlevé les images du menu du forum et je les ai remplacées par du texte, pour ne pas avoir de retour à la ligne dû à la largeur des images... Si vous rencontrez le même problème vous pouvez en faire autant en modifiant le header.

Retouches diverses

Harmoniser les couleurs


  L'aperçu précédent montre clairement qu'il reste certaines retouches à faire au niveau des couleurs et donc de la feuille de style. Je vais simplement me contenter d'une description du fichier css du forum pour que vous sachiez quelles couleurs modifier. Je vais donc juste vous donner la liste des couleurs présentes dans le fichier ainsi que les éléments à quoi elles correspondent.

La couleur ecf4fa


  Cette couleur est mentionnée à plusieurs reprise dans la feuille de style, si vous la modifiez, la couleur de fond de plusieurs tableau en sera affectée et notamment la couleur de fond des forums, de la liste de membres, du tableau de la page d'inscription, de la page des discussions...

La couleur 899db8


  Il s'agit simplement de la couleur de toutes les bordures du forum, changez cette couleur, partout dans le fichier css, en noir par exemple et toutes les bordures apparaîtront en noir. Vous pouvez aussi essayer de ne pas changer tous les appels à cette couleur dans le fichier style.css pour personalisez un peu plus votre forum et avoir des bordures de couleur différentes par exemple.

La couleur e1ecf5


  C'est la couleur de fond à l'intérieur du cadre qui délimite le contour du forum (classe cadre de la feuille de style). C'est aussi la couleur de fond des zones de code (située dans la classe code de la feuille de style).

Finalement


  Vous pouvez finalement obtenir un résultat satisfaisant en ne modifiant que ces trois couleurs. Evidemment, rien ne vous empêche de personaliser entièrement le fichier css du forum. Vous pouvez aussi rajouter certains élément ou même en supprimer, voire même retoucher le code des fichiers templates, les possibilités sont infinies !
 \begin{figure}[ht] \centering \includegraphics[scale=.5]{img_integr_tbf_4.png} \caption{Voici à quoi ressemble le forum.} \label{final} \end{figure}

D'autres retouches...


  Vous pouvez choisir de vous arrêter là, ou alors de modifier aussi les images du forum par exemple, car comme on le voit sur la figure \ref{final}, les images ne suivent pas trop avec le fond. Quoiqu'il en soit, cette partie ne sera pas abordée ici, c'est vous qui êtes désormais maître de toutes les autres modifications que vous souhaitez apporter. Le forum reste ouvert à toutes vos questions