+33 03 83 56 65 20 +33 06 87 42 95 30

GANTRY

pour les … néophytes.

Guide d’emploi

 (Auteur Philippe Mignotte )

Téléchargement libre

La personnalisation des articles dans Joomla se réalise sans difficulté sans avoir la moindre connaissance d'un langage informatique.
Faire de même pour leur mise en page est une opération plus complexe.
Le plus souvent il faut rechercher un template (gratuit ou non) voisin de ce que l'on souhaite.
Changer l'apparence de ses blocs qui recevront les modules demande de plonger dans les fichiers CSS dont le langage n'est pas très complexe. Par contre modifier l'emplacement de ces blocs est beaucoup plus ardu … mais il existe des extensions pour faciliter ce travail. Parmi celles-ci : Gantry qui est gratuit, conçu par l'équipe de RocketTheme.com, sous licence OpenSource.

Un des principes fondamentaux du framework Gantry est la possibilité d'être ovverridé. Cela lui permet d'être aussi souple que possible afin de répondre aux besoins d'un site ou d'un template. Gantry vous permets de surcharger les mises en page des modules, des Modules Chromes , des layouts, et propose une plateforme pour les surcharges d'extensions. La partie spécifique que nous allons traité dans ce tutoriel sera la surcharge des fonctionnalités (features)

Qu'est-ce qu'une Fonctionnalité (Feature)?

Une fonctionnalité est un élément autonome qui ajoute une utilité spécifique au template. Elles améliorent les fonctionnalités du template et peuvent être configurées de façon générale, ou pour des éléments de menu spécifiques à l'aide de l'interface administrateur Gantry.

Les fonctionnalités sont situées dans /libraries/gantry/features/ et incluent un grand choix de différents types tels que la date, le Copyright, et le logo. Il existe de nombreuses autres fonctionnalités par défaut inclus.

Voici un exemple de la fonctionnalité /libraries/gantry/features/copyright.php :

    <?php
    defined('JPATH_BASE') or die();
    gantry_import('core.gantryfeature');
    class GantryFeatureCopyright extends GantryFeature
    {
      var $_feature_name = 'copyright';
      function render($position)
       {
       ob_start();
      ?>
       <div class="clear"></div>
         <div class="rt-block">
           <a href="https://www.rockettheme.com/" title="rockettheme.com" id="rocket"></a>
           <?php echo $this->get('text'); ?>
         </div>
      <?php
      return ob_get_clean();
      }
    }

Il y a plusieurs éléments dans une fonctionnalité. D'abord, le code suivant définit le fichier comme une fonctionnalité Gantry, important les fonctions nécessaires:

    <?php
      defined('JPATH_BASE') or die();
      gantry_import('core.gantryfeature');

Ensuite, la fonctionnalité est alors différenciée par un nom, dans ce cas, GantryFeatureCopyright et 'copyright':

    class GantryFeatureCopyright extends GantryFeature
    {
      var $_feature_name = 'copyright';

Juste après le nommage de la fonctionnalité, il y a un code de traitement complémentaire qui ne devrait pas être modifié.

    function render($position)
    {
    ob_start();
    ?>

La prochaine zone de la fonctionnalité est la mise en page XHTML, à laquelle vous pouvez ajouter votre code XHTML personnalisé à l'intérieur:

    <div class="clear"></div>
    <div class="rt-block">
    <a href="https://www.rockettheme.com/" title="rockettheme.com" id="rocket"></a>
    <?php echo $this->get('text'); ?>
    </div>

Après la structure XHTML, vous terminez la fonctionnalité avec ce qui suit:

    <?php
    return ob_get_clean();
    }
    }

Surcharger une fonctionnalité Gantry

Gantry permet aux fonctionnalités d'être surchargées  soit en créant une copie directement de la fonction depuis  /libraries/gantry/features/ou en créant un nouveau fichier feature.php file dans /templates/[TEMPLATE]/features/.

A feature file must follow the format in the section above. There is, in effect, two areas of modification. The first is the name that must be unique. The second is the XHTML layout where you can construct the feature's structure to meet your ends.

Les fonctionnalités et l'Administrateur

Selon le niveau de modification que vous envisagez pour une fonctionnalité particulière, vous pouvez vouloir éditer ses paramètres. Pour cela vous devrez modifier le fichier /templates/[TEMPLATE]/template-options.xml .

