Tutoriels sur Joomla et la création de site
tutoriels frameworks / templates
Tutoriels sur Gantry, Vertex, Helix ... etc ...
(documentation personnelle ou traduction de la documentation originale)
Sous-catégories
Tutoriels Gantry5
Gantry5 remplace avantageusement Gantry4 !
Retrouvez-ici toutes les procédures pour prendre en main cet outil !
Tutoriels Helix
Retrouvez les tutoriels et toute la documentation Du framework Helix de Joomshaper traduite en français. (http://www.joomshaper.com/documentation/helix/)
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>
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.
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é.
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
Puis cliquez sur découvrir en haut à droite.
Selectionnez Gantry et installez en haut à droite ...
Vous avez désormais deux templates Gantry, indépendants les uns des autres.
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.
É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.
Avec les outils de développement de Chrome, nous pouvons voir que les margin et padding par défaut sont :
- .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.
- #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.
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.
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.
- .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.
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.
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.
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.
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.
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
- Décompressez ce fichier joint et copiez-le dans le dossier /templates/<YOUR_TEMPLATE>/features/
- 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. - Copiez les images dans le dossier /templates/<YOUR_TEMPLATE>/images/logo/
- Dans le gestionnaire de templates modifiez votre tempalte et réglez ainsi Logo show = ON et Autosize = ON
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-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-delete icon-plus-2 icon-minus-2 icon-quote icon-quote-2 icon-database 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-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-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
