Dans cette partie nous allons étudier comment créer un module chrome personnalisé et comment le lier à un template géré par Gantry.

Le module Chrome permet aux designer et utilisateurs Joomla! d’avoir un meilleur contrôle de l’affichage des modules dans leur template. Chrome est constitué de bibliothèques pré-définies codées en html, soutenues par du CSS. Le tout permet de styler très rapidement la présentation grâce à des codes d’intégration : none, table, xhtml, rounded et outline...

Etape 1: Préparation

Choisissez le nom de la position de votre module personnalisé. Dans notre cas, nous allons utiliser "exemple" comme nom du module Chrome personnalisé.

Etape 1: Modifier html/modules.php

Ouvrez html/modules.php et descendez en bas du document. Nous devons créer une nouvelle fonction comme dans l'exemple ci-dessous où nous utilisons notre nom"exemple" après modChrome_

function modChrome_exemple($module, &$params, &$attribs) { ... }

À l'intérieur de cette fonction, nous pouvons personnaliser ensuite comment le module apparaîttra lors du rendu du template. Dans cet exemple nous allons garder les choses simples en ajoutant un wrapper autour du contenu et le titre.

exemple:

function modChrome_exemple($module, &$params, &$attribs)
  {
   if (!empty ($module->content)) { ?>
    <div class="exemplewrapper">
      <h2><?php echo $module->title; ?></h2>
     <div class="exemplecontent">
      <?php echo $module->content; ?>
     </div>
    </div>
   <?php endif;
  }

 

Après avoir enregistré, cette mise en page de module personnalisée sera désormais disponible pour Gantry.

Etape 3: Ajout de Module personnalisé à Gantry

Ouvrez le fichier index.php du template et trouvez la ligne de position de modules à laquelle vous voulez appliquer votre mise en page personnalisée. Dans le troisième paramètre ajoutez le nom que vous avez donné à votre fonction CHrmoe de module après le _ , ce qui dans notre cas est "exemple".
Voir exemple ci-dessous :

<?php echo $gantry->displayModules('top','standard','exemple'); ?>

Si vous souhaitez appliquer ceci aux barres latérales du corps principal, la mise en page ressemblera à ce qui suit :

<?php echo $gantry->displayMainbody('mainbody','sidebar', sidebarchromelayout, contenttoplayoutname, contenttopchromename, contentbottomlayoutname, contentbottomchromename); ?>

 

Tout module placé dans cette position va maintenant utiliser ce format d'affichage.

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels