GANTRY

pour les … néophytes.

Guide d’emploi

(Auteur Philippe Mignotte )

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.

Son intérêt premier est de vous offrir près de soixante-dix emplacements possibles sur chaque page de votre site afin d'y placer vos informations : son « famework » que je traduis par « canevas ».

Ce document a pour objet de vous présenter cet outil puis de décrire la mise en place de vos modules enfin d'ajouter des exemples pour les décorer.

Je ne suis pas informaticien et ne comptez pas sur moi pour autre chose que de vous décrire un mode d'emploi utilisable avec Joomla 2.5 et plus associé à Gantry-4.1.4-bundle. Je n'ai rien inventé non plus, me contentant de synthétiser les informations que j'ai pu glaner ici et là (un squatter en somme qui remercie tout particulièrement ceux que j'aurai oublié de citer plus loin !).

1-Introduction

Le canevas (framework) de Gantry est un outil qui permet de choisir facilement la structure des diverses mises en page de votre site.
En terme plus technique, il vous propose de choisir où positionner vos modules parmi 68 emplacements (blocs) répartis sur toute la surface de la page.

Il présente aussi l'avantage, si vous le désirez, de fonctionner en mode “Responsive“ qui ajuste la présentation du site à son lecteur (micro, tablette ou smart phone).

Pour donner, à chaque bloc ainsi défini, l’aspect (fond, couleurs, polices, …) que vous voulez il vous faut ensuite intervenir dans des feuilles de style … mais essentiellement à base de copier-coller.

2-Installation

2.1-Télécharger Gantry

Gantry propose trois documents différents au téléchargement :

* Bundle: Qui contient le canevas (librairie, composant & plugins), un template modèle (vide de toute information concernant la présentation des informations) et quelques extensions dont RockNavMenu (menu offrant de nombreuses options … sans lien avec Gantry, mais offert en prime).

* Framework: Qui ne propose que le canevas.

* Template: Qui permet de charger le template modèle.

Choisissez le document qui vous convient le mieux : le bundle est recommandé pour une première prise de contact avec Gantry. Le téléchargement se fait à l'adresse : https://www.gantry-framework.org/download

2.2-Installer le bundle Gantry

L'extension Gantry s'effectue par Joomla selon la procédure classique : Extensions / Gestion des extensions / Installation, puis le bouton Parcourir. Localisez le fichier ZIP que vous venez de télécharger et cliquez sur Envoyer & Installer pour lancer lamise en place.

Le nom Gantry * Master apparaît dans le Gestionnaire de templates, les plugins Gantry se trouvent par le Gestionnaire de plugins et RokNavMenu sera accessible depuis le Gestionnaire de modules.

Le composant et la librairie seront cachés, et uniquement accessibles depuis le Gestionnaire d'Extensions à des fins de désinstallation ou de mise à niveau.

2.3-Choisir Gantry

Le canevas Gantry n'est utilisable qu'avec un template Gantry. Dans ce qui suit il s'agira du template modèle téléchargé ci-dessus.

Cliquez sur Gantry * Master pour accéder à ses fonctions.

3-Utilisation

La page qui s'affiche présente les onglets Overview, Style, Features, Menu, Layouts, Advenced et Assignments.

3.1-Positionner les blocs

Pour positionner vos modules dans la page de votre site, activez l'onglet Layouts.

Les différentes positions modulables en nombres et largeur sont visualisées dans le schéma ci-dessous :

Vous n'êtes pas obligé d'utiliser toutes les lignes, et vous pouvez choisir horizontalement le nombre et la taille relative des blocs de chacune. Pour cela :

Sélectionnez à droite (Position Count) et en haut de chaque ligne (Positions) le nombre désiré.
Avec le curseur, choisissez la taille relative des blocs sachant que chaque ligne est constituée de 12 lots égaux. Vous noterez que le Main Body peut être complété horizontalement par des colonnes qui se placent à sa gauche ou à sa droite selon la position du curseur.
Si vous désirez laisser un espace blanc entre deux blocs recevant un module, il vous faut lui attribuer une place dans la ligne et activer le bouton Force Positions.
Terminez par la sauvegarde de vos choix (bouton Save)
Quittez le Template manager (bouton Close).

