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

Tutoriels Gantry

Il y a des moments où vous n'avez tout simplement pas envie d'avoir vos modules qui prennent toute la place dans une rangée horizontale quelle que soit la configuration. Par exemple, vous voudriez peut-être avoir un module sur la gauche et un module sur la droite, sans rien au milieu. Dans les templates traditionnels de Joomla, vous devrez recourir à deux positions de module spécifiques et l'utilisation de CSS, en les positionnant sur les côtés gauche et droit de votre design.

Le framework Gantry a plusieurs façons pour définir la valeur d'un paramètre de configuration. C'est l'une des choses qui fait que Gantry soit si flexible. Vous pouvez avoir les réglages des paramètres qui sont par éléments de menu et même de surcharger cela avec les paramètres user des sessions de l'utilisateur et les cookies.

Il y a des moyens statiques et dynamiques de définir la valeur d'un paramètre. Les manières statiques de définir les valeurs sont par défaut et par les éléments de menus configurés dans l'administration template. Les manières dynamiques de paramètrer la valeur sont l'utilisation des sessions utilisateurs, les cookies du navigateur des utilisateurs, et la chaîne de requête URL.

 

Priorité de valeur de paramètre

Tous les paramètres débutent avec une valeur par défaut qui est définie dans  template-options.xml. Mais ces valeurs peuvent être modifiées de plusieurs manières différentes, chacunese substituant à l'autre si elle a une valeur. L'ordre de priorité pour définir ces valeurs est montré ici:

URL Query String -> Cookie -> Session -> Per Menu Item -> Default Settings

 

La méthode la plus élevée de définition de la valeur l'emportera toujours. Par exemple, si un backgroundlevel est réglé sur highpar un élément de menu particulier, mais qu'il est mis sur low par un lien URL en passant sur une chaîne de requête, alors il sera mis à low lorsque la page est affichée, car la chaîne de requête URL a une priorité plus élevée que le réglage par l'élément de menu.

Permettre des valeurs de paramètre dynamique

Par défaut, tous les réglages d'une valeur de paramètre par une méthode dynamique sont désactivés. Afin de permettre le réglage d'une valeur dynamique, vous devez l'activer pour chaque paramètre que vous souhaitez et selon les modalités que le paramètre est autorisé à utiliser. Ceci est fait dans template-options.xml. Un paramètre peut avoir la syntaxe suivante avec des setby  et des setin. Voici un exemple de comment c'est fait:

<param name="backgroundlevel" default="med" type="slider" class="graphic-level" label="BG_LEVEL" description="BG_LEVEL_DESC" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true">
    <option>low</option>
    <option>med</option>
    <option>high</option>
</param>

Dans l'exemple ci-dessus, le backgroundlevel peut être réglé par la chaîne de requête de l'URL, un cookie de navigateur et par la session des utilisateurs, c'est défini par les attributs setbyurl, setbycookie,et setbysession. Si une valeur est définie par l'un de ces moyens, il est stocké dans le cookie et la session tel que défini par les attributs setincookie et setinsession

Les attributs autorisés sont:

  • setbyurl - permet de transmettre un paramètre via l'url de chaîne de requête (default = false)
  • setbycookie - vous permets de stocker la valeur qui a été transmise dans un cookie pendant une certaine période de temps (au-delà d'une session unique de php) (default = false)
  • setincookie - vous permet de récupérer la valeur param d'un cookie (default = false)
  • setbysession - vous permet de stocker cette valeur passée pour la durée de la session (default = false)
  • setinsession - vous permet de récupérer la valeur de param de la session (default = false)
  • setinoverride - permets au param d'être surchargé dans les styles de substitution (default = true)
  • isbodyclass - vous permets de définir la valeur du paramètre comme classe sur la balise body pour du ciblage css (default = false)

Remarques sur les Presets

Les types prédéfinis peuvent utiliser les mêmes mécanismes de valeurs dynamiques pour définir les valeurs des paramètres. Si un type prédéfini est utilisé pour définir une valeur dynamique alors tous les paramètres définis dans la présélection ont leurs valeurs réglées à ce qui est dans la présélection. Mais si un paramètre individuel est défini dans le même temps alors la valeur de chaque paramètre se substitue à celle de la présélection.

Par exemple, si vous avez des presets définis comme suit :

$gantry_presets = array(
    'presets' => array(
        'preset1' => array(
            'name' => 'Preset 1',
            'linkcolor' => '#00c',
            'backgroundlevel' => 'low',
        ),
        'preset2' => array(
            'name' => 'Preset 2',
            'linkcolor' => '#ff0000',
            'backgroundlevel' => 'med',
        )
      )
    )
);

