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 : 26/06/2014 à 23h33
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
    2. Le fichier body.tpl
    3. Les fichiers css
      1. generic.css
      2. global.css
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









Au lieu de modifier le fichier de votre ancien thème, il est préférable de partir des nouveaux fichiers et d'inclure vos modifications.







Le fichier frame.tpl



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







Vous avez surement remarqué que le contenu de la balise <head> a légèrement évolué.







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.







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 :
Code TPL : 
<div id="header">
devient
Code TPL : 
<header id="header">








Code TPL : 
<div id="left_menu">
devient
Code TPL : 
<aside id="menu-left">












Les fichiers css









Afin de vous faciliter les modifications, voici des tableaux de synthèse présentant les évolutions dans les fichiers css.







generic.css



Class V4 Modification Class V4.1 Fichier CSS V4.1
img Class déplacée img default.css
hr Class déplacée hr default.css
ul Class déplacée ul default.css
p Class déplacée p default.css
text_center Class remplacée center default.css
text_small Class remplacée small global.css
text_strong Class modifiée text-strong default.css
text_justify Class modifiée text-justify default.css
img_right Class remplacée img.right default.css
img_left Class remplacée img.left default.css
valign_top Class modifiée valign-top default.css
valign_bottom Class modifiée valign-bottom default.css
valign_bottom Class modifiée valign-bottom default.css
spacer Class remplacée spacer default.css
error_handler Class remplacée error-handler default.css
question Class déplacée question global.css
warning Class déplacée warning global.css
error Class déplacée error global.css
success Class déplacée success global.css
notice Class déplacée notice global.css
error_handler_position Class supprimée - -
smiley Class déplacée smiley default.css
h3.title1 Class supprimée - -
h3.title2 Class supprimée - -
h4.stitle1 Class supprimée - -
h4.stitle2 Class supprimée - -
float_left Class renommée et déplacée foat-left global.css
float_right Class renommée et déplacée foat-right global.css
bb_table Class supprimée - -
bb_table_col Class supprimée - -
bb_ul Class supprimée - -
bb_ol Class supprimée - -
bb_li Class supprimée - -
text_blockquote Class renommée et déplacée text_blockquote global.css
text_code Class renommée et déplacée text_code global.css
text_hide Class renommée et déplacée text_hide global.css
blockquote Class déplacée blockquote global.css
code Class déplacée code global.css
hide Class déplacée hide global.css
hide2 Class déplacée hide2 global.css
indent Class déplacée indent global.css
bb_acronym Class renommée et déplacée bb-acronym global.css
bb_block Class renommée et déplacée bb-block global.css
bb_fieldset Class renommée et déplacée bb-fieldset global.css
xmlhttprequest_preview Class renommée et déplacée xmlhttprequest-preview content.css + default.css
wikipedia_link Class renommée et déplacée wikipedia-link global.css








global.css



Class V4 Modification Class V4.1 Fichier CSS V4.1
row1 Class supprimée - -
block_contents1 Class remplacée block content.css
row2 Class supprimée - -
block_contents2 Class remplacée block content.css
row3 Class supprimée - -
block_contents3 Class remplacée block content.css
xmlhhtprequest_result_search Class renommée et déplacée xmlhhtprequest-result-search global.css
calendar_block Class renommée et déplacée calendar-block global.css
upload_selected_cat Class renommée et déplacée upload-selected-cat global.css
a Pas de modification a global.css
img_link Class renommée et déplacée img-link default.css
small_link Class remplacée small et smaller global.css
big_link Class remplacée big et bigger global.css
com Class supprimée - -
admin Pas de modification admin global.css
modo Pas de modification modo global.css
member Pas de modification member global.css
pagination Class déplacée pagination default.css
pagination_current_page Class renommée et déplacée pagination-current-page default.css
dynamic_menu Class renommée et déplacée dynamic-menu global.css
menu_vertical_0 Class renommée menu-vertical-0 global.css