L'élément concerné de ce fichier XML commence par:

<fieldset name="features" label="FEATURES">

Ici vous pouvez repérer le(s) champ(s) pour la fonctionnalité que vous souhaitez modifier comme copyright:

    <fields name="copyright" type="chain" label="COPYRIGHT" description="COPYRIGHT_DESC">
       <field name="enabled" type="toggle" default="0" label="SHOW" />
       <field name="position" type="position" default="copyright-a" label="POSITION" />
       <field name="text" type="text" default="Designed by RocketTheme" label="TEXT" class="text-long" />
    </fields>

Pourquoi vouloir installer un deuxième template gantry ?

Il peut arriver, pour diverses raisons, que nous ayons besoin d'installer un template pour une partie d'un site, et un autre pour le reste.

Avec la gestion des styles de template, on pourrait penser que cela se fait facilement, simplement en créant des styles différents et en les assignant.

Mais ce ne sont que des styles différents du même template, et quand on veut modifer les layouts en profondeur, il est parfois nécessaire d'installer deux templates.

Sauf que les templates gantry par défaut se nomment de la même manière, comment donc procéder ?

Installez le premier template.

La procédure est simple, il suffit de faire une installation classique d'un bundle (framework + template), ou d'un template si vous avez déjà installé le framework Gantry.

installe gantry

Vous vous retrouvez avec un template gantry dans la gestion des templates, et donc dans votre ftp ou dans vos dossiers locaux si vous travaillez en local.

Renommez le dossier de votre template.

Depuis votre logiciel ftp ou le gestionnaire des dossiers de votre système d'exploitation, renommez votre template (ici nous allons le nommer gantry_bis).

Chemin : templates/gantry devient templates/gantry_bis

 

Installez le second template.

Cette fois-ci, il nous faudra juste installer le template puisque le framework est déjà installé.

installe gantry seul

Nous nous retrouvons donc avec un template gantry que nous voyons dans la gestion des templates, et un template gantry_bis que nous ne voyons pas encore.

Découvrez le template renommé.

Nous allons passer par une fonctionnalité de Joomla 2.5 : le mode découverte.

allez dans gestion des extensions : onglet découvrir

onglet découvrir

Puis cliquez sur découvrir en haut à droite.

bouton decouvrir

Selectionnez Gantry et installez en haut à droite ...

install gantry success

 

Vous avez désormais deux templates Gantry, indépendants les uns des autres.

 

 

 

 

 

Ce tutoriel vous guidera à travers les étapes nécessaires pour ajouter une feuille de style personnalisée à votre template Gantry sans se soucier des modifications perdues lorsque le template ou le framework gantry sont mis à jour. Nous n'avons pas besoin de modifier les fichiers du template, de sorte que notre feuille de style personnalisée ne sera pas remplacée lors de mises à jour.

Feuille de style personnalisée avec CSS

Le template Gantry est fourni avec des règles et des propriétés CSS structurées qui sont compilées depuis les fichiers LESS. Cependant, il y a des cas ou nous avons besoin de styliser notre template sans se servir de LESS. Une des manières de le faire est l'utilisation d'une feuille de style personnalisée avec des propriétés CSS propres afin de surcharger un certain style dans le template.

Étape 1: Ajout de votre fichier CSS personnalisé

Pour créer un fichier CSS personnalisé, il vous suffit de créer un nouveau fichier css à /templates/[TEMPLATE]/css/ et de le nommer [TEMPLATE]-custom.css. Le nouveau fichier css personnalisé sera automatiquement chargé par le framework Gantry.

template custom css

Étape 2: Ajout de vos règles et propriétés personnalisées

Vous pouvez maintenant ajouter des règles personnalisées et des propriétés à l'intérieur du fichier [TEMPLATE]-custom.css pour personnaliser votre template Gantry. Si vous voulez remplacer les règles existantes du template, vous devrez utiliser les Spécificités CSS.

Nous allons voir comment nous utilisons notre feuille de style personnalisée dans l'exemple ci-dessous.

Exemple 1: Surcharger les règles existantes

Dans cet exemple, nous allons vous expliquer comment réduire le padding-bottom et le margin dans la position showcase du default gantry template qui hérite des règles de l'élément rt-block dans rt-showcase.

showcase padding margin

