Suite à la demande de #donuts, je reviens aujourd'hui pour vous montrer et vous expliquer en détails comment changer la typographie de votre blog en dehors de celles qui sont proposées par Eklablog. Dans un premier temps, il faut télécharger la police que vous souhaitez importer sur votre blog. Je vous propose deux sites, qui sont selon moi intéressants d'aller voir. Il y a tout d'abord, le très connu Dafont, mais attention à bien vérifier que le set de caractères contient bien les caractères accentués et toute la ponctuation si vous souhaitez l'utiliser pour le corps de texte. Après c'est moins dérangeant si vous l'utiliser pour les titres. Sinon je vous propose également Font Squirrel qui permet de convertir les polices dans différents formats autre que les TrueType qui sont proposés.

 Une fois la police téléchargée, on dé-zip le ficher et on se retrouve avec la licence et la ou les polices au format ttf et/ou otf. Ce sont ces polices aux extensions ttf et otf qu'on va utiliser par la suite. A savoir que ces formats TrueType ne sont pas supportés par tous les navigateurs. En effet, c'est le cas pour Internet Explorer 11 où ils sont partiellement supportés et pas du tout par les versions inférieures à la 11 donc les personnes utilisant IE11 ou une version antérieure auront une police de substitution à la place c'est pourquoi il faut toujours vérifier toujours le rendu sur différents navigateurs et pas juste sur celui qu'on utilise.

 Dans l'exemple ci-dessus, on voit que j'ai un ficher au format ttf.

Maintenant qu'on a la police il suffit de l'upload dans la bibliothèque de fichiers que propose Eklablog dans Contenu/ Gérer les fichiers/ Upload un fichier. Une fois cela fait, lorsqu'on clique sur le fichier en question on obtient l'URLde la police. C'est celle-ci dont on aura besoin pour appeler la police dans le navigateur et l'afficher.

 CODE CSS:

@font-face {
font-family: "NOM DE LA TYPOGRAPHIE"; 
src: url('URL');}

Il suffit de copier/ coller le code CSS ci-dessus dans Apparence/ Modifier le thème/ Ajouter du CSS. Nous allons maintenant modifier ce code pour ajouter la police qu'on vient de charger. Entre les guillemets après la propriété font-family, donner un nom à votre police. Elle sera ensuite utilisée dans les déclarations de style. vous pouvez mettre ce que vous voulez mais éviter les espaces, tirer et chiffres. Je vous conseille d'utiliser seulement des majuscules et des minuscules. Ensuite, il suffit de copier l'URL de la typographie comme on a vu un peu plus haut.

 Maintenant, on va appliquer la police aux sélecteurs concernés. Personnellement, je ne connais pas par cœur le nom des sélecteurs pour chaque élément donc en général, je vais aller les chercher par moi-même en inspectant les éléments en question. Pour le titre des modules c'est .module_menu_titre et celui des articles .module_titre. Si vous souhaitez  modifier tout menu de gauche vous utiliserez #menu1 et #menu2 pour celui de droite. Pour appliquer sur la police sur le titre des articles, on utilise le code css suivant:

CODE CSS:

.module_titre{
font-family: "NOM DE LA TYPOGRAPHIE";}

 Comme vous pouvez le voir, il s'agit de la ligne font-family qu'on a copié auparavant qu'on rappelle pour le sélecteur concerné et le tour et joué.  Il suffit de faire pareil pour les autres éléments dont vous souhaitez modifier la typographie. Je vous mets ci-dessous un exemple de rendu sur mon blog Le monde de Nino une fois le code appliqué.

Si vous avez encore des questions, n'hésitez pas à me les laisser en commentaire.

Un remerciement fait toujours plaisir :)

Je vous avais montré précédemment comment arriver en haut ou en bas de la page grâce au générateur de boutons de navigation. Aujourd'hui je vous montre comment obtenir le même résultat avec vos propres flèches haut et bas comme je l'ai fait pour le thème v.6 du blog. Il s'agit d'un code HTLM qui est complété avec un code CSS pour le positionnement des flèches sur la page.

CODE HTLM:

<div id="fleche"><a href="#header"> <img src="URL DE LA FLECHE HAUT" alt="" /> </a> <a href="#footer"> <img src="URL DE LA FLECHE BAS" alt="" /></a></div>

CODE CSS:

#fleche {position: fixed;
top: X%;
left: X%;} 

Il suffit de coller le code HTLM dans un module toujours apparent dans l'onglet code source lorsque que vous éditez le module.  Ajouter ensuite l'URL de vos différentes flèches. Pour le code CSS aller dans Apparence/ Modifier le thème/ Ajouter du CSS et copier le code CSS. Modifier les valeurs de X et le tour et jouer! Si vous avez des questions, n'hésitez pas à me laisser un commentaire.

Un remerciement fait toujours plaisir :)