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 : 21/11/2020 à 05h56

Introduction


Si vous voulez convertir vous même le thème que vous utilisez alors que son auteur ne l'a pas (encore) fait, certains thèmes pouvant être soumis à une licence protégeant les droits d'auteurs, veuillez vérifier que vous avez les autorisations nécessaires avant de les modifier.
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.

config.ini


la date de création
date="01/01/1970"
est séparée en 2 afin d'ajouter une date de mise à jour:
creation_date = "1970/01/01"

last_update = "2021/01/01"


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 dans /templates/{THEME}/frame.tpl


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 :
# IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/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;...)}" type="text/css" media="screen, print" />
        # ELSE #...

par
Code HTML :
# IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/{THEME}/theme/@import.css;...)}" type="text/css" media="screen, print" />
        # ELSE #...;

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

.actions
=>
.controls

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>

Supprimer la flexbox du selecteur body et l'ajouter à la nouvelle classe dans un des fichiers css
Code CSS :
.body-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


l'identifiant
push-container
est utilisé pour les options du nouveau type de menu de liens, "pushmenu", ajouté à ceux existant et permet, si l'option est choisie, de décaler le contenu lors de l'ouverture du menu.
La classe
body-wrapper
est utilisée pour "retarder" l'affichage du contenu laissant le temps à la page d'être chargée entièrement avant d'être affichée. Si vous ne voulez pas l'utiliser, il faut laisser la flexbox sur le sélecteur body

body.tpl


Tous les
title=""
sont remplacés par
aria-label=""

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


Tous les
title=""
sont remplacés par
aria-label=""

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 serviront plus à une personnalisation qu'à une adaptation au thème.