Mettre à jour son thème 5.2 en 6.0 - Wiki

Dernière mise à jour : 30/12/2021 à 08h42

Table des matières

Introduction
config.ini
frame.tpl
body.tpl
Les modules
1. les fichiers tpl
2. les fichiers css

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.css 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;

Cette pratique permet de ne plus avoir à déclarer qu'une seule fois l'adresse des fichiers CSS. Le moteur de rendu n'utilise pas directement @import url(), il récupère la liste des adresses des fichiers pour les mettre en cache.

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

Ajustement des détails

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

.actions
=>
.controls

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

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.

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.