https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Helix mets à votre disposition un outil vous permettant de modifier certaines polices (ou fontes, selon vos habitudes de langage), basé intégralement sur Google fonts.

Au moment de la création de votre site internet, vous choisirez ainsi en quelques clics le design typographique de votre site web.

Mise à jour de la liste des polices Google dans Helix

Le service Google fonts est régulièrement fourni en nouvelles polices, Helix est prévoyant et en un clic vous pouvez voir la liste à jour des polices en cliquant sur ce simple bouton.

typo1

Voilà, c'est fait ! Si de nouvelles polices sont présentes chez Google fonts elles apparaitront dans votre liste.

Modifier une des polices de votre site

Choisir la famille de police

Par zones, vous disposez de différents sélecteurs, et que ce soit en anglais ou avec la version française de web54 les intitulés sont explicites. (1)
Vous activez / desactivez la police (2) et la choisissez dans la liste déroulante, dans notre cas nous choisirons la police PT Serif (3).

 typo2

Choisir la largeur de la police et le style :

Selon les polices vous avez la possibilité de choisir entre différents styles et largeur de police (à ne pas confondre avec la taille!)

typo3
Vous observerez que l'exemple en dessous du choix se modifie en temps réel afin de bien prévisualiser l'effet obtenu.

Choisir un sous-ensemble de police :

Les polices google sont, pour certaines, divisées en sous-ensemble.

Nous n'allons pas toutes les citer, mais sachez que pour certaines la différence peut être notable, notamment selon le langauge utilisateur ou celui du site (caractères spéciaux)

 typo4

Choisir la taille du texte :

Enfin, terminons par un élément essentiel, le choix de la taille.

typo5Vous pouvez modifiez par le petit sélecteur à droite (1), ou en tapant directement votre chiffre (2), vous verrez simultanément votre texte changer de taille.(3)

Police additionnelle par sélecteur de css personnalisée.

Helix vous offre la possibilité d'appliquer une police différente à tout élément possédant une classe css particulière, il vous suffit d'activer et de sélectionner votre police dans l'espace réservé à cet effet en bas de l'onglet typographie, et d'ajouter les classes css auxquelles vous voulez appliquer cette police, séparées par des virgules ( ex : sppb-addon-content,sppb-cta-title ).

À vous de jouer !

Pour vos clients, dans le cadre de la création de template destinés à la vente ou au partage, ou tout simplement pour vous même, vous pouvez considérer que les sélecteurs installés par défaut ne suffisent pas.

Nous allons voir comment installer un sélecteur supplémentaire nous permettant de choisir une police pour un élément précis, dans notre exemple .breadcrumb qui cible le fil d'ariane.

Créer le sélecteur de police dans templateDetails.xml

ouvrez et éditez par ftp le fichier templateDetails.xml.

 newtypo1

Saviez-vous que vous pouvez également y accéder par le gestionnaire de template ?

Trouvez la zone dans le fichier qui gère les polices, aux alentours de la ligne 260

Copiez et dupliquez un groupe de police : il y a deux instructions clairement lisibles , la première qui fait afficher le bouton d'activation, la seconde qui affiche les champs de selections.

Dans notre cas d'étude, nous copions le groupe « helix body font » et dupliquons en renommant tout ce qui est body en breadcrumb et en veillant bien de respecter la casse !

Ce qui nous donne :

<field type="group" title="HELIX_BREADCRUMB_FONT" subtitle="HELIX_BREADCRUMB_FONT_DESC" />

<field name="enable_breadcrumb_font" class="parent breadcrumb_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">

<option value="1">HELIX_YES</option>

<option value="0">HELIX_NO</option>

</field>

<field name="breadcrumb_font" type="typography" class="child breadcrumb_font breadcrumb_font_1" default='{"fontFamily":"Open Sans","fontWeight":"300","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 

Nous voyons apparaître le sélecteur dans l'onglet typographie du template.

 newtypo2

Modifier le fichier langue

Les fichiers de langues sont dans le dossier language/votre_langue chez nous, puisque nous avons installé le fichier fr-FR mis à disposition par web54 ce sera langage/fr-FR/fr-Frtpl_shaper_helix3.inioptions preset2

Nous allons ajouter les deux chaînes et leurs variables :

HELIX_BREADCRUMB_FONT="Police Breadcrumb"
HELIX_BREADCRUMB_FONT_DESC="Cette police google sera appliquée sur la balise &lt;breadcrumb&gt;."

Sauvegardez,vous apercevez maintenant votre texte modifié dans votre préréglage.

 newtypo3

Appeler le paramètre de police par le fichier index.php

Maintenant que nous avons un sélecteur, il faut envoyer l'information au template, ou du moins que le template aille chercher l'information.

Cela se passe dans le fichier index.php à la racine du site.
Ouvrez le pour l'éditer avec votre éditeur de texte (notepad++ par exemple)


aux alentours de la ligne 53, ajoutez les lignes suivantes :

//Breadcrumb Font

if( $this->params->get('enable_breadcrumb_font') ) {

$webfonts['.breadcrumb'] = $this->params->get('breadcrumb_font');

}

 

Ces lignes envoient l'information à helix de modifier la police à tout ce qui porte la classe .breadcrumb.

La première ligne est un commentaire.
La seconde initie l'instruction par une condition.
La troisième applique la condition (ne pas oublier le point si cela s'applique à une classe, le # pour un ID, et ne rien mettre si cela s'applique à un élément (body, h1)

Sauvegardez, visualisez dans votre template.

newtypo5

Si la police est activée dans votre backend, vous devriez voir le changement s'opérer.