https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

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.

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 :position blocs

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 http://www.rockettheme.com
    
                * @copyright Copyright (C) 2007 - 2010 RocketTheme, LLC
    
                * @license http://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 :Gantry-fond

  • 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 :Gantrycontainer

  • 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 :Gantry4.2.1

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

  1. Rendez-vous dans Extensions/Gestion des extensions/Découvrir.

  2. Cliquez sur l'icône bleue Découvrir en haut à droite : une ligne Gantry apparaît.

  3. 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 :

  1. Rendez-vous dans Extensions/Gestion des extensions/Découvrir.

  2. Cliquez sur l'icône bleue Découvrir en haut à droite : une ligne Gantry apparaît.

  3. 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 :

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="http://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="http://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.