Mettre à jour son thème 4.1 en 5.0

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 mineure et majeure au niveau de la partie graphique.

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

Pour rendre le thème responsive, nous avons choisi 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 lignes supplémentaires.

Du fait de l'ajout massif de lignes 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 existants en plusieurs fichiers plus petits.

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ées 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.

à remplacer par

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 noyau, 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 frame.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 :

   
  # 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 #
   

  
  
  

Les fichiers css

Le passage de la version 4.1 à la version 5.0 intègre une modification qui a un impact non négligeable sur les fichiers CSS. Par défaut, le thème de base est responsive. Cela veut dire qu'il peut s'adapter à des écrans de smartphone, des tablettes ou à un affichage standard sur ordinateur.

Pour se faire, nous avons utilisé les média queries pour ajuster chaque classe CSS en fonction du besoin. De ce fait, convertir un thème v4.1 pour le rendre responsive est une tâche très très lourde.

Nous vous conseillons vivement l'approche inverse qui consiste à refaire votre thème à partir du thème de base déjà responsive. Même si à première vue cela veut dire recommencer un thème, cette tâche sera beaucoup plus rapide que celle de bidouiller votre thème pour le rendre responsive.

L'introduction des médias queries nous a obligé à découper le code css dans plusieurs fichiers. Les fichiers design.css, content.css, global.css existaient sur la version 4.1, la version 5.0 intègre maintenant en plus les fichiers cssmenu.css, form.css, table.css et login.css.

Dans les paragraphes suivants, nous allons détailler les modifications majeures entre la v4.1 et la v5.0 pour vous permettre de vous y retrouver.

Nous ne ferons pas le détail de toutes les classes CSS créées afin de simplifier le travail des designers car elles sont assez nombreuses.

N'oubliez pas que la meilleur façon de retrouver une classe CSS dans un fichier est d'utiliser les outils "examiner l’élément" de votre navigateur en désactivant le cache CSS.

design.css

élément	Position V4.1	Position V5.0
html {}	default.css	design.css
#top-header-content {}	nouvelle classe pour gérer le contenu du top-header	design.css
#sub-header-content {}	nouvelle classe pour gérer le contenu du sub-header	design.css
.main-with-left {}	nouvelle classe pour indiquer dans le main si une colonne gauche existe	design.css
.main-with-right {}	nouvelle classe pour indiquer dans le main si une colonne droite existe	design.css

content.css

élément	Position V4.1	Position V5.0
table {}	content.css	Toutes les classes liées aux tableaux sont maintenant dans le fichier table.css
button, .button {}	content.css	Toutes les classes liées aux boutons sont maintenant dans le fichier form.css
.fieldset {}	content.css	Toutes les classes liées aux formulaires sont maintenant dans le fichier form.css
input, textarea {}	content.css	Toutes les classes liées aux formulaires sont maintenant dans le fichier form.css

Ce qui fait que l'on retrouve maintenant dans le fichier content.css les éléments suivants :

• conteneurs généraux, éléments de module,
• pagination des pages,
• explorateur de catégorie,
• gestion des catégories,
• mini-module,
• message postes,
• profile user,
• maintenance,
• contribution,
• erreur 403/404.
  
  

Les éléments en vert correspondent à des nouveautés, les éléments en bleu correspondent à des classes venant d'un autre fichier.

global.css

élément	Position V4.1	Position V5.0
.dynamic-menu {}	global.css	Toutes les classes liées aux menus sont maintenant dans le fichier cssmenu.css
#message-maintain {}	global.css	la partie maintenance a été déplacée dans le fichier content.css

Ce qui fait que l'on retrouve maintenant dans le fichier global.css les éléments suivants :

• Mise en forme du texte,
• Mise en forme du contenu
• Les Icones specifiques PHPBoost de FontAwesome
• Système d'upload
• social connect
  
  

Les éléments en vert correspondent à des nouveautés, les éléments en bleu correspondent à des classes venant d'un autre fichier.

table.css

Le fichier étant nouveau, le plus simple est supprimer les classes tableaux du fichier content.css et de copier le fichier table.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) que vous aviez sur la v4.1.

form.css

Le fichier étant nouveau, le plus simple est supprimer les classes des formulaires du fichier content.css et de copier le fichier form.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) que vous aviez sur la v4.1.

cssmenu.css

Le système de menu à complètement été revu dans la v5.0 afin de le rendre responsive. Le fichier étant nouveau, le plus simple est supprimer les classes menu du fichier global.css et de copier le fichier cssmenu.css dans votre thème. Il vous suffira de modifier les quelques éléments de styles (color, size) pour ajuster à votre design.

login.css

Le fichier étant nouveau, il vous suffit de le copier dans votre thème. Vous pourrez adapter les éléments en fonction du design que vous souhaiterez.

Méthode conseillée pour la migration

Comme nous avons pu le voir au travers des différents paragraphes, le passage à la V5.0 demande un investissement du designer. Mais la cause de cette investissement est due à la responsivité.

Pour finir, nous allons vous expliquer la méthode que nous avons utilisé pour migrer les thèmes officiels. Malgré l'attente que vous avez observé de votre coté, la migration de chaque thème ne nous a pas demandé beaucoup d'effort.

Tous d'abord, nous avons utilisé une installation de la V4.1 avec le thème pour bien avoir le rendu final souhaité.

Sur une installation de la V5.0, nous avons :

• copié le thème V4.1
• modifié le fichier config.ini pour le rendre compatible.
• déplacé ailleurs les répertoires modules/framwork/admin pour ne pas avoir de soucis de compatibilité
• remplacé les fichiers tpl et css par les fichiers du thème base.

A partir de cette étape, le thème est identique aux thèmes de base.

La prochaine étape consiste à retrouver le design que nous avions sur la V4.1.

• déplacer les classes dans le fichier body.tpl pour retrouver la structure de la V4.1
• recopier les attributs des classes CSS de la version v4.1 vers la version v5.0

A partir de cette étape, le design du thème est identique à la version v4.1.

L'étape suivante consiste à ajuster les couleurs de liens etc. Pour ce faire, il est conseillé d'utiliser le module "bac à sable" qui permet sur une seule page d'avoir tous les éléments.

• recopier les attributs des classes de la version v4.1 vers la version v5.0

Pour finir, il est nécessaire de refaire les modifications sur les modules/framework/administration que vous aviez surchargés.

• re-créer les répertoires modules (framework / administration) dans le thème
• copier le fichier tpl ou css en partant bien de la version v5.0
• appliquer les modifications HTML que vous auriez pu faire sur la v4.1
• recopier les attributs des classes CSS de la version v4.1 vers la version v5.0

Et voilà, votre thème est maintenant converti pour la v5.0 et il est responsive.

La responsivité

Bien sûr la responsivité que nous avons prévu n'est peut-être pas celle que vous souhaitez. Si vous souhaitez un comportement différent, il vous suffit d'ajuster les médias-queries.

Lorsque vous lirez le code, vous trouverez 3 types d'écriture pour gérer l'affichage.

• La partie classique qui s'affichera sur tous les écrans sans restrictions particulière.
  Code CSS :

   .ma-classe-css { mesattributs: valeurs; }

• La partie qui ne s'affichera que sur les écrans larges.
  Code CSS :

   @media (min-width: 769px) {.ma-classe-css { mesattributs: valeurs; } }

• La partie qui ne s'affichera pas sur les écrans larges.
  Code CSS :

   @media (max-width: 768px) {.ma-classe-css { mesattributs: valeurs; } }

  
  
  

Bien sûr il existe des variantes pour faire en fonction de la taille d'écran que l'on souhaite prévoir.