Migrer un thème vers une nouvelle version

Mettre à jour son thème 4.0 en 4.1

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





Modification de la structure du thème





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.



Les fichiers de configuration





Le répertoire /templates/{VOTRETHEME}/config est renommé en /lang.



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



  • La première partie du fichier propre à chaque langue est renommée 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"
    Ce fichier est stocké dans un sous répertoire du nom de la langue (/french et /english par défaut).

    L'ancien élement "info" a été renommé en "desc"
  • La seconde partie du fichier commune à toutes les langues est déplacée à la racine du thème /templates/{VOTRETHEME}/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=1.0
    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 /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 :
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é dans l'article La structure d'un thème





Les fichiers CSS





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 :
  • /images
  • content.css
  • design.css
  • global.css





Les fichiers images du répertoire /theme/images





Sauf si vous avez ajouté 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 ajouté 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





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.



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 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.
Code TPL :
# INCLUDE  JS_TOP #


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




La balise <aside> est utilisée pour les menus de gauche et droite :
Code TPL :
<div id="left_menu">
devient
Code TPL :
<aside id="menu-left">






Modification du code CSS





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.



generic.css





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




global.css





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




design.css





Classe CSS de la 4.0 Type de Modification Classe CSS de la 4.1 Fichier CSS de la 4.1
body Classe CSS conservée body design.css
html Classe CSS déplacée html default.css
global Classe CSS conservée avec une arborescence modifiée global design.css
header_container Classe CSS renommée header design.css
logo Classe CSS renommée avec une arborescence modifiée site-logo design.css
site_name Classe CSS renommée avec une arborescence modifiée site-name-container design.css
header Classe CSS renommée top-header design.css
sub_header Classe CSS renommée sub-header design.css
compteur Classe CSS conservée compteur design.css
left_menu Classe CSS renommée menu-left design.css
right_menu Classe CSS renommée menu-right design.css
main Classe CSS conservée main design.css
main_content Classe CSS renommée main-content design.css
links Classe CSS renommée breadcrumb design.css
top_contents Classe CSS renommée top-content design.css
bottom_contents Classe CSS renommée bottom-content design.css
top_footer Classe CSS renommée top-footer design.css
footer Classe CSS conservée footer design.css




content.css





Classe CSS de la 4.0 Type de Modification Classe CSS de la 4.1 Fichier CSS de la 4.1
table Classe CSS conservée mais utilisation des classes CSS thead, tbody, tfoot table content.css
block_container Classe CSS renommée block, small-block, medium-block content.css
block_contents Classe CSS renommée content content.css
block_top Classe CSS supprimée, utilisation de la balise h1 block h1 content.css
hr Classe CSS déplacée hr default.css
list Classe CSS supprimée mais utilisation de la balise ul en list ou ajout de la classe CSS no-list no-list default.css
h1 Classe CSS déplacée et appliquée sur certain éléments tel que les block h1 content.css et global.css
h2 Classe CSS déplacée et appliquée sur certains éléments tel que les block h2 content.css et global.css
h3 Classe CSS déplacée et appliquée sur certain éléments tel que les block h3 content.css et global.css
h4 Classe CSS déplacée et appliquée sur certains éléments tel que les block h4 content.css et global.css
h5 Classe CSS déplacée et appliquée sur certains éléments tel que les block h5 content.css et global.css
h6 Classe CSS déplacée et appliquée sur certains éléments tel que les block h6 content.css et global.css
fieldset_mini Classe CSS renommée fieldset-mini content.css et global.css
input Classe CSS conservée input content.css
textarea Classe CSS conservée textarea content.css
optgroup Classe CSS conservée optgroup content.css
select Classe CSS conservée select content.css
xmlhttprequest_preview Classe CSS renommée xmlhttprequest-preview content.css
button Classe CSS conservée button content.css
option Classe CSS conservée option content.css
fieldset Classe CSS conservée fieldset content.css
legend Classe CSS conservée legend content.css
fieldset-submit Classe CSS conservée fieldset-submit content.css
msg_x Classe CSS déplacée dans le forum et création de nouvelle classe CSS pour la messagerie privée message-x content.css
module_x Classe CSS déplacée dans le forum .module_x forum.css
module_mini_container Classe CSS renommée module-mini-container content.css
module_mini_top Classe CSS renommée module-mini-top content.css
module_mini_contents Classe CSS renommée module-mini-contents content.css
module_mini_bottom Classe CSS renommée module-mini-bottom content.css
label Classe CSS conservée mais ajout d'une classe form-element label content.css
comment Classe CSS supprimée car harmonisée avec les messages privés message content.css
Cette page a été vue 14653 fois
Annonces