Dernière mise à jour : 13/11/2014 à 21h50
Table des matières
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.
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 :Ce fichier est stocké dans un sous répertoire du nom de la langue (/french et /english par défaut).name="Base" desc="The PHPBoost official theme." main_color="White, Blue"
- 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.
Les fichiers header.tpl et footer.tpl
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 :
Le fichier body.tpl contient le contenu du <body> :
Code HTML :
Un exemple est donné dans l'article La structure d'un thèmeLes 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 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
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 :
devient<div id="header">
Code TPL :
<header id="header">
La balise <aside> est utilisée pour les menus de gauche et droite :
Code TPL :
devient<div id="left_menu">
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 |