Migrer un thème vers une nouvelle version

Mettre à jour son thème 4.1 en 5.0

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 25/01/2016 à 00h25
Table des matières
  1. Avant de commencer
  2. Le fichier de configuration
  3. Les fichiers tpl
    1. Le fichier body.tpl
    2. Le fichier body.tpl
# EN COURS #

Nous allons voir au fil de cet article la manière de modifier un thème 4.1 afin de pouvoir l'utiliser sur la version 5.0 de PHPBoost.

Avant de commencer




La mise à jour 5.0 de PHPBoost est une mise à jour à la fois mineur et majeur au niveau de la partie graphique.

Elle est mineure car nous n'avons pas renommer de classe ou autre comme la version précedente. En revanche, nous avons introduit le responsive nativement dans le thème de base ce qui à pour effet d'augmenter sensiblement le nombre de ligne de code.

Pour rendre le thème responsive, nous avons choisis d'utiliser les medias-queries dans les fichiers CSS. Cette solution est la plus pratique de notre point de vue, mais elle complexifie le code en ajoutant un certain nombre de ligne supplémentaire.

Du fait de l'ajout massive de ligne de code, la conversion d'un thème sera longue si vous souhaitez le rendre responsive ou très simple si vous ne souhaitez que le rendre compatible.

Pour rendre le code CSS plus lisible, nous avons découper les fichiers css existant en plusieurs fichiers plus petit.

Nous allons voir ci-dessous les étapes à réaliser pour rendre le thème compatible avec la version 5.0 et les modifications à entreprendre pour retrouver votre thème sur cette nouvelle version.

Les modifications présentés dans cet article n'intègrent pas les différents éléments que vous auriez pu ajouter ou modifier dans vos fichiers



Le fichier de configuration




La première étape pour rendre le thème compatible est de modifier la compatibilité dans le fichier config.ini.

Code TEXT : 
compatibility=4.1
à remplacer par
Code TEXT : 
compatibility=5.0


A partir de cette étape, le thème peut être installé via le panneau d'administration. Il sera presque entièrement fonctionnel

Les fichiers tpl




Il y a quelques modifications dans les fichiers tpl. L'ajout des fichiers css notamment.

Le fichier body.tpl


  • Modification du style css du logo.
    Code HTML : 
    background-image: url('{HEADER_LOGO}');
  • Nous avons ajouté un nouveau conteneur pour les menus du top-header.
    Code HTML : 
    <div id="top-header-content">
  • L'appel des menus changent. Le code
    Code HTML : 
    {MENUS_HEADER_CONTENT}
    devient
    Code HTML : 
    # START menus_header #
{menus_header.MENU}
# END menus_header #


    Code 4.1 Code 5.0
    Code HTML : 
    {MENUS_HEADER_CONTENT}
    Code HTML : 
    # START menus_header #
{menus_header.MENU}
# END menus_header #
    Code HTML : 
    {SUB_HEADER_CONTENT}
    Code HTML : 
    # START menus_sub_header #
{menus_sub_header.MENU}
# END menus_sub_header #
    Code HTML : 
    {MENUS_LEFT_CONTENT}
    Code HTML : 
    # START menus_left #
{menus_left.MENU}
# END menus_left #
    Code HTML : 
    {MENUS_RIGHT_CONTENT}
    Code HTML : 
    # START menus_right #
{menus_right.MENU}
# END menus_right #
    Code HTML : 
    {MENUS_TOPCENTRAL_CONTENT}
    Code HTML : 
    # START menus_top_central #
{menus_top_central.MENU}
# END menus_top_central #
    Code HTML : 
    {MENUS_BOTTOMCENTRAL_CONTENT}
    Code HTML : 
    # START menus_bottom_central #
{menus_bottom_central.MENU}
# END menus_bottom_central #
    Code HTML : 
    {MENUS_TOP_FOOTER_CONTENT}
    Code HTML : 
    # START menus_top_footer #
{menus_top_footer.MENU}
# END menus_top_footer #
    Code HTML : 
    {MENUS_FOOTER_CONTENT}
    Code HTML : 
    # START menus_footer #
{menus_footer.MENU}
# END menus_footer #
  • Afin de permettre l'affichage des alertes noyaux, ajouter la ligne
    Code HTML : 
    # INCLUDE KERNEL_MESSAGE #
    juste avant
    Code HTML : 
    {CONTENT}
  • Ajouter la version de PHPBoost dans le footer après "PHPBoost"
    Code HTML : 
    {PHPBOOST_VERSION}




Le fichier body.tpl


  • Dans le head, il faut modifier le charset
    Code HTML : 
    <meta charset="iso-8859-1" />
    par
    Code HTML : 
    <meta charset="windows-1252" />
  • Dans le head, juste après la description, supprimer les mots clés.
    Code HTML : 
    <meta name="keywords" content="{SITE_KEYWORD}" />
  • Dans le head, juste après la description, supprimer la version de PHPBoost à "PHPBoost".
    Code HTML : 
    <meta name="generator" content="PHPBoost" />
  • Afin de bien gérer les medias-queries, ajouter à la suite des meta
    Code HTML : 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  • Ajouter les nouveaux fichiers dans le cache-manager et juste en dessous pour le sans cache.
    Code HTML : 
    <!-- 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 #
 






# EN COURS #