aj j3 gantryComme le site SFK, votre site Aide-Joomla a fait peau neuve et est rentré dans l'ère Joomla 3.

Le choix du nouveau template a été long et s'appuyait sur 3 points principaux :

  • Garder l'identité graphique de votre site favori
  • Etre "Responsive" c'est a dire lisible sur les tablettes et smartphone
  • Au mieux être libre (gratuit)

Nous nous sommes finalement décidés vers un développement via le framework Gantry.

Gantry est le « Framework » conçu par l'équipe de RocketTheme.com en licence OpenSource GPL 2.0. Il est utilisé, depuis décembre 2009, comme sous-couche de tous les templates RocketTheme.

Le pack Gantry c'est : Le Framework , un template « blanc » sur lequel on va s'appuyer pour personnaliser son propre site et une interface de gestion du template dans l'administration Joomla .

Découvrez ici les principaux points clefs.

Je retiendrais et rajouterais :

  • Prêt pour Joomla 3.0
  • Les mises à jour rapides via l'utilitaire Joomla
  • Un forum dédié (en anglais)
  • Template responsive – Vous pouvez même définir quel module apparaitra et où suivant la taille de l'écran défini (moniteur, tablette ou smartphone)
  • La personnalisation aisée
  • Intégration au composant gratuit RokSprocket qui permet de gérer les modules types « Features, Tabs, Lists, Mosaic & Headlines »

Je ne parlerais pas aujourd'hui de la migration joomla 2.5 vers joomla 3, mais de quelques trucs et approches pour développer et adapter son template sous Gantry en prenant pour exemple le site Aide-Joomla.

Dans un premier temps, télécharger ici et installer le site de démonstration de Gantry - Gantry RocketLauncher for Joomla 3.0 et découvrez le.

 

A - Définir les paramètres principaux dans l'administration Gantry

aj-gantry-style

Découvrez ci-dessus nos paramètres. Il est a noter que le "Header Style" sélectionné est le "dark"

B - Modification des feuilles de style – les custom styles

Gantry 4 est pricipalement géré par les CSS dynamiques grâce au langage LESS (.less). Les fichiers classiques en css ne servent que pour les retouches Internet Explorer.

Ce que l'on va faire, c'est, dans un premier temps, modifier les constantes dans les fichier less, puis ajuster ou affiner le style du template en css classique. Afin d'éviter des soucis lors des mises à jour, il est fortement recommander d'utiliser les fichiers custom.

1)  modifications des variables dans les fichier .less

Comme vu plus haut, nous avons choisis le style "Dark". Les 2 fichiers less qui nous interessent sont header-dark.less et menu-dark.less qui se trouvent dans le répertoire less de Gantry. Nous allons donc créer 2 fichiers header-dark-custom.less et menu-dark-custom.less dans le même répertoire par copie des 2 fichiers initiaux. Puis nous modifions dans chaque fichier custom les variables qui nous interessent. Nous supprimons de chaque fichier custom les variables non modifiées.

Fichier header-dark-custom.less

/**
* @version   $Id$
* @author    RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2013 RocketTheme, LLC
* @license   http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
*/
// Top Section - Modification des couleurs  ----------------
@topbackground:			#ff6600;
@topbackground2:		#750a00;
@toptext:			#adadad;
@toptitle:			#ffffff;
@topshadow:			#000000;
// Showcase - Modification des couleurs  --------------------
@showcasebackground:	#212121;
@showcasebackground2:	#4c4c4c;
@showcasebackground3:	#7db9e8;
@showcasetext:		#bbbbbb;
@showcasetitle:		#ffffff;
// Top Drawer - Supression fonds, ombres et lignes en bottom 
#rt-top-surround {
background: none; 
box-shadow:none;
border-bottom: 0px;}
#rt-top-surround:after {
background: none; 
box-shadow:none;
border-bottom: 0px;}
#rt-drawer {
background: none;
border-bottom: 0px;
box-shadow:none;
}

Fichier menu-dark-custom.less

// Dark Header variables
@menuBorder: 			#500509;
@menuDropBack:			#670d12;
@menuInsetShadow:		~"inset 0px 1px 0px #500509, inset 0px 2px 0px #670200";
@menuFullShadow:		~"inset 0px 1px 0px #500509, inset 0px 2px 0px #670200, 0px 1px 1px rgba(0,0,0,0.2)";
@menuActiveBorder:		#3d0205;
@menuActiveBack:		#410509;

Je me suis arrêté à ce niveau concernant les "custom.less", mais tout les fichiers .less peuvent être modifiés de la même manière. Nous avons gardé pour l'instant toutes les variables du fichier variable.less en l'état et préféré faire les autres modifications avec un fichier gantry-custom.css.

2) Ajustement avec le fichier gantry-custom.css

Dans un premier temps, on va créé un fichier vide nommé gantry-custom.css que l'on va placer dans le répertoire css de gantry. Il est à noté que ce fichier est maintenant visible, accessible et modifiable via l'administration joomla au niveau de la gestion des templates.

Attention, ce fichier peut vite devenir un grand foutoir, pour être poli. n'oubliez pas de commenter vos codes.
comme /* Ajouter vos règles personnalisées de CSS ici*/

Vous avez un template existant avec des règles de style définies comme des typographies, collez directement ces codes dans le fichier css custom.

