03 83 56 65 20 06 87 42 95 30

Tutoriels Gantry

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.

Joomla permets la gestion multilingue des sites internet, et des composants comme Falang peuvent également être très utiles.

Le contenu est modifié selon la langue choisie par l'utilisateur ou le gestionnaire.

Mais quand on utilise Gantry, Il peut arriver de vouloir avoir un logo personnalisé selon la langue utilisée par le visiteur sur le site.

Il existe pour cela plusieurs méthodes.

Utiliser un module personnalisé.

Parmis les fonctionnalités de joomla, il y a la possiblité de créer un module HTML personalisé, de l'assigner à une langue.

Il vous suffit donc de créer un module par langue (ou de traduire le module dans falang) et de le publier dans une position qui servira de position de logo. (header par exemple?

Dans ce module, insérez une image en fonction de votre langue, et le tour est joué.

Utiliser le hack Gantry

  1. Décompressez ce fichier joint et copiez-le dans le dossier /templates/<YOUR_TEMPLATE>/features/
  2. Puis créez une image pour chaque langue. Le nom de chaque image doit être <LANGUAGE_TAG>.logo.png.
    Par exemple: "en-GB.logo.png", "es-ES.logo.png", "pt-BR.logo.png" et ainsi de suite.
  3. Copiez les images dans le dossier /templates/<YOUR_TEMPLATE>/images/logo/
  4. Dans le gestionnaire de templates modifiez votre tempalte et réglez ainsi Logo show = ON et Autosize = ON
La fonction ajoute un nouveau style css.
Ce style s'adapte fonction de la langue du site Web et modifie l'image de fond du logo.

 

 ziplogo.zip1.15 KB26/01/2014, 15:31

Gantry est bourré de fonctionnalités permettre l'élaboration de designs dans des mises en page pleinement fonctionnelles avec le strict minimum d'effort et sans soucis!

Avis aux puristes : C'est volontairement que nous avons choisi de parler d'override à la place de surcharge ou de substitution.

Pour chacun des élément de menu, Gantry offre la possibilité de choisir un paramètrage de présentation différent. Un exemple fréquent concerne le désir de disposer d'une mise en forme pour la page d'accueil différente de celle des autres pages. Gantry permet de réaliser cela en seulement quelques clics.

Découvrez la puissance de Gantry et sa capacité à configurer n'importe quel jeu de paramètres basé sur l'override de template à l'aide des styles de templates personnalisés.

 

Création d'un Override

Il existe deux méthodes de création d'un nouveau jeu de assignable configurations.

La première est la méthode Sauver et copier , qui implique que vous modifiez le template principal de Gantry à Extensions → Gestions de Templates → gantry — Default (Master). Configurer vos paramètres, changer le Nom du style et sélectionner Save as Copy dans la liste déroulante Save. (pas traduit dans le template à l'heure de la rédaction)

sauver comme_copie

La seconde, à partir du Gestionnaire de templates, vous pouvez cocher la case devant le template Gantry Master, et cliquez sur Dupliquer dans la barre d'outils. Il créera automatiquement une copie, et la considérera comme un Override.

parametres grises

Configuration d'un Override

Après qu'un Override ait été créé, il vous suffit de l'ouvrir et de le configurer. Dans chaque onglet , les paramètres seront grisés et ils pourront être activés par la case à cocher.

Lorsque le jeu de paramètres est configuré, il faut préciser quels sont les liens (éléments) de menu qui provoqueront son utilisation. Cliquer sur l'onglet Assignement : tous les liens s'affichent. Cochez ceux qui vous conviennent et sauvez, votre style dupliqué s 'appliquera à ces élèments.

Exemples d'Override

Voila ci-dessous un exemple simple d'Override. Le paramètre Layouts → MainBody Positions a été overridé pour un élément de menu. Par conséquent, dans les captures d'écran ci-dessous, vous pouvez voir que la répartition de la barre latérale peut être placée à gauche ou à droite de la partie principale du template, et ne pas être appliquée à l'ensemble des pages.

C'est pareil pour les autres paramètres, tels que des fonctionnalités ou des Styles.

module gauche module droite 
 sidebargauche  sidebardroite

Cette section explique le déplacement d'un ensemble de positions de modules au sein d'un template compatible avec Gantry.

Les layouts sont des blocs de codes qui contrôlent la structure HTML d'une partie particulière du rendu du template. Par défaut, Gaantry est livré avec plusieurs fichiers de layouts intégrés, ceux sont tous situés dans le dossier libraries/gantry/html/layouts/ :

  • body_debugmainbody.php - une mise en page utilisée pour des configurations de mise en page principale en mode débugage.
  • body_iphonemainbody.php - une mise en page utilisée pour les configurations de mise en page mainbody iphone - Obsolète -
  • body_mainbody.php - la mise en page par défaut de mainbody. Il s'agit de la mise en page qui contrôle le mainbody vis à vis des barres latérales
  • doc_body.php - une mise en page pour restituer la balise body, utilisée dans displayBodyTag()
  • doc_tag.php - une mise en page utilisée dans le rendu générique d'une balise produite par la méthode  displayClassesByTag()
  • feature_basic.php - une mise en page utilisée pour les rendus génériques des contenus des fonctionnalités (features)
  • mod_basic.php - une structure de base pour les modules
  • mod_sidebar.php - la mise en page des sidebars
  • mod_standard.php - la disposition standard des modules
  • orderedbody_mainbody.php - restitue mainbody et sidebars pour une utilisation avec des tables CSS

Etape 1: Objectif

Les mises en page par défaut qui sont fournis avec le Framework Gantry sont conçus pour être assez flexibles pour répondre aux besoins de 99 % de toutes les implémentations possibles. Cependant il y a des occasions où la structure HTML par défaut ne contient pas tous les éléments des blocs ou les noms de classe requis pour réaliser un design particulier. Dans ces rares cas, vous pouvez utiliser toute la puissance du framework Gantry pour remplacer la mise en page par défaut avec votre propre layout du template. Aussi, certaines mises en pages telles que les dispositions de module sont assez flexibles pour supporter vos propres layouts personnalisés et vous pouvez les appeler de la même façon on appelle les layouts par défaut.

Etape 2: Créer/Copier de nouveaux fichier de Layouts

La façon la plus simple de faire est de copier un layout existant. Dans cet exemple, nous allons copier le layout body_mainbody.php, et le modifier par la suite. Les fichiers sont situés dans:

[VOTRE_SITE]/libraries/gantry/html/layouts/

Cependant, vous ne voulez pas modifier les fichiers de base de Gantry. à la place, copiez le nouveau fichier de layout dans :

[VOTRE_SITE]/templates/VOTRE_TEMPLATE/html/layouts/

Vous devrez créer ce dossier layouts/ s'il n'existe pas déjà

Dans ce cas, copiez body_mainbody.php depuis l'emplacement de vos layouts de base vers l'emplacement des layouts du template.

Etape 3: Structure du Fichier

Après avoir copié le fichier body_mainbody.php, vous pouvez l'ouvrir et le modifier en fonction de vos besoins. Par défaut, il ressemble à ceci:

<?php
/**
* @version $Id: body_mainbody.php 2381 2012-08-15 04:14:26Z btowles $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - ${copyright_year} RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
* Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
*
*/
defined('GANTRY_VERSION') or die();
     
gantry_import('core.gantrylayout');
     
/**
*
* @package gantry
* @subpackage html.layouts
*/
class GantryLayoutBody_MainBody extends GantryLayout {
    var $render_params = array(
       'schema' => null,
       'pushPull' => null,
       'classKey' => null,
       'sidebars' => '',
       'contentTop' => null,
       'contentBottom' => null
    );
    function render($params = array()){
    /** @var $gantry Gantry */
       global $gantry;
     
       $fparams = $this->_getParams($params);
     
// logic to determine if the component should be displayed
    $display_component = !($gantry->get("component-enabled",true) == false && JRequest::getVar('view') == 'featured');
    ob_start();
    // XHTML LAYOUT
    ?> <div id="rt-main" class="<?php echo $fparams->classKey; ?>">
          <div class="rt-container">
             <div class="rt-grid-<?php echo $fparams->schema['mb']; ?> <?php echo $fparams->pushPull[0]; ?>">
             <?php if (isset($fparams->contentTop)) : ?>
                <div id="rt-content-top">
                   <?php echo $fparams->contentTop; ?>
                </div>
             <?php endif; ?>
             <?php if ($display_component) : ?>
                <div class="rt-block">
                    <div id="rt-mainbody">
                        <div class="component-content">
                            <jdoc:include type="component" />
                        </div>
                    </div>
                </div>
              <?php endif; ?>
              <?php if (isset($fparams->contentBottom)) : ?>
                <div id="rt-content-bottom">
                  <?php echo $fparams->contentBottom; ?>
                </div>
              <?php endif; ?>
            </div>
            <?php echo $fparams->sidebars; ?>
            <div class="clear"></div>
          </div>
        </div>
    <?php
    return ob_get_clean();
    }
    }
N'hésitez pas à modifier ce fichier en fonction de vos besoins.

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>

Gantry possède plusieurs éléments qui sont prêts à l'emploi mais qui sont cachés ou pas indiqués dans la documentation officielle. Un de ceux- ci est Icomoon. J'ai déjà décrit dans le post Font Awesome 3, les overrides de bootstrap. less contient certaines classes d'icones. Si vous avez suivi mes recommandations pour les overrider et que vous avez également mis à jour votre Gantry Framework pour 4.1.16 ou supérieur - supprimez ce code de votre feuille de style.

Dans bootstrap-overrides.less vous pouvez trouver le code :

.icon-file-add:before, .icon-cancel:before, .icon-eye:before, .icon-location:before, .icon-arrow-up-3:before, .icon-folder-2:before, .icon-checkedout:before, .icon-locked:before, .icon-comments-2:before, .icon-out:before, .icon-redo:before, .icon-file-add:before, .icon-new:before, .icon-apply:before, .icon-pencil-2:before, .icon-folder:before, .icon-pictures:before, .icon-list-view:before, .icon-power-cord:before, .icon-cube:before, .icon-puzzle:before, .icon-tools:before, .icon-options:before, .icon-equalizer:before, .icon-brush:before, .icon-eye:before, .icon-checkbox-unchecked:before, .icon-checkin:before, .icon-checkbox:before, .icon-checkbox-partial:before, .icon-star-2:before, .icon-featured:before, .icon-calendar-2:before, .icon-help:before, .icon-support:before, .icon-warning:before, .icon-publish:before, .icon-checkmark:before, .icon-unpublish:before, .icon-cancel:before, .icon-purge:before, .icon-mail:before, .icon-mail-2:before, .icon-unarchive:before, .icon-drawer:before, .icon-drawer-2:before, .icon-box-add:before, .icon-box-remove:before, .icon-grid-view:before, .icon-grid-view-2:before, .icon-menu:before, .icon-delete:before, .icon-cancel-2:before, .icon-save-new:before, .icon-plus-2:before, .icon-minus-2:before, .icon-quote:before, .icon-quote-2:before, .icon-database:before, .icon-location:before, .icon-expand-2:before, .icon-contract:before, .icon-contract-2:before, .icon-health:before, .icon-wand:before, .icon-unblock:before, .icon-vcard:before, .icon-clock:before, .icon-address:before, .icon-feed:before, .icon-flag-2:before, .icon-pin:before, .icon-lamp:before, .icon-chart:before, .icon-bars:before, .icon-pie:before, .icon-lightning:before, .icon-next:before, .icon-previous:before, .icon-first:before, .icon-last:before, .icon-loop:before, .icon-shuffle:before, .icon-arrow-first:before, .icon-arrow-last:before, .icon-uparrow:before, .icon-downarrow:before, .icon-arrow-up-2:before, .icon-arrow-right-2:before, .icon-arrow-down-2:before, .icon-arrow-left-2:before, .icon-play-2:before, .icon-menu-2:before, .icon-arrow-up-3:before, .icon-arrow-right-3:before, .icon-arrow-down-3:before, .icon-arrow-left-3:before, .icon-printer:before, .icon-color-palette:before, .icon-camera-2:before, .icon-file-remove:before, .icon-save-copy:before, .icon-cart:before, .icon-basket:before, .icon-broadcast:before, .icon-screen:before, .icon-mobile:before, .icon-users:before, .icon-out-2:before {
    font-family: 'IcoMoon' !important;
}

Donc nous pouvons utiliser des icônes suivantes sans aucun effort supplémentaire :


.icon-file-add icon-cancel icon-eye icon-location icon-arrow-up-3 icon-folder-2 icon-checkedout icon-locked icon-comments-2 icon-out icon-redo icon-new icon-apply icon-pencil-2 icon-folder icon-pictures icon-list-view icon-power-cord icon-cube icon-puzzle icon-tools icon-options icon-equalizer icon-brush icon-checkbox-unchecked icon-checkin icon-checkbox icon-checkbox-partial icon-star-2 icon-featured icon-calendar-2 icon-support icon-warning icon-checkmark icon-mail icon-mail-2 icon-drawer icon-drawer-2 icon-box-add icon-box-remove icon-grid-view icon-grid-view-2 icon-menu icon-delete icon-plus-2 icon-minus-2 icon-quote icon-quote-2 icon-database icon-expand-2 icon-contract icon-health icon-wand icon-unblock icon-vcard icon-clock icon-address icon-feed icon-flag-2 icon-pin icon-lamp icon-chart icon-bars icon-pie icon-lightning icon-next icon-previous icon-first icon-last icon-loop icon-shuffle icon-arrow-first icon-arrow-last icon-uparrow icon-downarrow icon-arrow-up-2 icon-arrow-right-2 icon-arrow-down-2 icon-arrow-left-2 icon-play-2 icon-menu-2 icon-arrow-up-3 icon-arrow-right-3 icon-arrow-left-3 icon-arrow-down-3 icon-printer icon-color-palette icon-camera-2 icon-file-remove icon-save-copy icon-cart icon-basket icon-broadcast icon-screen icon-mobile icon-users icon-out-2

Afin de présenter des codes dans notre page web nous utilisons des balises <pre></pre> ou <code><code>. Quelle est la différence entre elles?

La balise <code><code> mettra en valeur votre code, mais il sera traité comme dans d'autres balises texte - tous les espaces supplémentaires, sauts de ligne ou tabulations seront supprimés.
<pre> - est l'abreviation de preformated, un texte apparaîtra exactement comme vous l'avez entré.

Règle générale: <code></code> Nous l'utilisons pour ajouter du code dans le texte et<pre></pre> lorsque nous voulons afficher code long.

Styles

Même si vous n'avez pas de style css, le texte à l'intérieur de ces balises est affiché avec une police monospace comme Menlo ou Monaco. Gantry 4 a déjà des styles définis pour les balises pre et code has already defined styles for pre and code tags, par exemple :

c'est un exemple de <code>

   Exemple de Code sur plusieurs lignes qui utilise les balises <pre> 
    $lists = array ();
        $lists['search'] = $search;
        $lists['order_Dir'] = $filter_order_Dir;
        $lists['order'] = $filter_order;

Il n'y a aucun problème avec javascript, les langages php / css, mais vous pouvez en avoir avec HTML ou XML. Nous devons remplacer les caractères "<" et ">" à l'aide des symboles mathématiques < (plus petit que) et > (plus grand que). Dans le cas contraire, ils seraient interprétés comme des balises html ordinaire.

Prettify (enjoliver)

SI vous étiez curieux de connaître à quoi sert le fichier prettify.less - le mystère est résolu. Essayez d'ajouter quelques codes<pre></pre>- comme dans l'exemple ci-dessous:

 

1

2

3

4

5

<pre class="prettyprint lang-php linenums">

<?php

echo 'Hello World';

?>

</pre>

Résultat

<?phpecho 'Hello World';?>

Gantry 4 a intégré prettify.js. Pour l'appeler dans le header il suffit d'ajouter class="prettyprint" puisque vous avez déjà prettify.less. La classe "lang-xxx" définit le langage tels que css, php ou html et la class "linenums" ajoute des numéros de lignes. Vous pouvez également utiliser par exemple, .linenums:33 - alors la numérotation des lignes commence à partir de 33
Vous pouvez trouver ici plus d'informations sur prettify

Syntax Highlighter (surligneur de syntaxe)

Syntax Highlighter (SH) est probablement le plus populaire. Il ya aussi le plugin Jommla - codecitation avec SH mais n'est pas developpé depuis la version 1.6 de Joomla et utilise également la version 2.x de SH. La nouvelle version apporte un changement important pour l'utilisateur final. Dans la version 2 et inférieure, il n'était pas possible de se contenter de selectionner du code et de faire un copié/collé - le texte copié contient également des numéros de ligne. C'était effectué par un objet swf. Dans la version 3, vous pouvez double-cliquer pour selectionner tout le code et simplement copier/coller. C'est pourquoi - vous connaissez ce monstre de Gantry - Je l'ai intégré à mon template.

Comment fonctionne SH? Nous avons besoin du fichier shCore.js et de plusieurs autres fichiers js appelé brosses (brushes). Il existe de nombreuses brosses pour différents langages de programmation. Je vais utiliser dans ce tutoriel 5 brosses pour php, css, xml, js et sql. Si vous en voulez plus, vous pouvez améliorer le code ci-dessous.

Évidemment, les premiers champs

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<fields name="syntaxhighlighter" type="chain" label="SYNTAX_HIGHLIGTHER">

<field name="syntaxhighlighterstyle" type="selectbox" label="SYNTAX_STYLE"  default="Default">

      <option value="Default">Default</option>

      <option value="Django">Django</option>

      <option value="Eclipse">Eclipse</option>

      <option value="Emacs">Emacs</option>

      <option value="FadeToGrey">FadeToGrey</option>

      <option value="MDUltra">MDUltra</option>

      <option value="Midnight">Midnight</option>

      <option value="RDark">RDark</option>       

</field>

    <field name="css" type="toggle" default="0" label="CSS"/>

    <field name="php" type="toggle" default="0" label="PHP"/>

    <field name="xml" type="toggle" default="0" label="XML"/>

    <field name="java" type="toggle" default="0" label="JAVA_SCRIPT"/>

    <field name="sql" type="toggle" default="0" label="SQL"/>

</fields>

Maintenant notre fichier syntaxhighlighter.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<?php

/**

 * @package     gantry

 * @subpackage  features

 * @version        4

 * @author      Marcin Paczkowski

 * @license     do whatever you want :)))

 */

defined('JPATH_BASE') or die();

gantry_import('core.gantryfeature');

class GantryFeatureSyntaxHighlighter extends GantryFeature {

    var $_feature_name = 'syntaxhighlighter';

     

    function isEnabled()

    {

        global $gantry;

                

      

     $css_enabled = $gantry->get('syntaxhighlighter-css');

     $java_enabled = $gantry->get('syntaxhighlighter-java');

     $php_enabled = $gantry->get('syntaxhighlighter-php');

     $xml_enabled = $gantry->get('syntaxhighlighter-xml');

     $sql_enabled = $gantry->get('syntaxhighlighter-sql');

      

if (1 == (int)$css_enabled || 1 == (int)$java_enabled || 1 == (int)$php_enabled

|| 1 == (int)$xml_enabled   || 1 == (int)$sql_enabled ) return true;

        return false;

    }

     

  

   

    function init() {

        global $gantry;

         

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/less/SH";

$gantry->addLess($SHFolderless. "/shCore.less");

$gantry->addLess($SHFolderless. "/shCore".$gantry->get('syntaxhighlighter-syntaxhighlighterstyle').".less");

         

        $gantry->addScript($SHFolderjs . "/shCore.js");

         

        $gantry->addInlineScript('SyntaxHighlighter.all();');

         

        if ($gantry->get('syntaxhighlighter-php')){

        $gantry->addScript($SHFolderjs . "/shBrushPhp.js");}

         

        if ($gantry->get('syntaxhighlighter-css')){

        $gantry->addScript($SHFolderjs . "/shBrushCss.js");}

         

        if ($gantry->get('syntaxhighlighter-xml')){

        $gantry->addScript($SHFolderjs . "/shBrushXml.js");}

         

        if ($gantry->get('syntaxhighlighter-java')){

        $gantry->addScript($SHFolderjs . "/shBrushJScript.js");}

                 

         if ($gantry->get('syntaxhighlighter-sql')){

        $gantry->addScript($SHFolderjs . "/shBrushSql.js");}

        }

    }

Explication du code

J'ai utilisé la fonction isEnabled() et à l'intérieur simple condition vérifiant si n'importe quel brosse est "ON" (activée). Un tel code permets d'éviter un interrupeteur supplémentaire pour l'ensemble de la fonctionnalité.Such code let avoid to add additional toggle for whole feature - Si n'importe quel brosse est « ON » l'ensemble de la fonction sera exécutée.

Lors de la création de nouvelles fonctionnalités, j'essaie de garder une structure de dossiers compatibles. Quand j'ajoute un fichier unique js ou css (less), J'ai juste à ajouter au dossier principal comme /js, /less ou /css mais s'il y en a plus je créer un nouveau dossier pour eux. Si nous faisons cela, nous devons montrer à Gantry ce nouveau dossier sinon il recherchera dans les dossiers principaux. Pour cela il existe les variables $SHFolderjs $SHFolderless pour les fichiers js et less .

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/less/SH";    

JURI::root(true) est la méthode Joomla pour retourner à la racine de notre site. Je pourrais utiliser tout simplement JURI::root(true)."/templates/gantry/js/SH";. Pourquoi j'ai utilisé un autre code ? Parce que maintenant ce code est plus sophistiqué et semble plus sérieux :)). Je plaisante bien sûr. Vous pouvez trouver dans les variables de dossiers un nouveau champ "template_new_name". J'ai créé ce champ et je m'en sers en plusieurs endroits: chemins d'accès aux nouveaux dossiers, ma propre marque de fabrique de mes fonctionnalités (pas dans ce blog, mais dans d'autres projets) et dans l'onglet Aperçu dans le gestionnaire deTemplate Manager pour afficher le nom du template. La raison est très simple: si je décide de publier ce template avec un nouveau nom il suffit de changer la valeur dans ce champs et les chemins et autres champs seront automatiquement mis à jour. Je suis juste paresseux.

Vous souhaitez savoir comment changer le branding ou l'aperçu du template? - Laissez un commentaire ci-dessous.

Si vous souhaitez utiliser ma méthode ouvrez template-options.xml, trouvez la ligne 15 et ajoutez en-dessous:

<field name="template_new_name" type="hidden" default="Gantry"/>

Si vous voulez rester fidèles aux paramètres par défaut Remplacez ces 2 lignes par:

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_full_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_full_name'))."/less/SH";

Comment utiliser la coloration syntaxique (Syntax Highlighter )?

Nous utilisons class="brush:brushname" et brushnames : css, php, xml (aussi pour html), sql and js. Il existe beaucoup plus de brosses et vous pouvez améliorer le script pour les utiliser.

D'autres classes:
"gutter:false" - pas de numéros de lignes
"first-line: 10" - numérotation des lignes partira de 10
"highlight: 2" - ligne 2 sera mis en évidence
"highlight: [1, 3]" - lignes 1 et 3 seront mis en évidence

L'auteur de la coloration syntaxique est Alex Gorbatchev. Plus d'informations et de brosses vous les trouverez : ici

Ci-dessous vous trouverez le lien de téléchargement


créez les champs
copiez syntaxhighlighter.php file vers ../templates/gantry/features folder
copiez SH folder from /js folder vers ../templates/gantry/js folder
copiez SH folder from /less folder vers ../templates/gantry/less folder
créez le champ <field name="template_new_name" type="hidden" default="Gantry"/> ou changez le code de la fonction form aux lignes 39 et 40.

L'un des concepts clés qui rendent Gantry si puissant, c'est qu'il propose une richesse de possibilités et des fonctionnalités qui peuvent être facilement accessibles par le template de Joomla.
Pour vous développeur de template, cela vous facilite l'écriture d'un code propre et vous fournit, comme avantage secondaire, un niveau d'abstraction qui vous permettra de passer de Joomla 2,5 à 3,0 + sans rien changer à votre template.
La bibliothèque de gantry gère tous les morceaux compliqués à votre place.

Gantry utilise un puissant système de présélection permettant aux développeurs et aux designers de créer des paramètrages et des styles prédéfinis du site : Ce sont les presets.

La création d'un préréglage personnalisé est une tâche très simple avec gantry.

Découvrez dans cette courte vidéo la manière de personnaliser votre mise en page, puis créez un préréglage personnalisé en fonction de vos options de configuration.

Les préréglages (presets) sont des combinaisons de caratéristiques de Gantry et de réglages de configuration qui vous permettent de créer des groupements prédéfinis pour le template dans son ensemble, aussi bien que pour un réglage basé sur un élément de menu.
Les Presets peuvent consister en n'importe quelle option de configuration Gantry tel que le style css, la couleur des liens, graphismes des fonds et du body, les polices, et bien plus encore.

Création d'un nouveau Préréglage

Pour configurer un nouveau preset, allez à Extensions → Gestion des templates → gantry — Default (Master) → Style. Configurez les paramètres de style pour le template tel que Link Color.

image configurer presets

Une fois configuré, cliquez sur Save Preset  qui se trouve dans la liste déroulante sous le bouton Save.

presets-sauver

La boîte de dialogue modale Gantry Presets Saver  s'affiche. Entrez votre nom de préréglage et le nom de la clé (Key Name) sera généré automatiquement. Puis cliquez sur Save pour enregistrer.

sauver presets

Sélectionnez votre nouveau préréglage

Cliquez sur le bouton Presets pour afficher tous les préréglages disponibles. Votre nouveau préréglage s'affiche dans le slider des presets. Cliquez sur le Preset pour charger votre style personnalisé. Choisissez Save pour enregistrer le Preset.

Après la création d'un Preset, vous pouvez créer une image miniature, dans le dossier admin/presets/  avec le nom de fichier construit comme ceci keyname.png avec keyname qui correspond au Keyname de la boite de dialogue modale. (termes de la version anglaise)

presets-choix

Cette partie explique comment ajouter une rangée de positions de modules au famework Gantry et au template Gantry que vous utilisez.

Dans le framework Gantry nous utilisons le terme Feature pour signifier un morceau spécifique de fonctionnalité. Les Features sont suffisamment souples pour qu'ils puissent être utilisés pour exécuter presque n'importe quel type de fonctionnement logique dont vous auriez besoin. La classe d'origine GantryFeature contient des méthodes qui peuvent être implémentées pour contrôler comment votre fonctionnalité se comporte.

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.

 

 

 

 

 

Jusqu'à la version 3 de gantry et dans certains templates récents également, il existe une fonction, "title spans", qui une fois activé modifie la couleur du premier mot des titres.

Mais comme d'autres fonctions, elle n'apparait pas dans tous les templates gantry, ni dans le bundle 4.1.11

Nous allons donc l'activer pour pouvoir l'utiliser.

Ajouter la fonction title span dans gantry :

Ouvrex le fichier template-options.xml

repérez l'endroit ou vous voulez ajouter votre fonction, selon votre goût et vos besoins; pour nous ce fut à la ligne 92 juste avant la fonction date, et ajoutez :

        <field name="buildspans-enabled" type="toggle" default="1" label="TITLESPANS"/>


Le fait de l'avoir mis par défaut sur 1 active d'entrée la fonctionnalité, mais nous allons le vérifer.

Activer la fonction titlespans :

Pour activer la fonction dans gantry il suffit de switcher le bouton interrupteur :(cliquez pour agrandir)

active titlespans

Puis de sauver.

Vos titres ont désormais leur premier mot encadré dans une magnifique balise span.

Modifiez vos css :

Maintenant que nous avons une balise span qui différencie le pemier mot du reste du titre, il nous suffit d'appliquer des css afin de marquer visuellement cette différence.

 

h2 span {
    color: red;
}
h2 span:hover {
    color: darkred;
}


Par exemple... il convient d'adapter les css à chaque cas particulier.

Le Framework Gantry a des exigences de système pour fonctionner, vous les trouverez énumérées ci-dessous décomposées dans des groupes distincts :

Style

Le panneau Style de l'administration d'un template basé sur Gantry propose plusieurs options permettant de configurer les principaux aspects stylistiques du template. Puisque le template Gantry par défaut inclut plusieurs options, vous pouvez facilement en ajouter et configurer beaucoup plus en fonction des besoins de votre template.

Les options de configuration suivantes sont disponibles par défaut :

Logo

Le paramètre Logo offre la possibilité d'afficher/masquer le logo, sélectionner sa position ou de modifier son type. Par défaut, il est réglé sur Gantry Template et vous permet de charger trois options de style différent dans Logo Style.

style-logo-type-gantry

La deuxième option de type de logo est Custom. Cela va charger le champ Logo personnalisé, où vous pourrez sélectionner une image via le gestionnaire de médias.

style-logo-type-custom

Couleur des liens

Le réglage de la couleur des liens permet de changer facilement la couleur principale pour les liens du template. Les couleurs peuvent être insérées via le sélecteur popup de couleur, ou en entrant manuellement un code hexadécimal dans le champ de saisie.

style-link-color

Paramètres des polices

L'option paramètres de police (Font Settings) offre la possibilité de changer la taille de la police, mais aussi la famille de polices par défaut utilisée dans le template. Beaucoup de polices Web connues sont inclues en option et certains templates comprennent également d'autres options de polices personnalisées.

style-font

Dans cette section, nous allons passer en revue la création d'une mise en page personnalisée pour les modules XHTML dans un template Gantry.

Le framework Gantry est livré avec un système AJAX intégré qui agit comme une passerelle entre le client et le framework Gantry.

Chaque appel Ajax est dirigé vers un "modèle Ajax" qui reçoit des paramètres Ajax et après ses opérations est capable de retourner une réponse avec ce que la demande d'appel d'origine Ajax attend. Ci-dessous vous pouvez voir un résumé schématique du processus.

Ss Ajax Systemajax system chart

La puissance réelle du système ajax intégré dans le framework gantry réside dans les modèles. Chaque développeur peut créer ses propres modèles personnalisés Ajax et utiliser les appels Ajax côté client afin de récupérer des types de données spécifiques.

There are 2 Ajax systems in the Gantry framework that actually work exactly the same with one exception: restrictions. In fact the first can be used for everything regarding the template while the second can only be used admin side. The restriction makes it so that even by error you cannot use the admin Ajax System on the frontend.

Il y a 2 systèmes Ajax dans le framework Gantry qui fonctionnent exactement pareil à une exception près : les restrictions. En fait le premier peut être utilisé pour tout ce qui concerne le template tandis que le second ne peut être utilisé que côté admin. La restriction fait en sorte que même par erreur, vous ne pouvez pas utiliser l'admin système Ajax sur le frontend.

l'URL Ajax

Pour commencer avec un appel Ajax côté client, vous devez appeler l'URL correcte afin de déclencher le mécanisme du modèle Ajax de gantry.

L'URL est le même pour le Frontend et Backend avec, bien sûr, l'ajout du chemin /administrator/  lorsque nous traitons dans le Backend et il ressemble à /index.php?option=com_gantry&task=ajax&format=raw&template=[nom_de_votre_template]

Si nous décomposons la requète, vous remarquerez que cela ressemble à un appel de composant Joomla!, et c'est effectivement ce que c'est :

  • option → com_gantry
  • task → ajax
  • format → raw
  • template → [nom_de_votre_template]

Tous ces morceaux sont fondamentaux pour que le mécanisme Ajax de Gantry puisse travailler.

nom_de_votre_template fait réference au nom du template frontend que vous utilisez actuellement. Par exemple si nous étions en train d'utiliser le template par défaut Gantry, ce serait template=gantry

Gantry est livré avec une méthode qui rend plus facile la construction et le rendu de l'URL Ajax. En PHP, vous pouvez exécuter $gantry->getAjaxUrl() et la même chaîne d'URL que ci-dessus sera retournée.

Ceci est particulièrement utile si vous souhaitez copier l'URL dans une variable globale de JavaScript que vous pourrez ensuite référencer dans votre propre script.

Par exemple, dans le index.php de votre template, vous pourriez produire une déclaration de script inline similaire à :

 

    <?php
    // location: /templates/gantry/index.php
    ...
    $gantry->addInlineScript("var GantryAjaxURL = '".$gantry->getAjaxUrl()."';");
    // GantryAjaxURL => '/index.php?option=com_gantry&task=ajax&format=raw&template=gantry'

De cette façon, vous pouvez accéder à la variable GantryAjaxURL à partir de vos propres scripts.

 

Les modèles Ajax

Les modèles sont des fonctions Ajax PHP efficace où participe toute la logique d'un modèle spécifique.

Un modèle peut avoir n'importe quel genre de but. Par exemple, dans l'Admin du portique, nous utilisons des modèles Ajax pour

  • Vider le cache
  • Supprimmer des fichiers compilés LESS
  • Sauvegarde Ajax
  • Créer des presets
  • ...

Comme vous pouvez le voir, un modèle peut être quelque chose que vous pouvez penser et dont le mécanisme fonctionne dans les coulisses, en fait un moyen très puissant pour contrôler quoi que ce soit via Ajax si vous le souhaitez.

Les modèles Ajax sont situés dans le dossier Library de Gantry sous [votre_site]/library/gantry/. Les modèles frontend sont à la racine ajax-models/ tandis que les modèles de backend sont dans le dossier admin admin/ajax-models/

En raison de la capacité du Framework gantry d'overrider, vous n'aurez jamais besoin de jamais aller éditer les modèles contenus dans les endroits mentionnés ci-dessus. En fait, il vous suffit de travailler au niveau du dossier template, en gardant la même structure.

Ainsi, vos modèles personnalisés de tempalte Ajax doivent être stockés dans le dossier [votre_site]/templates/[votre_template]/ajax-models/ tandis que vos modèles personnalisés administrateur Ajax doivent être stockés dans le dossier [votre_site]/templates/[votre_template]/admin/ajax-models/.

Ci-dessous un exemple de modèle qui retournera toutes les requêtes POST en retour à l'Ajax :

 

    <?php
    // location: /templates/gantry/ajax-models/example.php
    defined('JPATH_BASE') or die();
    global $gantry;
    print_r(JRequest::get('post'));
     
    ?>

Il est important de noter que le nom de fichier du modèle Ajax est ce qui identifie le modèle lui-même.Le nom, dans ce cas, example est ce que nous allons utiliser dans l'appel Ajax côté client, pour récupérer les données dont nous avons besoin pour ce modèle particulier.

 

La syntaxe d'appel Ajax

Maintenant que nous avons un modèle, nous sommes prêts à créer l'appel JavaScript Ajax. Gantry est basé sur MooTools 1.4, donc les exemples suivants sont écrits dans la syntaxe de MooTools. Cela ne signifie pas que vous ne pouvez pas utiliser JavaScript natif ou tout autre framework pour effectuer la même opération.

Supposons que notre index.php du template charge un fichier js nommé ajax-call.js, fournissant ainsi une variable GantryAjaxURL comme décrit dans la section L'URL Ajax.

 

<?php
// location: /templates/gantry/index.php
    ...
    $gantry->addInlineScript("var GantryAjaxURL = '".$gantry->getAjaxUrl()."';");
    $gantry->addScript('ajax-call.js'); // /templates/gantry/js/ajax-call.js
 ...

Le template est maintenant configuré pour charger votre script personnalisé d'appel ajax, nous pouurons également nous appuyer sur lavariable JavaScript GantryAjaxURL qui contient l'url ajax en tant que chaîne.

 

Maintenant la partie amusante, le JavaScript :

 

((function(){
 
window.addEvent('domready', function(){
// Request Object
var request = new Request({
url: GantryAjaxURL, // <r;- remember, this is the ajax url, explained in The Ajax URL section.
onSuccess: function(response){
console.log(response);
}
});
// Request post
request.post({
model: 'example', // <r;- the model must always be passed in
animal: 'Cat',
name: 'Pixel'
});
});
 
})());

 

C'est très simple. Comme vous pouvez le voir, nous créons un objet de requête que nous utilisons ensuite pour demander un POST. Il est obligatoire que le modèle (model: 'example') soit toujours présent lors d'une requète, c'est ce qui identifie quel modèle le système Ajax Gantry doit charger et exécuter.

Voila ce qui est produit par l'exemple ci-dessus

    Array
    (
    [model] => example
    [animal] => Cat
    [name] => Pixel
    )

 

Le modèle que nous avons utilisée est un exemple très basique et simple, mais c'est un bon point de départ. Vous pouvez voir des modèles beaucoup plus sophistiqués si vous explorez le référentiel de bibliothèque de Gantry.

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.

Merci de vous assurer que vous avez lu et compris les conditions de licence et d'utilisation avant de déployer un template basé sur le Framework Gantry

Date

La fonctionnalité DATE contrôle l'affichage de la date du jour. Depuis cette option vous pouvez activer/désactiver l'affichage de la date, activer/désactiver l'utilisation de la date côté client (et non plus de la localisation du serveur), choisir parmi plusieurs options différentes de format de date et sélectionner un emplacement pour afficher la date en utilisant une des positions de module disponibles dans le template.

fonction-date

Font Sizer (tailles de police)

La fonction Font Sizer contrôle l'affichage dans le front end du contrôleur de taille de polices  permettant aux utilisateurs d'augmenter ou de diminuer celle-ci.  A l'aide de cette option vous pouvez activer/désactiver l'affichage des contrôleurs ainsi que l'emplacement pour les afficher en utilisant l'un des emplacements de modules disponibles dans le template.

fonction-font-sizer

Branding (Marque)

La fonction Branding feature gère l'affichage de la marque Gantry dans le frontend. Depuis cette option vous pouvez activer/désactiver l'affichage de l'image Gantry et sélectionner la position de module dans laquelle elle sera chargée...

fonction-branding

Copyright

La fonctionnalité Copyright contrôle l'affichage du texte du droit d'auteur. Grâce à cette option vous pouvez activer/désactiver l'affichage du texte du droit d'auteur, saisir un texte de droits d'auteur personnalisé à afficher, aussi bien que choisir l'emplacement où l'afficher en utilisant l'un des emplacements de modules disponibles dans le template.

fonction-copyright

To Top Scroller (retour vers le Haut)

La fonctionnalité To Top Scroller gère l'affichage d'un bouton/lien qui lorsque vous cliquez dessus fera défileren douceur la page vers le haut. Depuis cette option vous pouvez activer/désactiver l'affichage du bouton "Top Scroller", entrer du texte personnalisé à afficher sur ce bouton, et choisir l'emplacement où l'afficher en utilisant l'un des emplacements de modules disponibles dans le template.

fonction-totopscroller

System Messages (Messages Système)

La fonctionnalité System Messages contrôle l'affichage des messages système Joomla. Joomla affiche des messages de système pour divers événements, et comme une caractéristique, il est maintenant possible de contrôler l'emplacement de cet affichage. A partir de cette option, vous pouvez activer / désactiver l'affichage des messages système Joomla, et choisir l'emplacement où les afficher en utilisant l'un des emplacements de modules disponibles dans le template.

fonction-system-messages

Reset Settings (Réinitialiser les paramètres)

La fonction "Reset Settings" permet de régler l'affichage d'un lien/bouton qui lorsqu'il est utilisé réinitialise tous les cookies stockés et remets les paramètres du frontend du site par défaut. Grace à cette option, vous pouvez activer / désactiver l'affichage du bouton de Réinitialisation des réglages, gérer le texte affiché, et choisir l'emplacement où les afficher en utilisant l'un des emplacements de modules disponibles dans le template.

fonction-reset-settings

Google Analytics

La fonctionnalité Google Analytics vous permet d'activer le suivi Google Analytics sur votre site d'une manière rapide et facile. Il vous suffit d'activer la fonction et d'entrer votre clé UA qui vous est attribuée par Google dans le champ prévu.

fonction-google-analytics

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

Le Framework Gantry est capable de charger différents fichiers CSS selon le navigateur et le système d'exploitation qui est en train de visionner le template. Cela permet un contrôle complet sur la façon dont un site est affiché même au plus pointilleux des navigateurs !

Le framework Gantry, en tant que tel, est indépendant de n'importe quel template.
Chaque template Gantry s'appuie sur le framework Gantry pour fournir la base sous-jacente et de nombreuses fonctionnalités permettant la création de sites aussi puissants.

Le panneau Layouts de l'administration d'un template basé sur le framework gantry fournit plusieurs options pour configurer la mise en page du template. Chaque section de modules du template propose 6 positions de modules par défaut

Pour en savoir plus sur Les Mises en page et largeurs de module, consultez ce screencast rapide. Il couvre quelques-uns des concepts nécessaires à la compréhension et à la configuration de la mise en page en mixant des configurations de modules et le contrôle des layouts par Gantry.

 

 

Utilisation des Layouts

Chacune des rangées de modules principaux / sections est représentée avec un curseur permettant un contrôle dynamique de la manière dont les modules sont agencés sur la base du nombre de positions de modules utilisées ou publiées. Par défaut, la mise en page fixera une taille égale pour les modules publiés.

layouts-utility1

Au dessus du curseur, il y a des liens qui representent le nombre entre 1 et 6 de positions que vous souhaitez configurer. Par exemple, si vous configurez la mise en page d'une page ayant 4 positions utilisées, il vous faudra d'abord sélectionner le lien n ° 4 dans la partie supérieure au curseur pour cette position.

Si vous avez des modules dans 4 positions de modules utility-a, utility-b, utility-c, et utility-d cela signifie que les positions actives devraient être réglées sur 4. Le widget de mise en page vous montrera toujours le nombre de positions actives en caractères gras. Au-dessous de ce nombre, vous voyez une représentation sous forme de bloc de la disposition actuelle.

Nous utilisons un système basé sur Twitter's Bootstrap. Les mises en pages sont en base 12, et par défaut les 12 colonnes 3 | 3 | 3 | 3 de la valeur de configuration par défaut se traduit par un bloc de taille égal pour chacune des 4 positions vous avez activée ou publiée.

Une configuration de 12 colonnes avec 4 modules d'une égale largeur publiés, donnera cette présentation en frontend :

layouts-utility-example1

Si vous bougez le curseur ci-dessous pour choisir différentes largeurs pour ces 4 positions, un tooltip sur le côté vous montrera la valeur numérique de la configuration.

layouts-utility2

Dans ce cas, vous pouvez voir que nous avons fait glisser le curseur vers la gauche et que nous avons choisi la mise en page 2 | 3 | 4 | 3, ce qui signifie que la position du module utility-a se voit attribuer 2 grilles (sur les 12 colonnes), utility-b s'en voit attribuer 3, utility-c s'en voit attribuer 4 et utility-d est réglé sur 3 grilles. Après avoir cliqué sur Appliquer (Apply) ou Sauver (Save) cela provoquera le changement de mise en page du site et s'affichera ainsi :

layouts-utility-example2

Vous vous apercevez que les proportions  2 | 3 | 4 | 3 ont été appliquées dans la mise en page. Gantry est si flexible que vous pouvez configurer différentes mises en page avec différents nombre de position de modules. Joomla a la capacité d'afficher différents modules en fonction de différents éléments de menus, vous pouvez donc avoir  4 modules publiés sur la page d'accueil mais seulement 2 dans une page secondaire, par exemple. Pour répondre à cela, vous pouvez simplement cliquer sur 2 dans la liste des positions et choisir une mise en page qui s'adapte à vos besoins :

Utility Positions

Cela se traduira par 8 | 4 ou formulé d'une autre manière, une distribution 2/3 et 1/3 des 2 modules :

layouts-utility-example3

Mainbody Layouts

Les mises en page pour la zone principale mainbody est légèrement différente des autres mises en page de module. La principale différence est que le corps principal est généralement affiché aux côtés barres latérales allant jusqu'à 3. Cela donne à un template basé sur ganty la possibilité de prendre en charge effectivement une disposition en 4 colonnes. Nous avons étudié un grand nombre de sites et avons déterminé que plus de 4 colonnes pour une mise en page est chose très rare et que cela devient vite illisible en raison de la quantité limitée d'espace disponible. En général, 2 ou 3 colonnes est l'agencement privilégié d'un site Web moderne.

layouts-mb-example1

Cette présentation est contrôlée dans les paramètres du template. Comme vous pouvez le voir ci-dessous, le widget comprend qu'il y a 3 colonnes latérales publiées, ainsi quand le mainbody est pris en compte, cela crée une mise en page 4 colonnes. La configuration actuelle est réglée sur 6 | 2 | 2 | 2 ou le mainbody utilise 6 unités de grille, et les 3 sidebars en utilisent chacun 2.

layouts-mb1

Si vous bougez le cuseur vers la gauche, vous verrez les positions se mélanger en donnant différentes options d'affichage ainsi que de grandeurs de chacun. Avec 4 colonnes au total il n'y a pas beaucoup de place pour avoir des largeurs de colonnes très variables,nous allons donc désactiver l'une des colonnes en désactivant les modules dans la position de module sidebar- c à l'aide de notre gestionnaire de module. Ci-dessous, vous apercevez comment la disposition par défaut est actuellement configurée lavec seulement 2 sidebars publiées:

layouts-mb2

Comme vous pouvez le voir, c'est réglé pour que les 2 barres latérales s'affichent sur la droite en prenant chacune 2 unités de grille (sur 12), tandis que le mainbody est sur la gauche occupant 8 unités. Faire glisser le curseur vers la droite fournira un large éventail d'options de mise en page.
Cet exemple montre une disposition de 3 | 6 | 3, où le mainbody est au milieu:

layouts-mb3

Après avoir cliqué sur le bouton Enregistrer (Save) ou sur le bouton Appliquer (Apply) dans la barre d'outils, vous pourrez voir cette mise en page appliquée au site :

layouts-mb-example2

Cette section explique comment créer une nouvelle préconfiguration personnalisée dans un template compatible Gantry.

Au cours du développement du framework Gantry, nous avons constaté que nous devions organiser des ensembles de paramètres dans des groupes personnalisés de paramètrages associés. Vous pouvez créer vos propres éléments dans  templateDetails.xml pour permettre le réglage des paramètres spécifiques que vous pourrez utiliser plus tard dans vos propres fonctionnalités, mises en page, etc. Un bon exemple de ceci est la chaîne inactive qui contrôle quel élément de menu doit s'afficher lorsque le menu est inactif. Le code XML en question ressemble à ceci:

<param name="inactive" type="chain" label="INACTIVE"  description="INACTIVE_DESC">
    <param name="enabled" type="toggle" default="1" label="ENABLED"  setinmenuitem="false" />
    <param name="menuitem" type="menuitem" label="SELECT_MENU_ITEM" setinmenuitem="false" />
</param>

Ce bloc de paramètre se compose d'un élément chaîne parent. Cet élément a un nom appelé 'inactive'. Au sein de la chaîne, sont deux éléments, dont l'un est un interrupteur appelé 'enabled' et l'autre est un élément menuitem nommé 'menuitem'.

Maintenant, vous pouvez obtenir les valeurs de ces paramètres en utilisant simplement l'appel:

global $gantry;
echo $gantry->get('inactive-enabled');
echo $gantry->get('inactive-menuitem');

Toutefois, dans Gantry, nous avons une fonction pour gérer l'état «inactif» ​​, et nous avons donc une caractéristique essentielle appelé GantryFeatureInactive qui ressemble à:

class GantryFeatureInactive extends GantryFeature {
    var $_feature_name = 'inactive';
    function init() {
        global $gantry, $Itemid;
        $enabled = $this->get('enabled');
        if($enabled) {
            $menus = &JSite::getMenu();
            $menu  = $menus->getActive();
            if (null == $menu){
                $menuitem = $this->get('menuitem');
                $menus->setActive($menuitem);
                $Itemid = $menuitem;
            }
        }
    }
}

Les fonctionnalités par défaut sont à la recherche d'un ensemble de paramètres enchaînés, donc en réglant $_feature_name sur inactive, et à l'aide de la fonctionnalité construit par la méthode get() ,nous n'avons pas besoin d'utiliser le nom complet de la chaine inactive-menuitem, comme la méthode de la fonctionnalité génère automatiquement le préfixe du nom de la fonction pour obtenir le paramètre correct.

Gantry comporte deux parties principales, le framework et le template, qui sont liées mais indépendantes. Si vous souhaitez désinstaller uniquement la partie template, vous l e pouvez, suivez alors les instructions pour supprimer le template uniquement. Si vous voulez garder la bibliothèque Gantry installée, cela ne nuit pas vraiment car elle n'est utilisée que par un template compatible Gantry, mais si vous souhaitez désinstaller la bibliothèque également, vous pouvez suivre également la seconde étape.

L'onglet Avancé (Advanced) dans l'administration d'un template basé sur gantry fournit plusieurs options pour configurer les paramètres de menu pour le template. Les paramétrages suivants sont disponibles :

Display Component (Afficher le composant)

L'option d'affichage du composant vous permet d'activer / désactiver l'appel du composant Joomla sur la première page. Ceci est utile pour les sites et les templates qui veulent utiliser un frontpage qui est entièrement composé de modules, avec seulement les sous-pages affichant le composant Joomla.

advanced-afficher-composant

Mainbody Enabled (Mainbody activé)

L'option Mainbody Enabled (Mainbody activé) vous permet d'activer / désactiver la section mainbody en entier. Ceci est utile pour les sites et les templates qui veulent utiliser un frontpage qui est entièrement composé de modules, avec seulement les sous-pages affichant le composant Joomla.

advanced-mainbody

RTL Support (Mode RTL)

RTL signifie " de droite à gauche" et c'est un élément clé lorsqu'il s'agit de livrer un site web dans une langue comme l'hébreu, l'arabe, l'ourdou, etc...  Gantry a une construction supportant le mode RTL qui va automatiquement basculer l'affichage des contenus et l'ordonner pour accepter le RTL. Cette option vous permet d'activer / désactiver la prise en charge intégrée RTL qui est automatiquement détectée et affichée selon le paramètre le fichier de langue.

advanced-rtl

Page Suffix (Suffixe de Page)

L'option Suffixe de page vous permet d'activer / désactiver les classes suffixe pages s'ajoutant à la balise body. Avec cette option activée, toutes les classes suffixe de page utilisés pour des pages particulières dans joomla auront ce suffixe ajouté à la balise body pour permettre de styliser et de personnaliser page par page.

advanced-page-suffix

Template Typography (Typographie du template)

L'option Template Typography (Typographie du template) vous permet d'activer/désactiver des éléments typographiques spécifiques lors du chargement, comme la sélection entre typographie clair et foncé.

advanced-typography

Selectivizr

Activer ou désactiver le support Selectivizr pour IE8 fournit des sélecteurs CSS supplémentaires pour une meilleure compatibilité.

advanced-selectivizr

Less Compiler

Less est utilisé pour toutes les CSS, c'est un compilateur côté serveur. Ces options permettent de déterminer le délai sur ce processus de compilation, si la compression CSS y est aussi infusée et si vous voulez déboguer l'en-tête. Il y a également un bouton pour vider le cache LESS.

advanced-less

Sous-catégories

Documentation officielle de Rocket Theme traduite en français

Contact
Parlons social
Recevoir des nouvelles du site