Personnalisation

Page 5 sur 6

4-Personnalisation

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

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

4.1-Créer les fichiers personnalisables

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

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

            <?php

            /**

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

            * @version August 1, 2010

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

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

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

            *

            */

            defined('JPATH_BASE') or die();

            gantry_import('core.gantryfeature');

            class GantryFeatureMyCustomStyle extends GantryFeature {

            var $_feature_name = 'mycustomstyle';

            function isEnabled() {

            return true;

            }

            function isInPosition($position) {

            return false;

            }

            function init() {

            global $gantry;

            //demo styles

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

            }

            }

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

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

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

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

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

4.2-Structure de Gantry

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

4.2.1-Aspect du fond

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

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

4.2.2-Personnaliser ces bandes.

- Couleur

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

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

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

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

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

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

4.3-Contenu de Gantry avec Firebug

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

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

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

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

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

4.3.1-Firebug découverte

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

Vous avez l'embarras du choix.

Chargez maintenant le module Firebug adapté à votre navigateur.

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

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

4.3.2-Firebug utilisation

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

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

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

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

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

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

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

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

Gantry pour les nuls - Personnalisation

Index de l'article