Nota : Outre les lignes qui sont visualisée ci-dessus le framework en a trois autres de programmées : en dessous de la ligne Header, vous pouvez positionner un module sur une ligne dénommée Drawer et entre les lignes Utility et et MainTop, il en existe deux autres nommées Breadcrumb et FullWidth.

3.2-Assigner des pages

Il vous faut maintenant indiquer à Gantry quelles sont les pages de votre site que vous voulez voir publiées selon cette structure. Pour cela, après avoir défini classiquement dans Joomla, vos menus avec leurs éléments et décidé des modules qui les publieront :

Ouvrez l'onglet Assignments. Vos menus apparaissent avec leurs éléments/liens.
Cliquez ceux que vous voulez voir présentés selon cette mise en forme.
Sauvegardez (bouton Save).

3.3-Attribuer les modules

Vous avez défini par ailleurs les liens qui afficheront la structure ci-dessus, il vous faut maintenant définir dans quel bloc chaque module sera publié.

Ouvrez Gestion des modules dans l'onglet Extension de Joomla.
Affichez successivement chacun des modules que vous voulez attribuer à cette mise en page Gantry et choisissez lui une des positions Gantry que vous avez définies ci-dessus.

3.4-Constater le résultat

Il vous reste à afficher votre site qui aura la disposition que vous avez choisie et la coloration générale du template modèle de Gantry (nous verrons plus loin comment changer cela).

3.5-Définir une autre mise en page

Avec Joomla vous pouvez utiliser plusieurs template pour varier la présentation de votre site selon la page appelée. Pour cela vous pouvez décider d'utiliser (ou non) une nouvelle présentation sélectionnée avec Gantry. Vous pouvez recommencer la procédure ci-dessus en télé-chargeant un nouveau template modèle, mais la fonction Override de Gantry vous permet plus simplement de créer un clone du template modèle.

Ouvrez de nouveau le Template Manager puis Gantry * Master (dont vous aurez, si le cœur vous en dit, changé le nom dans la case Nom du style).
Choisissez une nouvelle disposition de blocs dans le signet Layouts.
Assignez les liens que vous voulez, mais pas ceux déjà attribués : Gantry y perdrait son latin!).
Puisque vous savez que c'est possible, vous pouvez donner un nom de style de votre cru à cette disposition.
Attention, il faut maintenant cliquer sur le petit triangle qui est à droite du bouton Save afin de faire apparaître un menu déroulant dans lequel vous actionnerez Save as copy
Après avoir fermé cette page (bouton Close), vous constaterez qu'un nouveau template est apparu dans la liste et dont l'intitulé contient le mot Override.
Attribuez à cette disposition les modules que vous lui destinez (pas ceux déjà affectés à Gantry *Master!)
En affichant votre site vous aurez pour les liens de menu, l'une ou l'autre disposition, mais dans les tonalités du template modèle.

A noter que vous pouvez aussi utiliser un autre template, par exemple Beez, pour certaines pages.

3.6-Autres fonctions de Gantry

Lorsque vous ouvrez le template Gantry, vous pouvez accéder à d'autres onglets que Layouts ou Assignments. Leur intérêt ne m'apparaît pas primordial pour un débutant comme moi. Il y a :

Overview : mini description de Gantry.
Style : permet de positionner votre logo et de modifier quelques éléments de présentation (aspect foncée ou claire du bandeau situé dans Header, couleur, taille et police de certains liens).
Features : autorise l'insertion de la date, d'un contrôle de la taille des polices lors de la lecture, d'un renvoi en haut de page, d'un copyright, …
Menu : vous pouvez y assigner un menu (déroulant ou non), mais qui disparaît lorsque la largeur de l'écran est réduite : je vous suggère d'utiliser plutôt de mettre en place un menu RockNavMenu qui est inclus dans le bundle que vous avez télé-chargé en sélectionnant le thème “Default Fusion“.
Advanced :

• Le Layout Mode, en position Responsive, ajustera la mise en page de votre site à l'appareil utilisé (PC ou tablette ou smart-phone) pour le visualiser : intéressant !.

• Pour les autres … je ne sais pas trop à quoi ils servent … ni dans quelle position il faut les placer.