Avec les outils de développement de Chrome, nous pouvons voir que les margin et padding par défaut sont :

  1. .rt-block {padding: 15px; margin: 10px; position: relative;}

Si vous voulez surcharger le padding et le margin du bottom, nous ne pouvons pas nous contenter de mettre les mêmes règles et de seulement changer  la valeur du bottom comme ci-dessous :

.rt-block {padding: 15px 15px 0; margin: 10px 10px 0;}

Il y a beaucoup d'éléments dans le template qui utilisent rt-block et cette règle personnalisée va les affecter. Une autre possibilité est que la règle personnalisée ne fonctionne pas du tout si votre fichier CSS personnalisé est chargé avant le fichier CSS du template qui contient cette règle existante.

Par conséquent, nous devons mettre la règle avec plus de sélecteurs spécifiques. Nous avons besoin de créer un fichier vide css/gantry-custom.css. comme rt-block est compris dans rt-showcase, nous pouvons mettre la règle suivante à l'intérieur de css/gantry-custom.css.

  1. #rt-showcase .rt-block {padding: 15px 15px 0; margin: 10px 10px 0;}

Maintenant, nous pouvons vérifier le résultat avec les outils de développement pour confirmer que notre règle personnalisée remplace la règle existante.

custom css result

Exemple 2 : Feuille de style personnalisée selon les types de navigateurs.

Le Framework Gantry a la capacité de charger un fichier CSS spécifique basé sur le système d'exploitation et le navigateur qui visualise le template. Cette possibilité peut également être appliquée à notre fichier css personnalisé. Vous avez juste besoin de créer un nouveau fichier css à /templates/[TEMPLATE]/css/ et de le nommer [TEMPLATE]-custom-[BROWSER].css. Veuillez consulter la page Contrôle spécifique selon le navigateur pour des combinaisons de noms possibles.

Dans cet exemple, nous allons vous expliquer comment cacher un module spécifique lorsqu'il est vu avec Firefox, mais qui sera visible sur d'autres navigateurs. dans le cas du template gantry default template, nous devons créer /templates/[TEMPLATE]/css/gantry-custom-firefox.css.

hidden module class suffix

Ensuite, nous avons besoin de mettre la règle personnalisée à l'intérieur de /templates/[TEMPLATE]/css/gantry-custom-firefox.css comme ce qui suit.

  1. .rt-hidden-firefox {display: none;}

Maintenant, nous pouvons mettre rt-hidden-firefox dans le Suffixe de classe du module que nous voulons cacher sur Firefox.

hide on firefox

Cliquez sur le bouton Enregistrer & Fermer et verifiez le résultat dans Firefox et les autres navigateurs. Nous verrons que le module ne sera masqué que sur Firefox.

hide on firefox result

La feuille de style personnalisée par Navigateur spécifique ne se limite pas uniquement à montrer ou cacher un module spécifique, on peut aussi utiliser cette capacité par exemple pour créer une nouvelle règle ou surcharger certaines règles existantes pour tout navigateur spécifique, tels que Internet Explorer. Tout dans le CSS peuvt être remplacé en se basant sur le navigateur.

Feuille de style personnalisée avec LESS

Une autre façon d'ajouter du style personnalisé au template Gantry est d'ajouter un fichier personnalisé LESS dans /templates/[TEMPLATE]/less. Le nom de fichier personnalisé LESS est formaté ainsi [LESS_FILE_NAME]-custom.less et ce fichier sera compilé dans le fichier CSS compilé principal.

less file name

Par exemple, dans le template par défaut Gantry, il y a un fichier less/template.less. Nous pouvons mettre un fichier personnalisé LESS appelé less/template-custom.less et mettre nos éléments LESS personnalisés dans ce fichier. Gantry va chercher les éléments et les compiler. Vous pouvez également utiliser des noms de fichiers tels que less/style-custom.less, less/typography-custom.less, et ainsi de suite.

custom less files

La seule limitation du fichier LESS personnalisé est que nous ne pouvons pas utiliser de feuille de style personnalisée spécifique selon le navigateur, tel que less/template-custom-firefox.less. Si vous avez besoin de contrôler certains éléments sur les navigateurs particuliers, nous devrons utiliser le fichier CSS personnalisé décrit précédemment.

Contact

Parlons social

Recevoir des nouvelles du site

 

patenaire paypal