Et que les paramètres sont définis comme suit :

<param name="presets" type="preset" mode="scroller" default="preset1" label="STYLE_PRESETS" description="STYLE_PRESETS_DESC" setbyurl="true" setinsession="true" setbysession="true" setbycookie="true" setinmenuitem="false" />
<param name="backgroundlevel" default="med" type="slider" class="graphic-level" label="BG_LEVEL" description="BG_LEVEL_DESC" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true">
    <option>low</option>
    <option>med</option>
    <option>high</option>
</param>

Un appel d'URL avec la chaîne de requête:

?presets=preset2&backgroundlevel=high

Donnerait les valeurs suivantes :

linkcolor=#ff0000
backgroundlevel=high

Il y a plusieurs parties dans Gantry: la bibliothèque, le composant, le plugin et le template; et qui relèvent d'un processus de mise à jour similaire.

Il existe deux méthodes de mise à niveau de la bibliothèque de Gantry, soit par la mise à jour Joomla soit par une réinstallation de substitution.

RTL est le raccourci utilisé pour “right-to-left” (droite à gauche) et c'est un élément clé quand on doit livrer un site web dans une langue RTL comme l'hébreu, l'arabe, l'ourdou, etc. Gantry a incorporé une prise en charge RTL qui "basculera" automatiquement les mises en page du contenu et certaines commandes pour que cela soit compatible RTL. Gantry fournit également un override dans la section avancée des détails du template, donc vous pouvez désactiver ou activer ce comportement par defaut si vous le désirez. Toutefois, par défaut, si le fichier de langue le permet, RTL sera activé.

La commande pour dire à Joomla qu'une langue doit être affiché au format RTL se trouve dans le fichier XML du langage. Dans le cas de la valeur par défaut fr-FR langue, il y a un fichier de configuration situé ici :

VOTRE_SITE/languages/fr-FR/fr-FR.xml

Ce fichier ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<metafile version="2.5" client="site">
    <tag>fr-FR</tag>
	<name>French (fr-FR)</name>
    <description>French site language for Joomla 3.0</description>
	<version>2.5.9.1</version>
	<creationDate>4 feb 2013</creationDate>
	<author>French translation team : joomla.fr</author>
	<authorEmail></authorEmail>
	<authorUrl>www.joomla.fr</authorUrl>
	<copyright>Copyright (C) 2005 - 2013 Open Source Matters &amp; joomla.fr. All rights reserved.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<metadata>
		<name>French (fr-FR)</name>
		<tag>fr-FR</tag>
		<rtl>0</rtl>
		<locale>fr_FR.utf8, fr_FR.UTF-8, fr_FR.UTF-8@euro, fr_FR, fre_FR, fr, france</locale>
		<firstDay>1</firstDay>
	</metadata>
	<params />
</metafile>

L'élément important est la balise <rtl /> qui est actuellement réglée sur 0. En passant cette valeur à 1, vous basculerez sur RTL pour ce language.

Un exemple visuel de la façon dont ça a l'air / fonctionne peut être vu ci-dessous. La première image est par défaut en anglais dans le format LTR traditionnel, tandis que le second est la même valeur par défaut anglais, mais avec le RTL activé dans le fichier de langue en-gb.xml.

rtl-ltr
rtl-rtl

Restrictions du RTL

Gantry fournit un grand nombre de fonctionnalités clés en main pour appliquer RTL directement. Cependant, RTL est compliqué et votre mise en page spécifique aura besoin d'intégrer plus profondément RTL dans vos dossiers de CSS pour manipuler correctement les besoins de votre design quand vous serez en mode RTL. Par exemple si vous avez un en-tête de module qui est formé comme un ruban qui entre sur le côté gauche du module dans le mode LTR régulier, alors vous devez créer une version spéciale de ce ruban qui entre du côté droit pour le mode RTL. Aussi, vous devrez fournir les modifications spécifiques à la mise en page dans votre fichier CSS pour vous assurer que cette image soit rendue correctement.

