Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 20/06/2014 à 17h14
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 plus 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 étapes à réaliser pour rendre le thème compatible avec la version 4.1.
Modification de la structure du thème
Dans ce paragraphe, nous allons détaillé les modifications à effectuer dans l'organisation du répertoire des thèmes afin de le rendre installable. Pour bien comprendre la structure du thème, vous pouvez consulter cet article.
Les fichiers de configuration
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.tplet 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 ; 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
Les fichiers images du répertoire /images
Sauf fichier spécifique pour votre thème, le répertoire /images ne contient que le fichier suivant :
- noavatar.png