Migrer un thème vers une nouvelle version

Mettre à jour son thème 5.2 en 6.0

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 24/09/2020 à 09h03

Introduction


La structure des thèmes a radicalement changé avec la version 6.0 de PHPBoost, cependant nous avons essayé, dans la mesure du possible, de conserver la rétrocompatibilité des anciens thèmes et les quelques modifications suivantes permettront de les utiliser.

frame.tpl


  • supprimer les appels de fichiers css déplacés du dossier
    kernel
    vers le dossier
    templates
  • Remplacer l'appel du fichier default par l'appel d'un fichier @import.css placé dans le dossier
    theme
    du thème
  • ajouter le html pour les options du nouveau type de menu
    Menu Push
    et donc déplacer la flexbox intialement déclarée sur la balise <body />


Appel des fichiers css


Remplacer
Code HTML :
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/js/lightcase/css/lightcase.css" />

Par
Code HTML :
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/@import.css" type="text/css" media="screen, print" />


Ainsi que dans la partie cache
Code HTML :
/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/kernel/lib/css/font-awesome-animation/css/font-awesome-animation.css;/kernel/lib/js/lightcase/css/lightcase.css;

par
Code HTML :
/templates/{THEME}/theme/@import.css;

Il est impératif que le nom du fichier soit
@import.css
pour que la liste des appels de fichiers qu'il contient soit prise en compte dans le cache


Contenu du @import.css


A minima le fichier @import.css doit contenir les appels des fichiers correspondants aux nouvelles classes du framework
Code CSS :
@import url('../../default/theme/@default.css') screen, print;
@import url('../../default/theme/font-awesome/css/all.css');
@import url('../../default/theme/font-awesome-animation.css');
@import url('../../default/theme/lightcase.css') screen;
@import url('../../default/theme/prism.css') screen;
@import url('../../default/theme/pushmenu.css') screen;
@import url('../../default/theme/plugins.css') screen;
@import url('../../default/theme/message_helper.css') screen;
@import url('../../default/theme/global.css') screen;
@import url('../../default/theme/messages.css') screen;
@import url('../../default/theme/cell.css') screen;
@import url('../../default/theme/cell_layout.css') screen;


à ce stade votre thème est fonctionnel à 80%

Vous allez devoir maintenant ajuster votre thème aux nouvelles classes css.
Soit vous modifiez les anciens fichiers de votre thème, ce qui peut être suffisant pour les classes qui ont seulement changé de nom, des classes manquantes ou des classes qui ont changé de fonctionnement
.thumbnail-item
=>
.item-thumbnail

.message-user-infos
,
.form-field-textarea

soit vous pouvez créer de nouveaux fichiers pour y "surcharger" les nouvelles classes, essentiellement au niveau des couleurs de texte ou des couleurs de fond, mais pas que.

HTML autour du contenu


Code HTML :
# INCLUDE BODY #

devient
Code HTML :
<div id="push-container" class="body-wrapper">
    # INCLUDE BODY #
</div>

Ajouter dans un des fichiers css
Code CSS :
.body-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


body.tpl


Dans ce fichier, aucun élément n'a été modifié. Vérifiez cependant que toutes les variables ({NOM_DE_VARIABLE}, # IF VARIABLE_DE_CONDITION #, etc) soient bien nommées en comparant avec le thème
Base


Les modules



les fichiers tpl


Vérifiez que toutes les variables ({NOM_DE_VARIABLE}, # IF VARIABLE_DE_CONDITION #, etc) soient bien nommées en comparant avec les tpl des modules auxquels ils se réfèrent.
Les noms des fichiers tpl de certains modules ont été modifiés.

les fichiers css


la structure des modules est maintenant régie par le framework , sauf exception, leurs fichiers css servira plus à une personnalisation qu'à une adaptation au thème