Pour vous aider dans ce processus, Gantry (Rocketheme) a créé une fonction spéciale qui détecte le mode RTL, et insère donc une classe appelée rtl dans la balise body. De cette façon vous pouvez ajouter des règles spécifiques comme:

body.rtl .module .ribbon {float:right;}

pour seulement cibler la classe .ribbon en mode RTL.

D'autres limitations sont entièrement basées sur les navigateurs. Certains navigateurs prennent en charge le mode RTL très bien. Sans surprise ce sont les navigateurs Mozilla et WebKit base: Firefox, Safari, Chrome, etc. Internet Explorer, même la dernière version 9.0 release fait un très mauvais travail de rendu en mode RTL, et vous aurez surement à passer du temps supplémentaire à faire des CSS qui fonctionnent pour ces navigateurs. C'est bien au-delà de la portée de ce que Gantry peut faire pour vous.

Le Framework Gantry est au départ basé sur le système 960 Grid  qui propose une  structure en 12 colonne basée sur un affichage fixe d'une largeur de 960px. A partir de la version 4.x, le système de grille responsive Twitter's Bootstrap est désormais utilisé.

Consultez la vidéo d'introduction de gantry pour voir les capacités responsives des templates propulsés par gantry 4. Caractéristiques puissantes, préréglages, configuration de disposition, responsive design, et beaucoup, beaucoup plus.


L'affichage dynamique ou mise en page responsive s'adapte à l'appareil de visualisation, comme un smartphone, une tablette ou un ordinateur de bureau, en se basant sur la résolution de l'écran. Il existe cinq formats de largeurs différents, et chacun utilise la structure de grille d'une manière différente, il faut donc les proposer. Ceci est réalisé par @media queries qui peut détecter la largeur de la fenêtre du navigateur, et permet différents CSS en conséquence. Il s'agit de la fonction de base qui rend possibles les designs responsives. En réalité, un site simple s'adaptera automatiquement au dispositif de vision, sans avoir besoin de mises en page distinctes, comme pour le mobile.

Notez-le, une mise en page responsive ne détecte pas un périphérique spécifique, il ne détecte que la largeur de l'environnement de visualisation, donc tous les noms comme smartphone ou tablette sont seulement des raccourcis pratiques.

Info sur la Grille Responsive

Le système de grille responsive est conçu pour les systèmes de bureau, tablette et smartphone, chacun avec des modifications mineures pour assurer la compatibilité en fonction du mode. Le tableau ci-dessous indique la répartition des résolutions d'écran et des périphériques associés, et quels types de mise en page sont ensuite appliqués à chacun.

responsive1

Les Classes d'assistance Responsive

Une autre fonctionnalité utile disponible, à travers Bootstrap, est la collection de classes utilitaires responsive qui peut être utilisée pour aider à modifier les mises en page en fournissant une méthode simple pour afficher ou cacher les modules. Insérez les classes ci-dessous dans vos vos réglages de module pour montrer/cachez un module pour un mode particulier, ou ajoutez la à un élément spécifique dans votre contenu.

responsive2

Media Queries

Les media queries CSS actuelles ressemblent à ceci:

    /* Smartphones */
    @media (max-width: 480px) { ... }
     
    /* Smartphones to Tablets */
    @media (min-width: 481px) and (max-width: 767px) { ... }
     
    /* Tablets */
    @media (min-width: 768px) and (max-width: 959px) { ... }
     
    /* Desktop */
    @media (min-width: 960px) and (max-width: 1199px) { ... }
     
    /* Large Display */
    @media (min-width: 1200px) { ... }

Navigation

Le système de menu pour un appareil smartphone sera celle d'un select-champ. Un champ de sélection est une excellente solution pour cela parce que la plupart des téléphones ont nativement de beaux éléments de sélections dans l'interface utilisateurs. Suivre cette méthode est nécessaire pour rendre le menu accessible sur les périphériques mobiles, parce que Fusion, et nos autres types de menu, sont tout simplement trop complexe pour apparaitre efficacement sur ces appareils. Un nouveau système de menus sera créé et sera responsive, mais fera toujours partie de Gantry

Tous les autres tailles vont utiliser le système de menu normal s'appuyant sur RokNavMenu, comme Fusion Menu ou SplitMenu.

responsive3

LESS est un langage dynamique de feuilles de style qui améliore le CSS avec des comportements dynamiques tels que des variables, des mixins, des opérations et des fonctions. LESS permet que votre code soit plus propre, optimisé tout en réduisant également la durée globale pour créer et maintenir votre base de code.

