Tutoriels détaillés Gantry5

Comment charger les polices locales dans le thème

Il existe deux approches pour l'ajout de polices locales dans un thème. La première ajoute votre nouvelle police (s) locale au Sélecteur de polices qui vous permet de définir la police d’une zone spécifique ou l’aspect de votre site dans l'administrateur de gantry.

La deuxième méthode définit la police active du thème, globalement. Cette méthode vous permet d'utiliser la nouvelle police locale dans le thème, mais pas dans le Sélecteur de polices. Vous pouvez combiner les deux pour avoir votre police disponible à la fois, en modifiant le fichier theme.yaml et en apportant des modifications à votre fichier custom.scss.

Dans ce guide nous allons utiliser Roboto en tant que notre nouvelle police locale. Vous pouvez la récupérer sur FontSquirrel. Il vous suffit de sélectionner l'onglet WebFont Kit et de télécharger roboto-fontfacekit.zip.

Ajout d’une nouvelle police au sélecteur de polices

Si vous souhaitez rendre votre nouvelle police accessible par le Sélecteur de polices, vous aurez besoin de faire une modification dans le fichier theme.yaml afin d'ajouter la police et définir les associations de graisses de police.

Le fichier theme.yaml est essentiel pour que votre thème fonctionne Si vous effectuez une modification à ce fichier, sachez que celle-ci sera probablement effacée dans le cadre d’une mise à jour du thème. Ceci est vraiment seulement recommandé pour les développeurs qui créent leur propre thème Gantry ou pour les utilisateurs avancés.

Voici les étapes que vous devrez suivre pour y arriver :

Ajouter les fichiers de polices locales dans TEMPLATE_DIR/custom/fonts/.

Une fois cela fait, vous pouvez ajouter votre nouvelle police au YAML dans la section fonts. En utilisant le template de RocketTheme Callisto , par exemple, voici ce à quoi le fichier theme.yaml ressemble par défaut.

fonts:
    sourcesanspro:
      700: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bold/sourcesanspro-bold-webfont'
      700italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bolditalic/sourcesanspro-bolditalic-webfont'
      400italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_italic/sourcesanspro-italic-webfont'
      400: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_regular/sourcesanspro-regular-webfont'
    lato:
      900: 'gantry-theme://fonts/lato/lato_black/lato-black-webfont'
      700: 'gantry-theme://fonts/lato/lato_bold/lato-bold-webfont' 

fonts:
  sourcesanspro:
    700: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bold/sourcesanspro-bold-webfont'
    700italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bolditalic/sourcesanspro-bolditalic-webfont'
    400italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_italic/sourcesanspro-italic-webfont'
    400: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_regular/sourcesanspro-regular-webfont'
  lato:
    900: 'gantry-theme://fonts/lato/lato_black/lato-black-webfont'
    700: 'gantry-theme://fonts/lato/lato_bold/lato-bold-webfont'  
  roboto:
    400: 'gantry-theme://fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont'
    400italic: 'gantry-theme://fonts/roboto/roboto_italic_macroman/Roboto-Italic-webfont'
    400: 'gantry-theme://fonts/roboto/roboto_condensed_macroman/RobotoCondensed-Regular-webfont'
    400italic: 'gantry-theme://fonts/roboto/roboto_condenseditalic_macroman/roboto_condenseditalic_macroman'
    700: 'gantry-theme://fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont'
    700italic: 'gantry-theme://fonts/roboto/roboto_bolditalic_macroman/Roboto-BoldItalic-webfont'
    900: 'gantry-theme://fonts/roboto/roboto_black_macroman/Roboto-Black-webfont'
    900italic: 'gantry-theme://fonts/roboto/roboto_blackitalic_macroman/Roboto-BlackItalic-webfont'

Ajout d’une nouvelle police à votre thème

Si vous voulez que les polices locales soit chargées sur votre site, vous pouvez le faire en suivant ces étapes simples :

@import "vendor/bourbon/bourbon";
@import "nucleus/theme/mixins/typography";
@include import-font('roboto’);

Graisses de police (Font Weights)

Voici un guide de référence rapide pour les numéros de graisses de polices dans le fichier theme.yaml, ainsi que mentionné dans le Sélecteur de polices.

Installation d'une police personnalisée : exemple

Dans cet exemple, nous allons vous expliquer comment vous pouvez ajouter la police gratuite personnalisée Bloody dans votre template Gantry.

Étape 1 : Ajouter vos fichiers de polices personnalisées

Bloody est une police gratuite que vous pouvez télécharger à FontSquirrel. Veuillez vous assurer que vous téléchargez le @font-face Kit.

Décompressez le package et déplacer les fichiers suivants dans TEMPLATE_DIR/custom/fonts/:

• BLOODY-webfont.eot

• BLOODY-webfont.svg

• BLOODY-webfont.ttf

• BLOODY-webfont.woff

  

Étape 2: Ajout du CSS nécessaire

Créez votre fichier de feuille de style personnalisée, custom.scss, et l'ajouter à TEMPLATE_DIR/custom/scss/.

Ajoutez ce qui suit dans le fichier SCSS personnalisé:

/* Adding Font BLOODY */

@import "vendor/bourbon/bourbon";
@include font-face('BloodyNormal', 'gantry-theme://fonts/BLOODY-webfont');

.font-family-bloody {
  font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}

Utilisation de la police

Une fois que vous avez ajouté la police dans le répertoire de contenu personnalisé de votre thème, vous pouvez l'appliquer à votre site. Par exemple, si vous vouliez que le titre d'une particule apparaisse dans la police de caractères Bloody, vous devez le référencer dans le fichier Twig de la particule.

{% if particle.headline %}<h1 class="font-family-bloody">{{ particle.headline|raw }}</h1>{% endif %}

Comme vous pouvez le voir, nous avons réglé le style h1 à font-family: BloodyNormal;. Comme cette famille de polices est définie dans le fichier custom.scss, il devrait finir par trouver Bloody et le présenter en frontend.

Il y a encore une étape qui reste à faire. Vous devez Recompiler le CSS dans le panneau d'administration Styles dans l'administrateur Gantry. Faire cela va forcer Gantry recompiler le CSS, y compris les modifications apportées dans le fichier custom.scss. Une fois que vous avez fait cela, vous devriez être en mesure de recharger la page et de voir vos modifications.

Vous pouvez également y faire référence dans les balises Span dans les champs de texte de l'administrateur Gantry. Par exemple, <span style="font-family: BloodyNormal;">Key Features</span> fonctionnera également dans les cas où vous voudriez changer la police pour une seule instance de particule.

La page d'erreur est considérée comme une page système dans Gantry 5, et la modifier pour répondre à vos besoins est aussi facile que de basculer d’outlines dans l’Administration Gantry.

Vous n’avez pas à créer un autre outline Error. Il est en fait inclus dans le noyau de Gantry avec ses propres layout, paramètres, et options de styles.

La première étape pour la personnalisation de cette page est d'accéder à l'administrateur Gantry en accédant à Admin → Extensions → Templates en sélectionnant votre template Gantry 5 actif. Cela vous mènera à l’administrateur Gantry

A partir de là, vous devrez sélectionner Error dans le menu déroulant Outlines. Cela charge le schéma de la page d'erreur, vous donnant accès à ses panneaux d'administration Layout Manager, Settings, et Styles.