Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 07/08/2015 à 16h04
Table des matières
Nous avons pris pour exemple le thème de base.
Introduction
Un thème est composé de plusieurs types de fichiers :
- CSS : 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 sont possibles). Le CSS est la partie concernant la forme du document. Ces fichiers ont l'extension .css.
- Templates : 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 emplacements des variables que PHP doit assigner. Le HTML concerne le fond du document. Ces fichiers ont l'extension .tpl.
- Images : En plus du CSS, la mise en forme est appuyée par des images. Les images d'un thème se trouvent dans le dossier images du thème.
Le répertoire d'un thème est constitué de la manière suivante ::
- /images
- /lang
- /theme
- body.tpl
- config.ini
- frame.tpl
La racine du thème
On retrouve à la racine du thème les fichiers body.tpl, config.ini et frame.tpl.
Le fichier body.tpl
Le fichier body.tpl contient le contenu de la balise html <body> qui encadre le code html.
On y retrouve l'architecture même du site web avec le positionnement des éléments tels que l'en-tête, la colonne de gauche, le contenu central ou le pied de page. Si vous souhaitez positionner les éléments d'une manière différente, c'est le fichier à modifier.
Code HTML :
# INCLUDE MAINTAIN #
<header id="header">
<div id="top-header">
<div id="site-infos">
<div id="site-logo" # IF C_HEADER_LOGO #style="background: url('{HEADER_LOGO}') no-repeat;"# ENDIF #></div>
<div id="site-name-container">
<a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a>
<span id="site-slogan">{SITE_SLOGAN}</span>
</div>
</div>
# IF C_MENUS_HEADER_CONTENT #
{MENUS_HEADER_CONTENT}
# ENDIF #
</div>
<div id="sub-header">
# IF C_MENUS_SUB_HEADER_CONTENT #
{MENUS_SUB_HEADER_CONTENT}
# ENDIF #
</div>
<div class="spacer"></div>
</header>
<div id="global">
# IF C_COMPTEUR #
<div id="compteur">
<span class="text-strong">{L_VISIT}:</span> {COMPTEUR_TOTAL}
<br />
<span class="text-strong">{L_TODAY}:</span> {COMPTEUR_DAY}
</div>
# ENDIF #
# IF C_MENUS_LEFT_CONTENT #
<aside id="menu-left">
{MENUS_LEFT_CONTENT}
</aside>
# ENDIF #
# IF C_MENUS_RIGHT_CONTENT #
<aside id="menu-right">
{MENUS_RIGHT_CONTENT}
</aside>
# ENDIF #
<div id="main" role="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top-content">
{MENUS_TOPCENTRAL_CONTENT}
</div>
<div class="spacer"></div>
# ENDIF #
<div id="main-content" itemprop="mainContentOfPage">
# INCLUDE ACTIONS_MENU #
<nav id="breadcrumb" itemprop="breadcrumb">
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{START_PAGE}" title="{L_INDEX}" itemprop="url">
<span itemprop="title">{L_INDEX}</span>
</a>
</li>
# START link_bread_crumb #
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" # IF link_bread_crumb.C_CURRENT # class="current" # ENDIF #>
# IF link_bread_crumb.C_CURRENT #
<span itemprop="title">{link_bread_crumb.TITLE}</span>
# ELSE #
<a href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}" itemprop="url">
<span itemprop="title">{link_bread_crumb.TITLE}</span>
</a>
# ENDIF #
</li>
# END link_bread_crumb #
</ol>
</nav>
{CONTENT}
</div>
# IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
<div id="bottom-content">
{MENUS_BOTTOMCENTRAL_CONTENT}
</div>
# ENDIF #
</div>
# IF C_MENUS_TOP_FOOTER_CONTENT #
<div id="top-footer">
{MENUS_TOP_FOOTER_CONTENT}
<div class="spacer"></div>
</div>
# ENDIF #
<div class="spacer"></div>
</div>
<footer id="footer">
# IF C_MENUS_FOOTER_CONTENT #
<div class="footer-content">
{MENUS_FOOTER_CONTENT}
</div>
# ENDIF #
<div class="footer-infos">
<span>
{L_POWERED_BY} <a href="http://www.phpboost.com" title="PHPBoost">PHPBoost {PHPBOOST_VERSION}</a> {L_PHPBOOST_RIGHT}
</span>
# IF C_DISPLAY_BENCH #
<span>
|
{L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} - {MEMORY_USED}
</span>
# ENDIF #
# IF C_DISPLAY_AUTHOR_THEME #
<span>
| {L_THEME} {L_THEME_NAME} {L_BY} <a href="{U_THEME_AUTHOR_LINK}">{L_THEME_AUTHOR}</a>
</span>
# ENDIF #
</div>
</footer>Le fichier config.ini
Le fichier config.ini permet d'afficher des informations sur le thème et de lui attribuer une configuration par défaut qui sera appliquée lorsque celui-ci sera installé.
L'article Fichier de configuration d'un thème config.ini détaille le contenu du fichier afin de vous permettre de le modifier simplement.
Code TXT :
author="PHPBoost" author_mail="contact@phpboost.com" author_link="http://www.phpboost.com" version=4.1 date="05/08/12" compatibility=4.1 require_copyright=0 html_version=5.0 Strict css_version=3.0 columns_disabled=right variable_width=0 width="980px" pictures="theme/images/theme.jpg,theme/images/admin.jpg"
Le fichier frame.tpl
Le fichier frame.tpl contient la partie structurante de la page html. Il contient la balise d'en-tête HTML <head>.
La modification de ce fichier n'est nécessaire que si vous souhaitez ajouter un nouveau fichier css ou du code javascript sur l'ensemble du site.
Code HTML :
<!DOCTYPE html> <html lang="{L_XML_LANGUAGE}"> <head> <title>{TITLE}</title> <meta charset="iso-8859-1" /> <meta name="description" content="{SITE_DESCRIPTION}" /> <meta name="keywords" content="{SITE_KEYWORD}" /> <meta name="generator" content="PHPBoost {PHPBOOST_VERSION}" /> <!-- Theme CSS --> # 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;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/content.css')}" type="text/css" media="screen, print, handheld" /> # ELSE # <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" /> # ENDIF # <!-- Modules CSS --> {MODULES_CSS} # IF C_FAVICON # <link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" /> # ENDIF # # INCLUDE JS_TOP # </head> <body itemscope="itemscope" itemtype="http://schema.org/WebPage"> # INCLUDE BODY # # INCLUDE JS_BOTTOM # </body> </html>
Le répertoire images
Le répertoire images contient les images du thème qui ne sont pas associées à un fichier CSS.
Par défaut, le répertoire ne contient que l'image no_avatar.png.
Le répertoire lang et le fichier desc.ini
Le répertoire lang contient un répertoire par langue.
Par défaut, celui-ci contient un répertoire english et french.
Chaque répertoire ne contient qu'un seul fichier desc.ini.
Le fichier desc.ini contient les éléments identifiants le thème que l'on retrouve dans l'administration des thèmes du panneau d'administration. On y retrouve le nom du thème name, la description desc et les couleurs principales main_color. La valeur de name peut être différente du nom du répertoire.
Code TEXT :
name="Base" desc="The PHPBoost official theme." main_color="White, Blue"
Le répertoire theme
Le répertoire thème contient les différents fichiers CSS du thème ainsi que les images associés à ce thème.
Les fichiers CSS
Chaque thème est constitué des 3 fichiers CSS suivant :
- content.css : Il contient les classes propres au contenu du site (messages, modules).
- design.css : Il contient toutes les classes de mises en forme du sites (Le gros du Design)
- global.css : il contient toutes les classes utiles sur le site et communes aux différents modules.
Le répertoire images
Le répertoire images du sous dossier theme, contient les images appelées par les fichiers CSS ou TPL du thème.
Pour le thème de base on y retrouve :
- admin.jpg : Un rendu du panneau d'administration
- body.png : L'image de fond du body
- logo.png : Le logo de base
- theme.png : Un rendu du thème (Vu du site)
La grande différence avec un thème 4.0 est la quantité d'images. L'utilisation de la librairie Font-Awesome a permis de réduire considérablement le nombre d'image dans un thème et donc la taille. Si néanmoins vous souhaitez revenir à des images, lisez l'article suivant pour voir un exemple de modification.
Le répertoire modules
Ce répertoire n'est pas obligatoire, il est nécessaire uniquement lorsque vous souhaitez appliquer des modifications au design d'un module de façon spécifique à un thème.
S'il existe, son contenu est le suivant :
- /connect
- connect_mini.css
- connect_mini.tpl
- ...
- /forum
- ...
Il contient un répertoire par module.
Le nom du répertoire doit être identique au module que l'on souhaite surcharger. Les fichiers contenus dans ce répertoire remplacent les fichiers des modules.
Chaque répertoire de module peut contenir les fichiers .tpl ou .css que l'on souhaite remplacer.
Pour en savoir plus sur la personnalisation d'un thème, vous pouvez consulter cet article.
D'une manière générale il est préférable de modifier un thème que de modifier le module. Cela permet notamment de faciliter les mises à jours des modules.