Nous allons voir au fil de cet article la manière de modifier un thème 4.0 afin de pouvoir l'utiliser sur la version 4.1 de PHPBoost.
La mise à jour 4.1 de PHPBoost est une mise à jour importante au niveau de la partie graphique.
Cette nouvelle version utilise les langages HTML5, CSS3 et intègre la police d'icône
Font-Awesome. Ces évolutions importantes permettront une personnalisation encore plus simple et plus rapide des thèmes.
Lors de la refonte du code en HTML5 et CSS3, nous avons simplifié les fichiers .css et repris plusieurs classes CSS. Le code est maintenant plus lisible, mieux organisé et plus performant.
Ces changements ne sont pas sans conséquences sur les thèmes. Les fichiers .css et .tpl ayant été remaniés, la conversion d'un thème 4.0 en 4.1 est beaucoup plus complexe que le passage 3.0 à 4.0.
Néanmoins, nous allons voir ci-dessous les étapes à réaliser pour rendre le thème compatible avec la version 4.1 et les modifications à entreprendre pour retrouver votre thème sur cette nouvelle version.
Les modifications présentés dans cet article n'intègrent pas les différents éléments que vous auriez pu ajouter ou modifier dans vos fichiers
Dans ce paragraphe, nous allons détailler les modifications à effectuer dans l'organisation du répertoire des thèmes afin de le rendre installable. Pour bien comprendre la structure du thème, vous pouvez consulter cet
article.
Le répertoire
/templates/{VOTRETHEME}/config est renommé en
/lang.
Le fichier
config.ini de chaque langue est découpé en deux parties.
Les fichiers
index.php des répertoires
/lang/french et
/lang/english (anciennement
/config) peuvent être supprimés.
A partir de cette étape, le thème peut être installé via le panneau d'administration, mais celui-ci ne sera pas fonctionnel
Les fichiers
header.tpl et
footer.tpl ont été modifiés et remplacés par les fichiers
frame.tpl et
body.tpl. Nous reviendrons sur le contenu dans les prochains paragraphes. Le "regroupement" du contenu du body dans le même fichier rend les modifications beaucoup plus simples.
Le fichier
frame.tpl contient la partie structurante de la page html :
Le fichier
body.tpl contient le contenu du <body> :
Un exemple est donné dans l'article
La structure d'un thème
Le fichier
print.css a été déplacé dans le répertoire
\templates\default\theme
=> Si vous n'avez pas modifié ce fichier, il peut être supprimé du répertoire.
Le contenu du fichier
generic.css a été déplacé dans les autres fichiers CSS du thème ou dans le ficher
default.css du répertoire
\templates\default\theme.
=> Il peut être supprimé du répertoire de votre thème.
Par défaut, le répertoire
\templates\{VOTRETHEME}\theme contient :
Sauf si vous avez ajouté des fichiers spécifiques pour votre thème, le répertoire
/theme/images ne contient que les fichiers suivants :
Les autres fichiers ne sont plus utilisés et peuvent être supprimés.
Sauf si vous avez ajouté des fichiers spécifiques pour votre thème, le répertoire
/images ne contient que le fichier suivant :
Les autres fichiers ne sont plus utilisés et peuvent être supprimés.
Les modifications du code html étant très importantes, il est préférable de partir des nouveaux fichiers et d'inclure vos modifications, plutôt que d'essayer de convertir vos fichiers.
La première partie du code html à modifier correspond au fichier
frame.tpl (anciennement
header.tpl et
footer.tpl)
Vous avez sûrement remarqué que le contenu de la balise
<head> a légèrement évolué.
Les fichiers spécifiques à PHPBoost comme le Javascript sont maintenant inclus via les balises
INCLUDE.
Si vous avez ajouté d'autres fichiers .css ou des scripts javascript dans votre thème il suffit de les ajouter au même endroit.
Le fichier body.tpl
La seconde partie du code html à modifier correspond au fichier
body.tpl (anciennement
header.tpl et
footer.tpl)
Les nouvelles balises html5 ont été intégrées dans le fichier
body.tpl. Pour exemple, la balise
<header> vient encadrer l'en-tête du site :
devient
La balise
<aside> est utilisée pour les menus de gauche et droite :
devient
Il est impossible et inutile de lister toutes les modifications faites dans les fichiers CSS.
Afin de faciliter la conversion de vos thèmes, des tableaux de synthèse présentant les évolutions dans les fichiers CSS ont été réalisés.
content.css