1 - Structure d'un thème PHPBoost 6Wiki

Introduction

FWKBoost, le framework html/css/javascript mis en place depuis la version 6 accentue le fonctionnement par héritage en l'étendant à tous les fichiers utilisés dans un thème.

Tous les fichiers communs sont placés dans le dossier
```
/templates/__default__
```
Tous les fichiers relatifs aux modules sont dans leur dossier
```
/templates
```
respectif

Un thème est composé de plusieurs types de fichiers :

Les fichiers de mise en forme/animation :

CSS (Cascading Style Sheet ou feuilles de style en cascade) est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses. Le CSS est la partie concernant la mise en forme du document, les fichiers ont l'extension .css.
Javascript est un langage qui permet de manipuler les propriétés css ou les déclarations html pour améliorer l'animation ou la mise en forme d'une page.

Les fichiers de structure HTML : Un fichier template (patron en français) permet de faire l'interface entre PHP (générateur de contenu) et le code HTML généré. Ces fichiers sont en langage HTML (HyperText Markup Language) et contiennent les variables définies par PHP. Le HTML concerne le fond du document, les fichiers ont l'extension .tpl.

La structure minimale d'un thème

Pour fonctionner, un thème doit être constitué à minima de la manière suivante :

Nom_Du_Thème
+lang
++french
+++
```
desc.ini
```
+thème
++images
+++
```
miniature.ext
```
++
```
@import.css
```
+
```
config.ini
```

desc.ini

contient le nom du thème et sa description

Code TEXT :

name = "Base"
desc = "Le thème officiel de PHPBoost."
main_color = "Blanc, Bleu"

miniature.ext

(par ex: theme.webp) est la miniature du thème. Elle est affichée dans la liste des thèmes pour l'illustrer. Il peut y en avoir plusieurs à déclarer dans le fichier config.ini dans l'option "pictures".

config.ini

permet d'afficher des informations sur le thème et de lui attribuer une configuration par défaut qui sera appliquée lors de son installation.

Code TEXT :

addon_type = "theme"
author = "PHPBoost"
author_mail = "contact@phpboost.com"
author_link = "https://www.phpboost.com"
creation_date = "2016/02/24/"
last_update = "2022/07/02/"
version = "6.0.0"
compatibility = "6.0.0"
require_copyright = "0"
html_version = "5.0"
css_version = "4.0"
columns_disabled = "right"
variable_width = "0"
width = "1280px"
pictures = "theme/images/theme.webp, ../__default__/theme/images/admin.webp"

On peut aussi y retrouver les options :

repository = "https://dl.phpboost.com/unofficial_templates.xml"

qui permet de déclencher une alerte dans l'administration quand le thème est mis à jour.

parent_theme = "nom_du_dossier_du_theme_parent"

quand le thème est un thème enfant (cf Modifier un thème)

@import.css

contient la liste de tous les fichiers css utilisés par le 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/icoboost/icoboost.css') screen;
@import url('../../__default__/theme/precode.css') screen;
@import url('../../__default__/theme/linedwrap.css') screen;
@import url('../../__default__/theme/shape.css') screen;
@import url('../../__default__/theme/@variables.css') screen;
@import url('../../__default__/theme/form.css') screen;
@import url('../../__default__/theme/fieldset.css') screen;
@import url('../../__default__/theme/input.css') screen;
@import url('../../__default__/theme/datepicker.css') screen;
@import url('../../__default__/theme/constraint.css') screen;
@import url('../../__default__/theme/authorizations.css') screen;
@import url('../../__default__/theme/table.css') screen;
@import url('../../__default__/theme/formatter.css') screen;
@import url('../../__default__/theme/cookies.css') screen;
@import url('../../__default__/theme/scrollto.css') screen;
@import url('../../__default__/theme/sortable.css') screen;
@import url('../../__default__/theme/cssmenu.css') screen;
@import url('../../__default__/theme/pushmenu.css') screen;
@import url('../../__default__/theme/plugins.css') screen;
@import url('../../__default__/theme/owl.carousel.css') screen;
@import url('../../__default__/theme/list_order.css') screen;
@import url('../../__default__/theme/explorer.css') screen;
@import url('../../__default__/theme/messages.css') screen;
@import url('../../__default__/theme/message_helper.css') screen;
@import url('../../__default__/theme/pagination.css') screen;
@import url('../../__default__/theme/share.css') screen;
@import url('../../__default__/theme/cell.css') screen;
@import url('../../__default__/theme/cell_layout.css') screen;
@import url('../../__default__/theme/global.css') screen;
@import url('../../__default__/theme/content.css') screen;
@import url('../../__default__/theme/colors_code.css') screen;
@import url('../../__default__/theme/colors.css') screen;

Création d'un thème

La procédure pour créer un thème plus évolué est expliquée sur la page suivante