Tutoriel Framework YJSG

En plus des 5 types de menu, YJSG est livré avec 3 menus Bootstrap supplémentaires. Pour activer les menus Bootstrap, accédez à votre Gestionnaire de module de menu, nom de l'onglet Yjsg Menu Options et dans le paramètre Select menu type, selectionnez au choix Bootstrap nav pills, Bootstrap navbar ou Bootstrap navbar inverse.

Approche simple

Dans YJSG, nous avons utilisé une approche très simple pour la mise en œuvre des Google fonts . 
Cette option vous permettra d'utiliser toutes les 600 et + familles de polices disponibles dans la bibliothèque de polices Google.

exemple:

Utilisation

Accédez à votre gestionnaire de template, onglet nommé Style et activez les paramètres suivants:

• Paramétrez "Utiliser substitution de polices des balises élément" sur Yes

• "Type de substitution de la balise élément" choisir Google font

• Google Font-Family par défaut ou utilisez le comme dans l'exemple Mouse+Memoirs|cursive|normal

• Dans la zone de texte "sélecteurs concernés" ajoutez les sélecteurs qui doivent utiliser la Famille de fonte de Google définie ci-dessus

 

Paramètres de police Google expliqués

Le paramètre de police Google comporte trois attributs que vous pouvez utiliser et chacun d'entre eux doit être séparé par |:

exemple:

1. Mouse+Memoirs|cursive|normal

Le premier attribut est le nom de police réel pris directement à partir du lien de la feuille de style de police de Google, family= ( inclus + ):

exemple:

1. http://fonts.googleapis.com/css?family=Mouse+Memoirs

Le second attribut est en général une famille de police comme:

• sans

• sans-serif

• cursive

• fantasy

• monospace

Le second attribut peut être combiné:

exemple:

1. Mouse+Memoirs|'Helvetica',arial|normal

2. Mouse+Memoirs|Helvetica,arial|normal

Le troisième attribut est font-weight (graisse de police) que vous pouvez définir comme:

• bold

• normal

• 500

• 700

exemple:

1. Mouse+Memoirs|cursive|normal

2. Mouse+Memoirs|cursive|bold

3. Mouse+Memoirs|cursive|700

Polices multiples

Pour une feuille de style avec plusieurs polices, utilisez un double signe égal entre les noms de police. Notez que la police supplémentaire sera incluse dans la feuille de style Google, mais que vous devrez ajouter les sélecteurs affectés par la police supplémentaire dans l'un des fichiers CSS de template.

exemple:

1. Rock+Salt==Open+Sans:400,500

Ajout dans custom.css :

 

h2.my_class{

font-family:OpenSans,sans-serif;

font-weight:300;

}

 

 

De meilleures polices Web avec @font-face

Depuis CSS2 nous pouvons profiter de @font-face et utiliser des types de polices personnalisés dans nos applications Web. Plutôt que d'être limité aux polices web par défaut nous pouvons maintenant utiliser notre propre famille de police et styler le web comment nous le voulons. Avec la simple inclusion de quelques paramètres CSS, la magie se produit:

balisage:

 

@font-face {
font-family:'PacificoRegular';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'),
url('Pacifico-webfont.ttf') format('truetype'),
url('Pacifico-webfont.svg#PacificoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
font-family:'PacificoRegular',Arial, sans-serif;
}

 

 

Et vous pouvez transformer votre style de police depuis :

en quelque chose de plus élégant comme:

Utilisation des kits de polices FoontSquirrel @ dans les modèles basés sur YJSG

Comme vous pouvez le voir ci-dessus, le processus est simple mais au lieu de rechercher ou de créer des fichiers de polices Web, vous pouvez utiliser le service gratuit fourni par FoontSquirrel qui vous permettra de télécharger ou générer des kits @font-face et les utiliser tels quels dans votre template basé sur YJSG. Pour des fins de démonstration, veuillez aller à @font-face kit True Crimes cliquez sur @ font-face Kit au-dessus du spécimen et cliquez sur le gros bouton bleu qui dit Domwnoad @ font-face Kit.

Si nous utilisons wamp nous allons télécharger le fichier zip dans le dossier site_racine/templates/yjsg_template_name/css/fontfacekits. Si vous le faites sur un serveur en direct, téléchargez le fichier zip, extrayez-le dans son propre dossier et téléchargez ce dossier sur le chemin mentionné ci-dessus. Pour votre commodité, le template YouGrids est livré avec le kit PTSansNarrowBold @ font-face:

Dézippez le fichier True-Crimes-fontfacekit.zip et envoyez le dossier contenant les polices (chaque exemple peut être différent) :

Accédez à votre gestionnaire de templates, nom de l'onglet Style et activez les paramètres suivants:

Utiliser la substitution de police de balises d'éléments réglé sur Oui

Type de substitution de la balise élément @font-face kit

À partir de @ font-face Kit Font-Family sélectionnez, choisissez votre nouveau dossier @ font-face kit qui, dans notre cas, est truecrimes_regular

 

Ajouter des déclarations de style personnalisées

Comme l'utilisation de @ font-face nécessite parfois de changer la taille de la police, le poids de la police ou d'autres attributs de police, nous avons désactivé Le paramètre Selecteurs concernés dans l'admin du template si vous sélectionnez @font-face kit en tant que type de substitution et vous devrez modifier vos déclarations dans
site_racine/templates/yjsg_template_name/css/fontfacekits/votre_font_face_kit/stylesheet.css file.

Assurez-vous que le fichier css de votre dossier @ font-face kit est toujours nommé stylesheet.css et que vous n'avez pas d'espace dans votre nom de dossier @font-face kit. 
Maintenant ouvrez le fichier stylsheet.css et ajoutez ce code pour changer la famille de police pour les en-têtes, le titre de l'article, le titre du module et le nom du composant:

 

h1,h2,h3,h4,h5,h6,.article_title,.module_title,.pagetitle
{
font-weight:normal!important;
font-family:'true_crimesregular', Arial, sans-serif;
}

 

 

 

votre rendu devrait être ceci:

exemple: