Mettre à jour son thème 4.1 en 5.0

Nous allons voir au fil de cet article la manière de modifier un thème 4.1 afin de pouvoir l'utiliser sur la version 5.0 de PHPBoost.

Avant de commencer




La mise à jour 5.0 de PHPBoost est une mise à jour à la fois mineure et majeure au niveau de la partie graphique.

Elle est mineure car nous n'avons pas renommé de classe ou autre comme la version précédente. En revanche, nous avons introduit le responsive nativement dans le thème de base ce qui a pour effet d'augmenter sensiblement le nombre de ligne de code.

Pour rendre le thème responsive, nous avons choisi d'utiliser les medias-queries dans les fichiers CSS. Cette solution est la plus pratique de notre point de vue, mais elle complexifie le code en ajoutant un certain nombre de lignes supplémentaires.

Du fait de l'ajout massif de lignes de code, la conversion d'un thème sera longue si vous souhaitez le rendre responsive ou très simple si vous ne souhaitez que le rendre compatible.

Pour rendre le code CSS plus lisible, nous avons découper les fichiers css existants en plusieurs fichiers plus petits.

Nous allons voir ci-dessous les étapes à réaliser pour rendre le thème compatible avec la version 5.0 et les modifications à entreprendre pour retrouver votre thème sur cette nouvelle version.

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



Le fichier de configuration




La première étape pour rendre le thème compatible est de modifier la compatibilité dans le fichier config.ini.

Code TEXT :
compatibility=4.1
à remplacer par
Code TEXT :
compatibility=5.0


A partir de cette étape, le thème peut être installé via le panneau d'administration. Il sera presque entièrement fonctionnel

Les fichiers tpl




Il y a quelques modifications dans les fichiers tpl. L'ajout des fichiers css notamment.

Le fichier body.tpl




Le fichier frame.tpl




Les fichiers css


Le passage de la version 4.1 à la version 5.0 intègre une modification qui a un impact non négligeable sur les fichiers CSS. Par défaut, le thème de base est responsive. Cela veut dire qu'il peut s'adapter à des écrans de smartphone, des tablettes ou à un affichage standard sur ordinateur.

Pour se faire, nous avons utilisé les média queries pour ajuster chaque classe CSS en fonction du besoin. De ce fait, convertir un thème v4.1 pour le rendre responsive est une tâche très très lourde.

Nous vous conseillons vivement l'approche inverse qui consiste à refaire votre thème à partir du thème de base déjà responsive. Même si à première vue cela veut dire recommencer un thème, cette tâche sera beaucoup plus rapide que celle de bidouiller votre thème pour le rendre responsive.

L'introduction des médias queries nous a obligé à découper le code css dans plusieurs fichiers. Les fichiers design.css, content.css, global.css existaient sur la version 4.1, la version 5.0 intègre maintenant en plus les fichiers cssmenu.css, form.css, table.css et login.css.

Dans les paragraphes suivants, nous allons détailler les modifications majeures entre la v4.1 et la v5.0 pour vous permettre de vous y retrouver.

Nous ne ferons pas le détail de toutes les classes CSS créées afin de simplifier le travail des designers car elles sont assez nombreuses.

N'oubliez pas que la meilleur façon de retrouver une classe CSS dans un fichier est d'utiliser les outils "examiner l’élément" de votre navigateur en désactivant le cache CSS.

design.css


élément Position V4.1 Position V5.0
html {} default.css design.css
#top-header-content {} nouvelle classe pour gérer le contenu du top-header design.css
#sub-header-content {} nouvelle classe pour gérer le contenu du sub-header design.css
.main-with-left {} nouvelle classe pour indiquer dans le main si une colonne gauche existe design.css
.main-with-right {} nouvelle classe pour indiquer dans le main si une colonne droite existe design.css


content.css


élément Position V4.1 Position V5.0
table {} content.css Toutes les classes liées aux tableaux sont maintenant dans le fichier table.css
button, .button {} content.css Toutes les classes liées aux boutons sont maintenant dans le fichier form.css
.fieldset {} content.css Toutes les classes liées aux formulaires sont maintenant dans le fichier form.css
input, textarea {} content.css Toutes les classes liées aux formulaires sont maintenant dans le fichier form.css


Ce qui fait que l'on retrouve maintenant dans le fichier content.css les éléments suivants : Les éléments en vert correspondent à des nouveautés, les éléments en bleu correspondent à des classes venant d'un autre fichier.

global.css


élément Position V4.1 Position V5.0
.dynamic-menu {} global.css Toutes les classes liées aux menus sont maintenant dans le fichier cssmenu.css
#message-maintain {} global.css la partie maintenance a été déplacée dans le fichier content.css


Ce qui fait que l'on retrouve maintenant dans le fichier global.css les éléments suivants : Les éléments en vert correspondent à des nouveautés, les éléments en bleu correspondent à des classes venant d'un autre fichier.

table.css


Le fichier étant nouveau, le plus simple est supprimer les classes tableaux du fichier content.css et de copier le fichier table.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) que vous aviez sur la v4.1.

form.css


Le fichier étant nouveau, le plus simple est supprimer les classes des formulaires du fichier content.css et de copier le fichier form.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) que vous aviez sur la v4.1.

cssmenu.css


Le système de menu à complètement été revu dans la v5.0 afin de le rendre responsive. Le fichier étant nouveau, le plus simple est supprimer les classes menu du fichier global.css et de copier le fichier cssmenu.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) pour ajuster à votre design.

login.css


Le fichier étant nouveau, il vous suffit de le copier dans votre thème. Vous pourrez adapter les éléments en fonction du design que vous souhaiterez.



Méthode conseillée pour la migration


Comme nous avons pu le voir au travers des différents paragraphes, le passage à la V5.0 demande un investissement du designer. Mais la cause de cette investissement est due à la responsivité.

Pour finir, nous allons vous expliquer la méthode que nous avons utilisé pour migrer les thèmes officiels. Malgré l'attente que vous avez observé de votre coté, la migration de chaque thème ne nous a pas demandé beaucoup d'effort.

Tous d'abord, nous avons utilisé une installation de la V4.1 avec le thème pour bien avoir le rendu final souhaité.

Sur une installation de la V5.0, nous avons :

A partir de cette étape, le thème est identique aux thèmes de base.

La prochaine étape consiste à retrouver le design que nous avions sur la V4.1.

A partir de cette étape, le design du thème est identique à la version v4.1.

L'étape suivante consiste à ajuster les couleurs de liens etc. Pour ce faire, il est conseillé d'utiliser le module "bac à sable" qui permet sur une seule page d'avoir tous les éléments.

Pour finir, il est nécessaire de refaire les modifications sur les modules/framework/administration que vous aviez surchargés.

Et voilà, votre thème est maintenant converti pour la v5.0 et il est responsive.



La responsivité




Bien sûr la responsivité que nous avons prévu n'est peut-être pas celle que vous souhaitez. Si vous souhaitez un comportement différent, il vous suffit d'ajuster les médias-queries.

Lorsque vous lirez le code, vous trouverez 3 types d'écriture pour gérer l'affichage.

Bien sûr il existe des variantes pour faire en fonction de la taille d'écran que l'on souhaite prévoir.