A côté du bouton Save, il y a aussi un bouton Presets dont je n'ai pas saisi l'intérêt dans le cadre du template modèle. Pour en savoir plus, je vous renvoi au site de Gantry.

4-Personnalisation

Vous pouvez maintenant souhaiter modifier l'apparence de votre mise en page : couleur des bordures ou fond des blocs ou des polices ou ajout d'images ou …

Il va vous falloir intervenir sur les fichiers eux même, mais pour ne pas être obligé de tout recommencer à chaque mise à jour de Gantry, il faut créer un jeu de fichiers qui resteront inchangé parce que indépendant de Gantry et prioritaires (override) pour imposer vos préférences.

4.1-Créer les fichiers personnalisables

L. Douglas inspiré par Arifin Finly, traduit par S. Billon donne le mode d'emploi suivant :

Créez un fichier intitulé mycustomstyle.php contenant le code suivant :

            <?php

            /**

            * @package Custom Feature (Add custum stylesheet) - RocketTheme

            * @version August 1, 2010

            * @author RocketTheme https://www.rockettheme.com

            * @copyright Copyright (C) 2007 - 2010 RocketTheme, LLC

            * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only

            *

            */

            defined('JPATH_BASE') or die();

            gantry_import('core.gantryfeature');

            class GantryFeatureMyCustomStyle extends GantryFeature {

            var $_feature_name = 'mycustomstyle';

            function isEnabled() {

            return true;

            }

            function isInPosition($position) {

            return false;

            }

            function init() {

            global $gantry;

            //demo styles

            $gantry->addStyle("mycustomstyle.css");

            }

            }

Placez le dans le dossier features du template Gantry que vous voulez personnaliser : templates/“votre-template“-Gantry/features où il sera en compagnie de branding.php ou logo.php ou…

Nota : “votre-template“ est le nom que vous avez choisi pour votre template Gantry.

Créez un autre fichier intitulé mycustomstyle.css avec pour seul contenu :
```
/* Add Your Custom CSS Codes Here */
```

Placez le dans le dossier templates/votre-template-Gantry/css où il cohabitera avec master-ie8.css et quelques autres.
Il recevra vos codes css personnalisés … dont ci-après quelques exemples.

Nota (SB) : depuis la version 4 de Gantry, il est possible de passer cette étape en créant dans le dossier css un fichier intitulé [nom_du_template]-custom.css

4.2-Structure de Gantry

Pour mieux comprendre comment personnaliser les blocs, il est utile de savoir comment le canevas est structuré.

4.2.1-Aspect du fond

Pour comprendre comment modifier les couleurs de fond, il faut savoir que trois couches sont superposées dans Gantry :

Les couches les plus superficielle (qui recouvreront les sous-jacentes sur la surface qui leur est assignée) correspondent aux lignes du framework tel que décrit plus haut et descendent sur 17 niveaux de “Top” à “Analytics“.
On peut les visualiser comme suit :
Des couches intermédiaires peuvent se glisser sous la plupart des précédentes pour couvrir toute la largeur de l'écran, mais pas toutes (Ce template vide de Gantry est parfois un peu curieux …) !
On peut le visualiser comme suit :
A noter que Fullwidth et Body/Sidebar gardent et partagent la même couleur.
Les plus profondes couvrent aussi toute la largeur de la page, mais il n'y en a que 3 qui ne concernent pas toutes les lignes. La première se trouve sous Top + Header, la seconde va de Features à MainBottom (extension d'une existante ci-dessus). Si elles ne sont pas couvertes par les précédentes, elles se situent comme suit :

4.2.2-Personnaliser ces bandes.

- Couleur

Pour programmer les couleurs de votre choix (vous pouvez en mélanger plus de 25 !), il vous faut introduire le code suivant dans le fichier “mycustomstyle.css“ que vous avez créé au chapitre 4.1 ci-dessus.

Le code pour les nuances de la partie centrale (hors FullWidth et Body/Sidebar), si xxxxx est le nom de la ligne (top, header, …, maintop, …, footer) et #yyyyyy, la référence de votre couleur s'écrit :

#rt-xxxxx .rt-container { background: #yyyyyy !important; }
Le code pour les deux autres couches (FullWidth et Body/sidebar) sont du type :

#rt-zzzzz { background: #yyyyyy !important; }

