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

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

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

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

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

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

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