Tutoriels sur Joomla et la création de site

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 :

1. .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.

1. #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.

1. .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...