Pour ces manipulations 2 outils sont vos amis, Firebug et l'outil de développement Google Chrome
Je vous propose aussi cet article de RocketTheme (en anglais), Basics: Debugging & Customizing with LESS/CSS

Sur le site Aide-Joomla en joomla 2.5, la gestion du fond (body) était déjà spécifique (template joomlashack). Je m'en vais donc copier mes codes dans le fichier gantry-custom.css.

body
{color:#515151;
background:url("../images/aj/body_bg.png") repeat-x 0 top #c54000;
background-image:linear-gradient(bottom,#c53e00 25%,#df990c 100%);
background-image:-o-linear-gradient(bottom,#c53e00 25%,#df990c 100%);
background-image:-moz-linear-gradient(bottom,#c53e00 25%,#df990c 100%);
background-image:-webkit-linear-gradient(bottom,#c53e00 25%,#df990c 100%);
background-image:-ms-linear-gradient(bottom,#c53e00 25%,#df990c 100%);
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.25,#c53e00),color-stop(1,#df990c));
font-family:Georgia,"Times New Roman",Times,serif;font-size:80%;border-top:7px solid #272727;}

Cela à l'air compliqué, mais cela nous permet de gérer notre fond pour toutes sortes de navigateurs internet. Malgrès cela j'avais un problème sur Internet Explorer 9.
Je l'ai pallié en utilisant ce code 

#rt-top-surround {background: none; filter:none; }


J'ai pas tout compris, mais le resultat est la ;=) - IE c'est vraiment très délicat.

Je vous propose 2 exemples afin de remplacer (overider) les règles de style existantes venant des fichiers .less :

Mettre le fond de la page principale en blanc, un petit espace avec le menu, puis on arrondi les angles ;=)

#rt-main {
background-color: #FFFFFF;
margin-top: 10px;
border-radius: 10px 10px 0px 0px;
}

Un peut plus compliqué, la gestion du menu, bas de page, position bottom

  • Vous avez créé dans la gestion des menus, un menu spécifique pour le bas de page
  • Vous créez un module type "RokNavMenu"
  • Vous y associez votre menu spécifique, assignement toutes les pages, pas de titre
  • Très important : mettre Themes, default fusion, en Theme option - cela permet d'afficher le menu en horizontal

Vous obtenez cela

aj menu bas avant customisation

Vous y mettez les codes magiques ci-après :

 

#rt-bottom .rt-container { background-color: #760b00;border-radius: 0 0 10px 10px;}
#rt-bottom .menutop li .item {
background: none;
border-color: none;
border-style: none;
border-width: 0px;
color: #ffffff;
display: block;
padding: 0 10px;
text-decoration: none;
}
#rt-bottom .menutop li:hover > .item {
text-decoration: underline;
}
#horizmenu-surround ul.menutop {
width: 100%;
text-align: center;
}
#horizmenu-surround ul.menutop li.root {
float: none;
display: inline-block;
}

Et vous avez le résulat en bas de la page que vous lisez.

Toutes les options s'offrent à vous !!

C - Mise en place d'un nouveau style pour les modules

Par défaut, Gantry vous propose une typographie très fournie (cette page est votre ami : http://demo.gantry-framework.org/typography) mais aussi, 7 variations de suffixe au niveau de la classe de chaque module, Box1-3 et Title1-4 (http://demo.gantry-framework.org/features/module-variations)

Bien évidemment on en veut toujours plus.

Si on assigne les suffixes box2 title4 au niveau de notre module community builder, nous obtenons ceci :

box2title4 ini

Nous allons modifier l'habillage du module avec ces codes que l'on place dans le fichier gantry.custom.css

Modification box 2 : Ajout d'un fond jaune et d'une image de fond

.box2 {
background: url("../images/patterns/noise.png") repeat scroll 0px 0px #FFFACD;
}

Modification Title 4 : Ajout d'un fond, diminution de la taille de la police, effet shadow ...

.title4 .title {
background-color: #851400;
background-image: linear-gradient(to bottom, #FF6600, #750A00);
background-repeat: repeat-x;
border-bottom: 1px solid #000000;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
color: #FFFFFF;
font-size: 18px;
line-height: 20px;
padding: 10px;
text-shadow: 1px 1px 1px #000000;
}

Pour arriver à la version de ce jour sur votre page d'accueil (si vous êtes connecté).

box2title4 custom

Bon, vous aurez compris, tout est paramétrable.

N'oubliez pas la documentation Gantry et le Forum RocketTheme, vous y trouverez d'autres trucs et astuces pour agrémenter votre site.

@ Bientôt et n'oubliez pas notre forum pour vos questions

Bertrand alias "Tramber91"

Discussion sur le forum

A propos de l'auteur
Bertrand
Nom: BertrandSite Web: http://www.en-toutes-lettres.fr/
Webmaster En toutes lettres, l'alliance Multimédia, création de sites internet, et Écrivain public, un métier de l'écrit, de service et de relation humaine.

En toutes lettres - web services c'est aussi des tutoriels Joomla, Gantry 5 et Grav.

"Co webmaster du site Aide-joomla.com"
Derniers articles de l'auteur

Liste des participants qui ont commenté cet article

Ajouter un commentaire