• Tous les fichiers communs sont placés dans le dossier

  /templates/__default__

• Tous les fichiers relatifs aux modules sont dans leur dossier

  /templates

  respectif
  

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

La structure minimale d'un thème

desc.ini

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

miniature.ext

config.ini

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"

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

parent_theme = "nom_du_dossier_du_theme_parent"

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

Les fichiers minimum requis

parent_theme = "nom_du_dossier_du_theme_parent"

Héritage des fichiers

Structure HTML

L'administration

le framework

Les fichiers des modules

les modules "classiques"

templates

modules

{NomDuModule}SeveralItemsController.tpl

{NomDuModule}ItemController.tpl

Les modules "noyau"

• Articles
• Actualités
• Pages
• Sondages
  

• ModuleItemController.tpl

  : gère l'affichage de la page d'un item du module

• ModuleMessagesController.tpl

  : gère l'affichage d'une page de type messages (fonctionnalité à venir, non utilisée en version 6.0.0)

• ModuleSeveralItemsController.tpl

  : gère l'affichage d'une page avec plusieurs items du module (catégorie, tags, etc)
  

Personnalisation de tous les modules noyau

Personnalisation de chaque module noyau

Les fichiers CSS

@import.css

...
@import url('../../__default__/theme/cell.css') screen;
@import url('../../__default__/theme/cell_layout.css') screen;
...

...
@import url('../../Nom_Du_Theme/theme/cell.css') screen;
@import url('../../Nom_Du_Theme/theme/cell_layout.css') screen;
...

@import url('../../Nom_Du_Theme/theme/fichier.css') screen;

@import url('../../Nom_Du_Theme/theme/fichier.css') screen;

@import url('fichier.css') screen;

L'administration

        
    # IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/__default__/dashboard/@import.css')}" type="text/css" media="screen, print" />
    # ELSE #
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/__default__/dashboard/@import.css" type="text/css" media="screen, print" />
    # ENDIF #

    # IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/Nom_Du_Theme/dashboard/@import.css')}" type="text/css" media="screen, print" />
    # ELSE #
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/Nom_Du_Theme/dashboard/@import.css" type="text/css" media="screen, print" />
    # ENDIF #

Les fichiers javascript

// PHPBoost version < 6
<script src="{PATH_TO_ROOT}/templates/{THEME}/chemin/vers/fichier.js"></script>
//PHPBoost version > 6
<script src="{PATH_TO_ROOT}/templates/Nom_Du_Theme/chemin/vers/fichier# IF C_CSS_CACHE_ENABLED #.min# ENDIF #.js"></script>

# IF C_CSS_CACHE_ENABLED #
    <script src="{PATH_TO_ROOT}/templates/Nom_Du_Theme/chemin/vers/fichier.min.js"></script>
# ELSE #
    <script src="{PATH_TO_ROOT}/templates/Nom_Du_Theme/chemin/vers/fichier.js"></script>
# ENDIF #
que l'on peut aussi déclarer 
<script src="{PATH_TO_ROOT}/templates/Nom_Du_Theme/chemin/vers/fichier# IF C_CSS_CACHE_ENABLED #.min# ENDIF #.js"></script>

Les images

• no_avatar.webp

  : l'avatar commun lorsqu'un utilisateur choisi de ne pas personnaliser le sien

• default_category.webp

  : la miniature par défaut des catégories

• default_item.webp

  : la miniature par défaut des items

• error.webp

  : l'image commune aux pages 403 et 404
  

default_category.webp

default_item.webp

Les langues

{@nom.de.la.variable}

{@H|nom.de.la.variable}.

$lang['first.var'] = 'Un premier texte';
$lang['other.var'] = 'Un autre texte';
$lang['var.with.quote'] = 'Attention à l\'apostrophe';
?>

;

\

Les variables de template

Les variables de condition

# IF C_VARIABLE_EXISTS #// code HTML# ENDIF #

# IF C_VARIABLE_EXISTS #// code HTML # ELSE #// autre code HTML# ENDIF #

# IF C_VARIABLE_EXISTS #// code HTML # ELSE ## IF C_VARIABLE_EXISTS #// autre code HTML# ENDIF ## ENDIF #

#

#

Les variables de contenu

{}

{TITRE}

{CONTENT}

Nom du fichier

/sous/dossier/phpboost/Nom_du_module

/sous/dossier/phpboost/

les variables de date