zzzzz est alors soit le xxxxx précédent pour prolonger les lignes correspondantes jusqu'au bord de l'écran, soit les mots
top-surround : pour la couche sous Top + Header
transition : pour tout ce qui est en bleu très clair ci-dessus (de Features à MainBottom)
main : pour la zone bleue Sidebar
mainbody : pour le … body
footer-surround : pour l'ensemble Footer + Copyright

Si le cœur vous en dit, vous pouvez remplacer le code de la couleur par le mot : transparent … pour laisser apparaître celle du dessous.

4.3-Contenu de Gantry avec Firebug

Vous avez maintenant défini la structure de votre site et la couleur de fond de chacun de ses modules. Nous allons maintenant examiner comment personaliser leur contenu (police, alignement, marge, … ).

Pour cela il faut commencer par mettre quelquechose dans les cases (modules) que vous avez sélectionnées : définir vos menus et leur affecter un emplacement, faire de même avec des fonctions comme Rechercher ou S'enregistrer ou Plan du site ou … sans oublier tous vos articles.

Votre site s'affiche, mais vous souhaitez en modifier l'aspect.

Pour les articles, Joomla est équipé de Tiny voire JCE qui vous permettent de réaliser la mise en forme de votre choix, mais il y a les modules,
Comment faire pour en modifier le contenu déterminé par le template Gantry que vous utilisez ? Firebug extension gratuite de Firefox, Chrome, Safari, … va vous permettre de trouver comment faire.

En le publiant dans une partie de la page à analyser, vous pourrez lire le code HTML qui commande l'affichage de son contenu et de visualiser le CSS qui en détermine l'aspect. En modifiant l'un ou l'autre de ces codes vous en constaterez immédiatement l'effet dans le site affiché … sans que cela modifie votre base de données.

4.3.1-Firebug découverte

La première étape est d'en faire connaissance. Le plus simple est d'en consulter un tutoriel comme ceux que l'on peut trouver à :

Vous avez l'embarras du choix.

Chargez maintenant le module Firebug adapté à votre navigateur.

Avec Firefox ou Chrome , le logo de Firebug apparaît en haut à droite de la page.
Avec Safari, il est en haut à gauche.

En cliquant dessus, une fenêtre s'ouvre (par défaut) en bas de page. Activez l'onglet HTML : deux compartiments apparaissent : à gauche, le code html et à droite le CSS.

4.3.2-Firebug utilisation

Le délicat dans la modification du code CSS de Gantry n'est pas tant dans les attributs (couleur, style, alignement, …) que dans l'intitulé du sélecteur auquel vont s'appliquer propriétés et valeurs que vous souhaitez.

Pour faire apparaître les informations de la fraction de votre page que vous désirez modifier, il ya deux possibilités :

Vous cliquez sur <body class … > pour déployer son contenu puis vous survolez les ligne qui sont apparues : certaines parties de votre site deviennent bleutées : cliquez sur celle qui contient l'élément que vous désirez modifier. Un nouveau deployment se produit : recommencez la manœuvre jusqu'à ce que seul l'élément visé soit bleuté. Le HTML et le CSS qui sont alors visibles le concerne

Cette manœuvre vous donnera une idée de la manière dont des “div” s'imbriquent les unes dans les autres.
Vous pouvez aussi vous rendre directement à l'élément visé en utilisant l'icône ou le mot Inspect qui sont en haut à gauche du compartiment Firebug.
Il vous suffit de l'activer en cliquant dessus puis de glisser jusqu'à votre élément. En cliquant dessus, vous avez ses HTML et CSS qui s'affichent.

Lorsque vous avez sélectionné dans Firebug la portion de votre page dont vous souhaitez modifier l'apparence, le code CSS est affiché dans la partie droite de sa fenêtre. Modifiez, au besoin en tatonnant, les valeurs voire les propriétés (ajout ou retrait) pour obtenir le résultat qui vous plait. Toutes ces manipulations ne modifient pas votre base de données, mais uniquement ce que Firefox doit afficher : vous ne pouvez pas provoquer de catastrophe dans votre site. Firebug vous permet de visualiser ce que donnerait une modification du code CSS, mais rien de plus.

Pour que cette modification soit gravée dans le marbre de votre site, il faut l'inscrire dans votre base de données. Pour cela :

