Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 11/03/2014 à 23h53
Table des matières
Avant de commencer
La mise à jour 4.1 de PHPBoost est une mise à jour importante au niveau de la partie graphique.
Cette nouvelle version utilise les langages HTML5, CSS3 et intègre la police d'icône Font-Awesome. Ces évolutions importantes permettrons une personnalisation encore plus simple et rapide des thèmes.
Lors de la refonte du code en HTML5 et CSS3, nous avons simplifié les fichiers .css et repris plusieurs classes CSS. Le code est maintenant plus lisible, mieux organisé et plus performant.
Ces changements ne sont pas sans conséquences sur les thèmes. Les fichiers .css et .tpl ayant été remaniés, la conversion d'un thème 4.0 en 4.1 est beaucoup plus complexe que le passage 3.x à 4.0.
Néanmoins, nous allons voir ci-dessous les éléments nécessaires à faire évoluer pour rendre le thème compatible avec la version 4.1 ainsi que les modifications à entreprendre dans les fichiers .tpl et .css.
La structure du répertoire des thèmes
Dans ce paragraphe, nous allons détaillé les modifications a effectué dans l'organisation du répertoire des thèmes.
La configuration du thème
Le répertoire "config" est renommé en "lang".
Le fichier "config.ini" est découpé en deux parties.
- La première partie du fichier est renommé en "desc.ini" et contient les éléments identifiants le thème dans chaque langue.
Code TEXT :name="Base" desc="The PHPBoost official theme." main_color="White, Blue"
- La seconde partie du fichier est déplacée à la racine du thème dans un nouveau fichier "config.ini". Il contient les éléments techniques du thème :
Code TEXT :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"
Les fichiers "index.php" des répertoires /config/french et /config/english peuvent être supprimés
A partir de cette étape, le thème peut être installé via le panneau d'administration, mais celui-ci ne sera pas fonctionnel
Les fichiers header.tpl et footer.tpl
Les fichiers "header.tpl" et "footer.tpl" ont été modifiés et remplacés par les fichiers "frame.tpl" et "body.tpl". Nous reviendrons sur le contenu dans les prochains paragraphes. Le "regroupement" du contenu du body dans le même fichier rend les modifications beaucoup plus simple.
Le fichier "frame.tpl" contient la partie structurante de la page html :
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 fichier "body.tpl" contient le contenu du <body> :
Code HTML :
# INCLUDE MAINTAIN #
<header id="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>
<div id="top-header">
# 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>
<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://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>Les fichiers CSS
Le fichier "print.css" a été déplacé dans le répertoire "default.css", il peut donc être supprimé du thème.
Le contenu du fichier "generic.css" a été déplacé dans les autres fichiers CSS du thème ou dans le ficher "default.css", il peut donc être supprimé du thème.
Les fichiers images du répertoire /theme/images
Sauf fichier spécifique pour votre thème, le répertoire /theme/images ne contient que les fichiers suivants :
- global.png
- logo.png
- theme.jpg
- admin.jpg