Gantry prend en charge LESS, en implantant le compilateur et les processus de base dans le Framework lui-même. En outre, les templates administration et frontend sont construits avec des fichiers LESS qui sont alors envoyés comme des fichiers CSS vers le navigateur. Gantry gère tout le traitement complexe, de sorte que vous puissiez vous concentrer uniquement sur le style.

Remarque, lors des modifications, n'oubliez pas de:

  1. Modifier toujours le fichier .less et non pas les fichiers compiled .css qui sont rendus dans le dossier /css-compiled/
  2. Vous assurer que les dossiers du template /less/, /css/, et /css-compiled/ sont inscriptibles
  3. Nettoyer les caches de Less, Gantry et du navigateur

LESS: l'essentiel

LESS est conçu pour améliorer le CSS, ainsi vous débutez selon les principes de base et les attributs qui sont associés au CSS, IDs, classes et tous les autres. Par conséquent, le format vous semblera familier. En termes d'exemples, les fichiers /LESS seront présentés d'abord, suivis par les fichiers Compiled CSS qui sont les fichiers de sortie qui apparaissent dans le répertoire /css-compiled/ .

Variables

Ce sont des valeurs standards qui peuvent être répétés tout au long de vos feuilles de style, et ainsi, un changement de ligne va générer un changement global, plutôt que d'avoir à changer manuellement chaque instance. Un exemple à partir du template Gantry est ci-dessous:

    //LESS
    @bodytitle: #303030;
    ...
    a:hover {
    color: @bodytitle;
    }
    h1, h2, h3, h4, h5, h6 {
    color: @bodytitle;
    }
    /* Compiled CSS */
    a:hover {
    color: #303030;
    }
    h1, h2, h3, h4, h5, h6 {
    color: #303030;
    }

Comme vous pouvez le voir dans l'exemple ci-dessus, n'importe où @bodytitle est utilisé dans les fichiers LESS, il sera remplacé par #303030 dans le compilateur.

Mixins

Mixins combine des Variables avec des Fonctions en vous permettant d'inclure toutes les propriétés associées à une classe dans une autre. Ces injections de classe peuvent inclure des fonctions, comme le montre l'exemple issu de LessCSS.org ci-dessous:

    //LESS
    .rounded.corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    }
    #header {
    .rounded.corners;
    }
    #footer {
    .rounded.corners(10px);
    }
    /* Compiled CSS */
    #header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

Règles imbriquées

Les Règles imbriquées servent à l'héritage, ce qui permet à vos feuilles de style d'être plus propres et plus courtes en plaçant des groupes de sélection les unes dans les autres, plutôt que de spécifier chaque instanciation à chaque fois. Voir un exemple de template Gantry ci-dessous:

    //LESS
    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    ul {
    list-style: none;
    }
    li {
    margin-bottom: 8px;
    a, .item, .separator {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    }
    }
    }
    /* Compiled CSS */
    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul.menu ul {
    list-style: none;
    }
    ul.menu li {
    margin-bottom: 8px;
    }
    ul.menu li a, ul.menu li .item, ul.menu li .separator {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    }

Fonctions & Opérations

Les Fonctions & Operations vous permettent d'effectuer des opérations mathématiques sur les valeurs de CSS aussi bien que de manipuler ces valeurs par des fonctions, comme c'est possible avec JavaScript. Voyez l'exemple ci dessous tiré de LessCSS.org:

    //LESS
    @the-border: 1px;
    @base-color: #111;
    @red: #842210;
    #header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
    }
    #footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
    }
    /* Compiled CSS */
    #header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
    }
    #footer {
    color: #114411;
    border-color: #7d2717;
    }

Le schéma ci-dessus est là pour vous présenter les notions de bases de LESS. Pour une présentation plus détaillée du fonctionnement des variables, mixins, fonctions et opérations, veuillez visiter :LessCSS.org.

LESS dans le Template Gantry

Tous les fichiers LESS associés au template sont situés dans le répertoire /templates/[TEMPLATE]/less/ . Gantry 4 utilise un puissant compilateur LESS basé sur du PHP produit par lessphp. Gantry 4 délivre les fichiers LESS transformés dans le répertoire /templates/[TEMPLATE]/css-compiled/ .

