Migrer un thème vers une nouvelle version

Mettre à jour son thème 4.0 en 4.1

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 20/06/2014 à 17h40
Table des matières
  1. Avant de commencer
  2. Modification de la structure du thème
    1. Les fichiers de configuration
    2. Les fichiers header.tpl et footer.tpl
    3. Les fichiers CSS
    4. Les fichiers images du répertoire /theme/images
    5. Les fichiers images du répertoire /images
  3. Modification du code html
    1. Le fichier frame.tpl
EN COURS







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.







Avant de commencer



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 permettrons 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.x à 4.0.







Néanmoins, nous allons voir ci-dessous les étapes à réaliser pour rendre le thème compatible avec la version 4.1.



Les modifications présentés dans cette article n'intègre pas les différents éléments que vous auriez pu ajouter ou modifier dans vos fichiers











Modification de la structure du thème



Dans ce paragraphe, nous allons détaillé 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.







Les fichiers de configuration



Le répertoire config est renommé en lang.







Le fichier config.ini est découpé en deux parties.







  • La première partie du fichier est renommé en desc.ini et contient les éléments identifiants le thème dans chaque langue.



    Code TEXT : 
    name="Base"
desc="The PHPBoost official theme."
main_color="White, Blue"
  • La seconde partie du fichier est déplacée à la racine du thème dans un nouveau fichier config.ini. Il contient les éléments techniques du thème :



    Code TEXT : 
    author="PHPBoost"
author_mail="contact@phpboost.com"
author_link="http://www.phpboost.com"
version=4.1
date="05/08/12"
compatibility=4.1
require_copyright=0
html_version=5.0 Strict
css_version=3.0
columns_disabled=right
variable_width=0
width="980px"
pictures="theme/images/theme.jpg,theme/images/admin.jpg"




Les fichiers index.php des répertoires /config/french et /config/english 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.tplet 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 simple.







Le fichier frame.tpl contient la partie structurante de la page html :
Code HTML : 
<!DOCTYPE html>
<html lang="{L_XML_LANGUAGE}">
    <head>
        ...
    </head>
 
    <body itemscope="itemscope" itemtype="http://schema.org/WebPage">
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM #
    </body>
</html>








le fichier body.tpl contient le contenu du <body> :
Code HTML : 
    # INCLUDE MAINTAIN #
 
    <header id="header">
        ...
    </header>
 
    <div id="global">
        ...
        <div id="main" role="main">
            ...
        </div>
        ...
    </div>
    <footer id="footer">
        ...
    </footer>
Un exemple est donnée dans l'article La structure d'un thème











Les fichiers CSS









Le fichier print.css a été déplacé dans le répertoire default



=> 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.



=> Il peut être supprimé du répertoire.











Les fichiers images du répertoire /theme/images









Sauf si vous avez ajouter des fichiers spécifiques pour votre thème, le répertoire /theme/images ne contient que les fichiers suivants :
  • global.png
  • logo.png
  • theme.jpg
  • admin.jpg



Les autres fichiers ne sont plus utilisés et peuvent être supprimés.







Les fichiers images du répertoire /images









Sauf si vous avez ajouter des fichiers spécifiques pour votre thème, le répertoire /images ne contient que le fichier suivant :
  • noavatar.png



Les autres fichiers ne sont plus utilisés et peuvent être supprimés.















Modification du code html









La première partie du code html à modifier correspond au fichier frame.tpl ( anciennement header.tpl et footer.tpl )











Le fichier frame.tpl









Il est préférable de partir du nouveau fichier et d'inclure vos modifications. Vous assez surement remarquer que le contenu de la balise <head> à légèrement évoluer.







Les fichiers spécifiques à PHPBoost comme le Javascript sont inclus via les balises INCLUDE.
Code TPL : 
# INCLUDE  JS_TOP #




Si vous avez ajouté d'autres fichiers .css ou javascript dans votre thème il suffit de les ajoutés au même endroit.







La seconde partie du code html à modifier correspond au fichier body.tpl (anciennement header.tpl et footer.tpl )