Faite une copie du sélecteur (la partie écrite en noir avant la parenthèse “ { “) et des propriétés + valeurs que vous avez modifié à votre convenance dans Firebug.
Copier l'ensemble dans le document “mycustomstyle.css” créé plus haut et enregistrez.

Lors de la prochaine lecture de la page concernée de votre site c'est ce code qui sera lu … au moins si vous avez bien vidé le cache.

5-Perfectionnement

Pour aller plus loin …

5.1-Installer un deuxième template Gantry

Vous avez réalisé la mise en page que vous souhaitiez, mais pour une autre partie de votre site, vous voulez une autre présentation et … vous êtes prêt à recommencer tout le processus précédent.

Il vous faut disposer d'un autre template Gantry, mais comment le faire cohabiter avec celui qui est en place : voici la procédure :

5.1.1-Changer l'intitulé du template en place.

Le dossier que vous voulez installer dans le répertoire template s'appelle Gantry : si l'existant porte le même nom, le petit dernier va effacer tout votre travail précédent. Nous allons simplement changer le nom du premier installé.

Rendez vous dans le dossier template dans lequel se trouve un répertoire dénommé Gantry : changez son nom par exemple en gantry1.

Catastrophe ! Votre site n'affiche plus votre mise en page : il va falloir installer Gantry1.

Rendez-vous dans Extensions/Gestion des extensions/Découvrir.
Cliquez sur l'icône bleue Découvrir en haut à droite : une ligne Gantry apparaît.
Sélectionnez-la puis cliquez sur l'icône orange Installer en haut à droite : tout est rentré dans l'ordre

5.1.2-Installer le nouveau template Gantry.

Téléchargez depuis le site de Gantry la dernière version du template (pas le bunddle car il n'est pas nécessaire de doubler le composant).

Installez-le selon la procédure Joomla classique : un dossier gantry est créé dans le répertoire template.

Si vous avez l'intention d'utiliser un 3ième template Gantry, dans le répertoire template changez son nom (gantry2 par exemple) et recommencez la manœuvre ci-dessus :

Rendez-vous dans Extensions/Gestion des extensions/Découvrir.
Cliquez sur l'icône bleue Découvrir en haut à droite : une ligne Gantry apparaît.
Sélectionnez-la puis cliquez sur l'icône orange Installer en haut à droite : le template gantry2 est disponible côté administration du site.

5.1.3-Paramétrer ce nouveau template.

Il vous reste à reprendre la procédure décrite aux chapitrex 3 et 4 pour paramétrer gantry2 : bon courage.

Nota : Peut-être remarquerez-vous que, que côté administration, dans Gestion des templates figurent 3 lignes Gantry alors que vous n'en n'avez que 2 actifs. Si cela vous importune :

retournez dans Gestion des extensions/Gestion,
filtrez par le mot gantry,
sélectionnez, parmi les 3 templates qui s'affichent, celui dont le numéro de l'ID est l'avant-dernier,
cliquez l'icône bleue Désinstaller en haut à droite.

Remarques

Avec ma configuration (McBook Pro + MAMP + Firefox), lorsque j'ai modifié un paramètre dans le Template Manager de Gantry, le site affiche parfois en front end une page blanche jusqu'à ce que je l'ouvre dans un nouvel onglet ou que j'appelle deux fois la page d'accueil … pourquoi ?

Un sélecteur donné peut concerner plusieurs objets disséminés en divers points du site : par exemple des boutons comme S'enregistrer, Déconnexion, Sauvegarder. Le choix d'une couleur dans gantry/style se répercutera dans ces divers Boutons.

Remerciements

Les principales sources qui ont permis la rédaction de ce document sont :

La documentation de Gantry : https://www.gantry-framework.org/
Les textes traduits par S. Billon alias “tataye“ : https://www.web54.fr/
Les mails du Google Group :
La personnalisation expliquée par L. Douglas : https://webbering.com
Le forum de … Joomla.
Des remerciements complémentaires sont prévus pour ceux qui trouveront utile ce tutoriel (et le feront savoir) et pour surtout ceux qui, plus savant que moi, l'enrichiront de leurs expériences.

Gantry pour les nuls

Index de l'article

GANTRY

pour les … néophytes.

Guide d’emploi