Structure d'un thème

Nous allons présenter, ici, la structure d'un thème PHPBoost 5.0.

Nous avons pris pour exemple le thème de base.
De plus au niveau de l'architecture globale, les thèmes se situent dans le dossier /templates/


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-image: url('{HEADER_LOGO}');"# 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-content">
            # IF C_MENUS_HEADER_CONTENT #
                # START menus_header #
                {menus_header.MENU}
                # END menus_header #
            # ENDIF #
            </div>
        </div>
        <div id="sub-header">
            <div id="sub-header-content">
            # IF C_MENUS_SUB_HEADER_CONTENT #
                # START menus_sub_header #
                {menus_sub_header.MENU}
                # END menus_sub_header #
            # ENDIF #
            </div>
            <div class="spacer"></div>
        </div>
        <div class="spacer"></div>
    </header>
    <div id="global">
        # IF C_COMPTEUR #
        <div id="compteur">
            <span class="text-strong">{L_VISIT} : </span>{COMPTEUR_TOTAL}
 
            <span class="text-strong">{L_TODAY} : </span>{COMPTEUR_DAY}
        </div>
        # ENDIF #
        # IF C_MENUS_LEFT_CONTENT #
        <aside id="menu-left">
            # START menus_left #
            {menus_left.MENU}
            # END menus_left #
        </aside>
        # ENDIF #
        <div id="main" class="# IF C_MENUS_LEFT_CONTENT #main-with-left# ENDIF ## IF C_MENUS_RIGHT_CONTENT # main-with-right# ENDIF #" role="main">
            # IF C_MENUS_TOPCENTRAL_CONTENT #
            <div id="top-content">
                # START menus_top_central #
                {menus_top_central.MENU}
                # END menus_top_central #
            </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>
                # INCLUDE KERNEL_MESSAGE #
                {CONTENT}
            </div>
            # IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
            <div id="bottom-content">
                # START menus_bottom_central #
                {menus_bottom_central.MENU}
                # END menus_bottom_central #
            </div>
            # ENDIF #
        </div>
        # IF C_MENUS_RIGHT_CONTENT #
        <aside id="menu-right">
            # START menus_right #
            {menus_right.MENU}
            # END menus_right #
        </aside>
        # ENDIF #
        <div class="spacer"></div>
    </div>
        # IF C_MENUS_TOP_FOOTER_CONTENT #
        <div id="top-footer">
            # START menus_top_footer #
            {menus_top_footer.MENU}
            # END menus_top_footer #
            <div class="spacer"></div>
        </div>
        # ENDIF #
    <footer id="footer">
        # IF C_MENUS_FOOTER_CONTENT #
        <div class="footer-content">
            # START menus_footer #
            {menus_footer.MENU}
            # END menus_footer #
        </div>
        # ENDIF #
        <div class="footer-infos">
            <span>
                {L_POWERED_BY} <a href="http://www.phpboost.com" title="PHPBoost">PHPBoost</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=5.0.1
date="24/02/2016"
compatibility=5.0
require_copyright=0
html_version=5.0 Strict
css_version=3.0
columns_disabled=right
variable_width=0
width="1024px"
pictures="theme/images/theme.jpg,theme/images/admin.jpg"

Sur les thèmes officiels autre que celui de base, vous trouverez une dernière ligne qui permet de surveiller les mises à jour pour le thème.
Code TXT :
repository="https://dl.phpboost.com/unofficial_templates.xml"

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="windows-1252" />
# IF C_DESCRIPTION #<meta name="description" content="{SITE_DESCRIPTION}" /># ENDIF #
<meta name="generator" content="PHPBoost" />
# IF C_CANONICAL_URL #<link rel="canonical" href="{U_CANONICAL}" /># ENDIF #
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- 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/content.css;/templates/{THEME}/theme/table.css;/templates/{THEME}/theme/form.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/cssmenu.css')}" type="text/css" media="screen, print" />
# ELSE #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
<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/content.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/table.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/form.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/cssmenu.css" type="text/css" media="screen" />
# ENDIF #
# IF C_CSS_LOGIN_DISPLAYED #<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/login.css" type="text/css" media="screen" /># 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 7 fichiers CSS suivant :
  • content.css : Il contient les classes propres au contenu du site (messages, modules).
  • cssmenu.css : Il contient toutes les classes qui permettent la gestion des menus.
  • design.css : Il contient toutes les classes de mises en forme du sites (Le gros du Design)
  • form.css : Il contient toutes les classes pour la mise en forme des formulaires.
  • global.css : il contient toutes les classes utiles sur le site et communes aux différents modules.
  • login.css : il contient les classes pour un affichage uniquement du login.
  • table.css : il contient les classes de mise en forme des tableaux.
Vous retrouverez le contenu de chaque fichier dans l'article associé à chaque fichier.

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
  • logo.png : Le logo de base
  • theme.png : Un rendu du thème (Vu du site)

La grande différence avec les versions 4.0 et antérieures 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 Remplacer les icones FontAwesome par des images 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 serait 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 le ou 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.
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.


Articles contenus par cette catégorie :  

Fichier content.css
Fichier cssmenu.css
Fichier de configuration d'un thème "config.ini"
Fichier design.css
Fichier form.css
Fichier global.css
Fichier login.css
Fichier table.css
Cette page a été vue 9388 fois