77 Rue Clemenceau, 54820 Marbache +33 03 83 56 65 20 +33 06 87 42 95 30

Le personnaliseur de thème est un outil inclus dans le framework EF4 qui permet de changer les styles LESS liés au design du template sans avoir à modifier les fichiers du template. Toutes les modifications que vous pouvez prévisualiser dans le frontend grace à un panneau convivial de même que vous pouvez enregistrer vos modifications directement dans les paramètres du template.

personaliseur1

Cet outil vous permet de changer le design du template rapidement et en toute simplicité.

Retrouvez ces fonctionnalités dans l'article suivant.

Activez le panneau

Tout d'abord, vous devez activer le panneau du Personnaliseur de Theme.
Rendez-vous dans les paramètres du template de votre Joomla back-end :

Extensions -> Templates -> [nom_du_template]

Cliquez sur l'onglet fonctionnalités avancées et vous verrez les paramètres suivants qui sont associés au personnaliseur de thème :


  personaliseur2

étape 1 : cliquez sur l'onglet Fonctionnalités avancées

étape 2 : Activez le personnaliseur de thème dans le front-end pour le voir apparaître.

Étape 3 : Activez le module de login dans le personnaliseur de thème si vous voulez enregistrer vos modifications depuis le frontend.

Personnaliser et prévisualiser les modifications

Panneau personnaliseur de Thème dans le front-end :


personaliseur3

Étape 1 : Appliquez les modifications que vous voulez faire sur votre site web.

Étape 2 : Faites un un aperçu de vos changements.

Étape 3 : Vous pouvez remettre vos paramètres à zéro.

Étape 4 : Connectez-vous pour pouvoir enregistre vos paramètres.

Enregistrer les paramètres

Si vous vous connectez au panneau personnaliseur de thème, vous verrez des boutons supplémentaires pour enregistrer vos paramètres :

personaliseur4

1. Enregistrer.

Lorsque vous cliquez sur « Enregistrer », tous les paramètres du personnaliseur de thème seront sauvegardés pour le template actuel (les styles par défaut seront écrasés).

2. Sauver JSON.

Lorsque vous cliquez sur le bouton « sauver Json » (save as file), tous les paramètres du personnaliseur de thème seront enregistrés comme fichier de configuration JSON et le template actuel gardera ses styles par défaut. Si vous en avez besoin, vous pouvez charger le fichier de configuration pour remplacer les styles par défaut. Ceci peut être fait sur l'onglet « Stockage des Paramètres » dans les paramètres du template :

personaliseur5

Dans notre exemple, nous allons ajouter un paramètre pour modifier la couleur d'arrière-plan du pied de page.
Pour afficher un paramètre dans le personnaliseur, il doit exister dans les paramètres du template.

Ajouter un nouveau paramètre aux paramètres du template

Commençons par créer un nouveau paramètre de template.

Étape 1:Ajouter le style au fichier LESS

Tout d'abord, nous devons ajouter le style qui affiche la couleur d'arrière-plan pour la zone de pied de page:

#jm-footer {background: @JMfooterBackground;}

@JMfooterBackground – Il s'agit d'une variable LESS qui contiendra des informations sur la couleur sélectionnée.

Le style doit être situé dans le fichier layout.less, étant donné que ce fichier contient tous les styles associés à la mise en page du template.

NOTE: la variable LESS doit être précédé des lettres JM.

Étape 2:Définir un nouveau paramètre

Modifiez le fichier templateDetails.xml qui se trouve dans le répertoire suivant :

/templates/[nom-du-template]/

Tous les paramètres qui apparaissent dans l'onglet Modifications de couleur sont situés dans le groupe suivant :

<fields name="params">     <fieldset name="jmcolormodifications" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">     <!-- PARAMETERS -->     </fieldset> </fields>

Tout d'abord, définir un nouvel espacement pour notre paramètre :

<field name="spacer_name" type="spacer" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER"/>

Deuxièmement, définir un nouveau paramètre :

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR"  description="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC" />

Le nom du champ doit être le même que le nom de la variable LESS, dans notre exemple, il s'agit de : JMfooterBackground.

Étape 3:Stocker un nouveau paramètre

Modifiez le fichier jm_template.php qui se trouve dans le répertoire suivant :

/templates/[nom-du-template]/lib/

Ajoutez le code suivant:

$footerbackground = $this->params->get('JMfooterBackground', '#333333');  $bootstrap_vars['JMfooterBackground'] = $footerbackground;

$footerbackground - nom de la variable PHP
JMfooterBackground - nom de la variable LESS
#333333 - valeur par défaut de la variable LESS

Observons l'exemple :

class JMTemplate extends JMFTemplate {     public function postSetUp() {                  /*  put your code below other code within this class */              $footerbackground = $this->params->get('JMfooterBackground', '#333333');          $bootstrap_vars['JMfooterBackground'] = $footerbackground;                  /* make sure the following code is always the last one in this class */                  $this->params->set('jm_bootstrap_variables', $bootstrap_vars);          } }

 

Étape 4:Définir les constantes de langage

Modifier en-GB.tpl_[nom_template].ini qui se trouve dans le répertoire suivant:

/templates/[nom-du-tempalte]/language/en-GB/

ou

/templates/[nom-du-tempalte]/language/fr-FR/

si vous avez une version francisée

Définir les constantes du langage utilisées dans notre exemple :

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Pied de page" PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background" PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choisissez la couleur d'arrière plan pour votre pied de page au lieu de la couleur grise."

Maintenant, notre nouveau paramètre devrait être visible dans l'onglet Modifications de couleur :

 

Ajouter un nouveau paramètre au personnaliseur de thème

Maintenant, nous sommes prêts à ajouter un paramètre au panneau Personnaliseur de Theme.

Étape 1:Définir un nouveau paramètre

Modifiez le fichier templateDetails.xml qui se trouve dans le répertoire suivant :

/templates/[nom-du-template]/

Tous les paramètres qui apparaissent sur le personnaliseur se trouvent du panneau dans le groupe suivant :

<fields name="themecustomiser">     <fieldset name="th-basic-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">         <!-- COLOR PARAMETERS -->     </fieldset>     <fieldset name="th-font-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FONT_SETTINGS_LABEL">         <!-- FONT PARAMETERS -->     </fieldset> </fields>

Tout d'abord, définir un nouvel espacement pour notre paramètre :

<field type="jmacchelper" hidden="true" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER" name="Footer" />

Deuxièmement, définir un nouveau paramètre :

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR" />

Le nom du champ doit être le même que le nom de la variable LESS, dans notre exemple, il s'agit de : JMfooterBackground.

Étape 4: Définir les constantes de langage

Modifier en-GB.tpl_[nom_template].ini qui se trouve dans le répertoire suivant:

/templates/[nom-du-template]/language/en-GB/

ou

/templates/[nom-du-tempalte]/language/fr-FR/

si vous avez une version francisée

Définir les constantes du langage utilisées dans notre exemple :

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Pied de page" PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background" PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choisissez la couleur d'arrière plan pour votre pied de page au lieu de la couleur grise."

NOTE: Dans notre exemple, les constantes de langue sont les mêmes pour les paramètres de template et le Personnalisateur de thème, mais vous pouvez en utiliser des différents pour chacun d'eux si vous en avez besoin.

Maintenant, notre nouveau paramètre devrait être visible sur le panneau du personnaliseur :