Tous les fichiers CSS ne sont pas compilés en un seul fichier. Tout fichier CSS qui doit être autonome, pour l'application de paramètres de template (comme le chargement de Fusion Menu à la place de SplitMenu) sera indépendant du fichier principal /templates/[TEMPLATE]/css-compiled/[OUTPUT_CSSFILE].

Comment sont compilés les fichiers LESS?

Quand un changement est repéré, Gantry recompile automagiquement vos fichiers LESS dans des fichiers CSS. Pour ajouter un fichier LESS, vous avez deux options. Vous pouvez insérer la fonction suivante dans votre code PHP:

$gantry->addLess('NAME.less');

Où NAME.less est le nom de votre fichier less dans le répertoire /templates/[TEMPLATE]/less/. La méthode addLess() accepte plusieurs paramètres facultatifs:

public function addLess([INPUT_LESSFILE], [OUTPUT_CSSFILE], [PRIORITY], [ARRAY_OF_VARIABLES]);

Un exemple de ceci tel qu'utilisé dans le Template Gantry par défaut est :

$gantry->addLess('global.less', $gantry->templateName . '-compiled.css', 8, array('headerstyle'=>'"header-'.$gantry->get('headerstyle','dark').'.less"'));

Vous pouvez voir dans cet exemple que global.less est le fichier source LESS, et ce qui sera produit sera gantry-compiled.css. La priorité a été monté dans le code à 8, et le dernier paramètre est un tableau d'un seul élément headerstyle passé par la compilation LESS. La possibilité de passer des variables rend la compilation LESS très puissante et flexible.

Lorsque vous passez des variables par la compilation LESS votre sortie aura comme format [TEMPLATE]-compiled-[MD5_VARIALBLE_NAME_VALUES], par exemple: gantry-compiled-845729384248h3hf4haeioh.css.

Une autre façon d'ajouter des fichiers LESS est tout simplement de créer le fichier puis ajoutez une référence dans le fichier LESS principal /less/global.less. Le fichier global.less importe les autres fichiers LESS via la fonction @import , voyez l'exemple ci-dessous:

    // Core variables and mixins
    @import "variables.less";
    @import "mixins/index.less";
    // Core and Grid
    @import "gantry-core.less";
    @import "joomla-core.less";
    // Template core styling and layout
    @import "template.less";
    @import "style.less";
    @import @headerstyle;
    @import "prettify.less";

En outre, pour les caractéristiques qui exigent un fichier LESS distinct, vous pouvez employer un grand choix de différentes techniques. La plus simple est d'insérer la fonction add LESS dans /features/styledeclaration.php, comme indiqué dans l'exemple du Template Gantry:

if ($gantry->get('typography-enabled')) $gantry->addLess('typography.less');

Cela ajoute une condition, là où le paramètre typography-enabled est actif, le fichier /less/typography.less sera compilé

Options LESS duTemplate

Vous pouvez commander la compression des CSS, le temps d'attente de la compilation et l'entête de débuggage, ainsi que vider manuellement le cache avec le bouton Clear Cache dans Extensions → Template Manager → gantry → Advanced → Less Compiler.

En outre, la compression CSS augmente les performances du site et l'optimisation en consolidant toutes les CSS en un seul fichier, avec peu ou aucun espace vide. Cela réduit la taille du fichier CSS et le rend plus rapide au chargement dans le navigateur.

advanced-less

Fichiers LESS Personnalisés

Souvent, vous aurez besoin d'ajouter un peu de CSS personnalisé pour remplacer un style particulier dans le template. Vous pourriez vouloir ne pas modifier les fichiers LESS et CSS fournis parce que cela pourrait  occasionner des problèmes au moment de  la mise à jour du template. Avec Gantry 4, vous pouvez créer des fichiers LESS personnalisés de la forme : /less/[LESS_FILE_NAME]-custom.less, et ceux-ci seront repris et compilés dans le fichier CSS principal.

Par exemple, dans le template Gantry par défaut, il ya un fichier appelé less/template.less. Si vous créez un nouveau fichier appelé less/template-custom.less, vous pouvez ajouter vos propres éléments LESS personnalisés ici et ils seraient automatiquement ajoutés à votre fichier CSS compilé.

Sous-catégories

Documentation officielle de Rocket Theme traduite en français

Contact
Parlons social
Recevoir des nouvelles du site