Dans un précédent tuto, je vous ai expliqué comment modifier la pagination de Calumma. La partie typographie est beaucoup plus simple. Mais si vous débutez en technique, la configuration des polices mérite quelques explications, en particulier pour le paramétrage des liens.
Nous reprenons la configuration du blog telle qu’elle était après le précédent tuto. Si vous n’avez pas suivi ce tuto, vous pouvez reprendre facilement là où nous en étions avec la fonction d’importation de Calumma. Voici le code à importer :
eNrtW+1uozoQfZWKq/4LEQGSpr0vsdL+rbRywAnWYhwZp2121Xe/tvmyg2nS6SphdUlVqfHYx8PhjO0Z 6G8vEzT3nn57W1YIvyS/sPfkrcL58t57n3nZQpkSljMum/+JkPrxZlbnONi//ds2PMUc06bHKya7TMg+ URC0o8QxV8MKxinKm9YtoiQ/yubn52fvOzvwBN99R0V5940z1TQr5Re/xJxstV/heb+iteVXNF9fxbPo As9sxqKr+BWf9yuMLb/CufNexn/as+V5zxaPlmeL+eNVPFtd4NnqxLPVNTybl0Rg5dwrSUUmhz0GUlMS LGtmRAfB5HeK+I4UvmB72bas+tRt3Nlzw4RgtNc5x1uj7x6lKSl2NWxgtDSgZlsLaTbWgKppw3iKuQJr ySlZTtLOpFGHjBX8kFXNM2RTMzYELvTVWvM5TfVsTpuey2lRM7U6wmG6TXtXN2iuZxy061mHwVFKDmXD NEp+7jg7FKkxAOMNfrSNhKJdpdEC2xYkBEoyigt188qEszy3O+yZlCZhhZrx/i64t60c7zESGrn5u1Gz n2EkHTZFvQj0+A81HfQFHTjUHPSkHFxDxw2BLhnbthMV20ZLxLbJ1HAwpOBgUL/BgHoDt3YFl8vQHnF1 /wf06+xyomFnH0vH7onOaPlk0I31nMh1XeN+TtCh3j5GIOmFdmQS9SRqQ9RbxsTHi/TS1O+o1uhJ0JOg e4LeSG+USP7Sc8ek6UnTzd+zLlVF+nOaqs4frlBomNfnHl+ygXRhKWfaUa3YWRtkq0sy1ul0P8XYWGPM XQ66TozJG7nD/RCrdN3FWDjF2BRjU4zBS6w+Kbbss0fDxVgy+CmkppC69GgYXy2kBBE5HudjxbmknB87 Dxvh1VE+baNTzF8U86TIpKRGtoUK/CZ8fTlbGSOdIzcPOnl1Aqe+ujxjUVjrz+k6FZ88bXV6aLvzZ5zc HHNS4DF7mCDhSx9/lmN2UqBd+ZGX9tK46Ly6Pb2MqgitvB+P8z3X+3taSsTInL6Mcco47jvuTgmu5FKB XhzqvalLdSlgOrNMZ5b/55nlFm/T2c+OfqAfvWWqTbP0JaQ4YRzVdOhrcIG8ENWSfhknYy/VM9oBQi9D QYkgL/aJB+vPxzBm+d9FTBg8LJPgUxguXgAwMFpOQICsGIkllBQbAsqJjQKjxMYAMtKe+qF8mABQNkwM GBcmApCJKrWA0tCOhnLQAsAIaIdD14smbQEvFgYAeKUwMIDLhIEAZKLLjaBUWAhQLiwQGBkWBHgfMfIt +EZig8B3EhsHupXYKNC9pEnowDuJAQDeRwwM4C5iIACZaDNEKBMmAJQJEwPGhIkAZKJNTKFMmABQJkwM GBMmApAJ49E4lAsbAsqGjQLjw8YAMmK8uPmlTKWF+FKe0qJ8IUtpMWCMMJFVM1NS+KEcKW0PK10Mkw3b Q57rJ71hLFt4XatQb1OoHJa3r3V7q0g3VPdIJZlL9Z12AxbqqzvppK78lNqP5JaQ5FSi9O9J1eTXjJuG zc5dNGgM3ZgoitaR+scSevIsnJ4tddALah30kmIHPV/toP0Cl6vC5SxxuUqhpYPOcpDP0iC0Y6zssxmH 8TqubGWGUvaq3pzev92p30j+7jg+ViOrK3ZfbFKqgo4SId7nKFGBIY8Xqun9/T9jKU4G
Pour cette configuration de thème, j’aimerais utiliser la police « Playfair Display ». Pour changer toutes les polices d’un coup, il suffit d’utiliser le champ de formulaire « Replace all font-family » dans la page « Typography » avec la valeur suivante, puis de cliquer sur le bouton « Save » :
Replace all font-family : « Playfair Display »,serif
Comme le nom de la police est en deux mots, il faut impérativement l’encadrer de guillemets. À cela, j’ai rajouté la police « serif », séparée par une virgule. Si pour une raison ou pour une autre, la police que je souhaite n’est pas chargée, une police standard sera utilisée. Comme il s’agit d’une Google Font, elle devrait se charger sans problème.
Parfois, le cache de votre navigateur peut vous jouer des tours et la nouvelle police ne transparaîtra pas tout de suite sur le blog. Si c’est le cas, rechargez votre page en appuyant sur la touche « shift », pendant que vous cliquez sur le bouton de rechargement de page. Cela permet de forcer le rechargement de la page, même si celle-ci était déjà dans le cache du navigateur.
Comme l’en-tête et le pied de page d’origine étaient sombres, leurs couleurs ne sont plus adaptées à un fond clair. La couleur d’affichage du thème par défaut de Calumma, hors zones sombres, est #3a3a3a. Il s’agit d’un gris. Souvent, on utilise un affichage gris plutôt que noir parce que cela donne un thème plus doux. Je vais continuer d’utiliser cette couleur, y compris pour l’en-tête et le pied de page.
Comme le titre principal est un lien, le paramétrage se fait avec les champs « color link » et « color visited ». Le mot clef « visited » désigne que la propriété s’applique à un lien déjà visité. Le mot clef « hover » s’applique à un lien survolé par la souris. Et le mot clef « active » s’applique à un lien sur lequel le visiteur est en train de cliquer.
Page « Typography », onglet « site-branding », section « Main Title » (le fonctionnement des sections est expliqué dans le tuto d’introduction) :
color link : #3a3a3a
color visited : #3a3a3a
font-weight : normal
Et section « Site Description » :
color : #3a3a3a
font-weight : normal
J’en ai également profité pour remettre le « font-weight » à « normal ». Sur certaines polices, un poids à 300 permet de l’affiner ce qui la rend plus élégante. Mais ce n’est pas le cas avec la police que j’ai choisie.
Le problème avec la configuration actuelle est que l’on ne voit pas très bien que le titre du blog est un lien. Seul le pointeur de souris change d’aspect lorsqu’on le survole, mais le lien reste identique. Plus vous voulez qu’un lien soit cliqué, plus il faut le rendre visible. Pour des raisons d’esthétique, le titre du blog apparaît en gris foncé, comme le texte non cliquable du blog, mais il est malgré tout important de signaler qu’il s’agit d’un lien. Pour cela, j’utilise le champ « color hover » dans la section « Main Title » :
color hover : #a52a2a
Maintenant, lorsqu’on survole le lien, la couleur change. J’ai utilisé la couleur que j’ai choisie pour les autres liens du blog. La différence est que les autres liens auront cette couleur sans survol. Il faut également appliquer le même paramétrage au pied de page, page « Typography », onglet « site-info » :
font-weight : normal
color : #3a3a3a
color link : #3a3a3a
color visited : #3a3a3a
color hover : #a52a2a
Il est temps de paramétrer correctement le menu. La configuration du menu fonctionnant un peu différemment du reste de Calumma, la propriété « font-family » n’a pas été changée automatiquement.
Page « Menu », onglet « general »
font-family : « Playfair Display »,serif
font-weight : normal
Onglet « menu »
color : #a52a2a
color:hover : #a52a2a
background-color:hover : #e2dfdd
Onglet « submenus »
color : #a52a2a
color:hover : #a52a2a
background-color : #eeebe9
background-color:hover : #e2dfdd
box-shadow : 1px 1px 1px #e2dfdd
Cette fois-ci, j’ai voulu que les liens soient plus visibles. Ils apparaissent donc dans une couleur différente. Pour la couleur de fond, j’ai repris celle du blog. Lorsqu’un lien est survolé, le fond s’assombrit en utilisant la couleur du cadre du blog. J’en ai également profité pour affiner l’ombre des sous-menus et j’ai aussi utilisé la couleur du cadre du blog.
Je vais maintenant changer la couleur des liens pour le reste du blog et remettre les « font-weight » à « normal ».
Page « Typography », onglet « content-area », section générale (cela correspond au contenu des articles) :
font-weight : normal
color link : #a52a2a
color visited : #a52a2a
Page « Typography », onglet « content-area », section « Entry Title » (cela correspond au titre des articles) :
font-weight : normal
color link : #a52a2a
color visited : #a52a2a
Page « Typography », onglet « widget-area », section générale (cela correspond au contenu de la colonne latérale) :
font-weight : normal
color link : #a52a2a
color visited : #a52a2a
Page « Typography », onglet « widget-area », section « Widget Title » (cela correspond aux titres de la colonne latérale) :
font-weight : normal
Page « Typography », onglet « entry-links », pour les sections « posted-on », « byline », « cat-links », « tags-links », « edit-link », « more-link », « nav-links » (cela correspond aux différents liens en début et fin d’article, date, auteur, catégories, tags, lien d’édition…) :
color link : #a52a2a
color visited : #a52a2a
Toujours dans l’onglet « entry-links », certains éléments de texte avaient été placés en gris plus clair (#888888) pour les rendre plus discrets. J’ai choisi de leur donner la même couleur que le reste du blog. J’ai configuré tous les champs « color » de l’onglet « entry-links » à « #3a3a3a ».
Page « Typography », onglet « h1-h6 », pour les sections « h1 », « h2 », « h3 », « h4 », « h5 », « h6 » (cela correspond à la hiérarchie de titres au sein des articles) :
font-weight : normal
Voici le résultat :
Et voici le code de configuration :
eNrtW+tu4ygUfpXKq/6LI9u59LJ/9wH2ASqNiI1jNMZEmLaTHfXdF/AlEOPEOR25nl2nqpRw4OPw+TvA geSnlwmae88/vZQVwi/JP9h79rbRcnPvfSy8LFSmmOWMy+I/Vkj9eQur8jo4/PizLXhec0ybGu+Y7DMh 6xSMU5S3DcUxx53SFFGSH2Xxy8uL93eOjiki/O4vUh7ke1W2KDEnqXYruu7W6tFya7V8HMOx1QDHbL5W Y7i1vu5WtLbcipajPMjNdcfCJ8uxcPk0hmPbAY5tzxzbjuDYsiQCK9/eSSIy2eQpkHqSQFnTIXoVTH6m iO9J4Qt2kGWbqk5dxp01d0wIRjuVc5wadQ8oSUixr2EDo6QBNctaSLOwBlRFO8YTzBVYS0zJcpKcTBq1 z1jB91lVP3021WNDYKhHa/XnNNW9OW26L6dF9dTKCEdJmnRG12uue+y16177wVFCXsuGaRR/33P2WiRG A4x3+Mk2Eor2lT4LbFuQECjOKC7UwytjzvLcrnBgUpqEFarH+7vg3rZyfMCoiofmfaNmP8NIOmyKOgx0 +4uaDrqCDhxqDjpSDsbQcUOgS8a27UzFttESsW0yNRz0KTjo1W/Qo97ArV3BUVEeEFfPv0e/zipnGnbW sXTs7uiKls8afbGeYzmna9zbBB3p1WMCkg61I7OoZ1Ebok4ZE5cn6Y2p30nN0bOgZ0F3BL2T3iiR/Kb7 jlnTs6ab94trmerywZGZroLg16Wl9Z7Hl0wgfZyUM+2kVuuiDbDtkGx13tnP8fUfiK9fffIjn+MedyOs kvUpxKI5xOYQm0MMfLjqkyJlt24Kw6nk7nNEzRE1NKLWY0WUICLHk7xJXErC+fHkYCO7OsbnNXSO+EER T4pMSmpi0S7wD+Hr4aQyPk6OfHXMycEJnPhqdFfvWNdnd6yjOLg75qTAU/UuRsKX/n0vp+qgQPvykof2 bBiePPpaWhlVAVl5bjn+qF+TdRwnRHSdnjjblHF8wWnLwRHcKdDb4JgaL9WftyXztuT/uS35gi/J2bdC 39C3/tlJjyDBMeOoZkMPwQXyRlRJ8mmcjL1Vt68tCtpEKLoRBcWCvNkbG6xfl2HMw30XMUNcOcNw8QKA 6dIyhNwzECArRuoIJcWGgHJio8AosTGAjLQbeygfJgCUDRMDxoWJAGSiyiCgNLStoRy0ADAC2ubQ+aLJ UMCThQEAnikMDOA0YSAAmTilQlAqLAQoFxYIjAwLAryOGCmWi5AoeNjEwW0gLk4gONClxEaBriVNDgde SQwA8DpiYABXEQMByESbGEKZMAGgTJgYMCZMBCATbU4KZcIEgDJhYsCYMBGATBg331AubAgoGzYKjA8b A8iI8ZXMT2UqLcSn8pQW5RNZSosBY4SJrOqZksKPZEtpe9jqQztZkL7mub7JjdayhNdHFerLEiqF5e0X tr3tShdUz0jloRv1mZ4ahOqjO+GkPekptW/dNrfmphKhS2dV5NeEm4bd3n1k0BhObdpfjNCzq2569aCD DjjpoEOOOuj1sw7aPd5ynW85D7hch5+lg86yl8/SIPT0k5nyApslLTOUsPfqp0B3zb9ZoR60Y7x36sik VEc6SodYSiFWsSF3GKro4+NfNelWBQ==
On pourrait continuer de paramétrer un certain nombre de choses en personnalisant par exemple la taille des polices. Les tailles par défaut des polices de la configuration sont un peu grandes et vous pourriez souhaiter les réduire. Tout cela n’a rien de très complexe et avec les explications que je vous ai déjà données, vous pouvez tout à fait y arriver sans tuto.
Pour cet habillage de blog, j’ai choisi d’utiliser une colonne au fond blanc cassé dans un entourage blanc. Aujourd’hui, de nombreux designs font l’inverse. Peut-on simplement inverser ces deux couleurs ?
On pourrait repasser à un cadre « site » de largeur 100% avec un fond blanc cassé, et utiliser un fond blanc pour les sous-cadres. Pour éviter que le fond soit visible entre les cadres, il ne faudrait pas utiliser de « margin », mais espacer le contenu en utilisant « padding ». Cela serait un peu compliqué.
Il existe un moyen très simple d’inverser les couleurs en utilisant la page « Add CSS ». Ajoutez le code suivant :
body{background-color:#eeebe9;}
Ensuite il suffit de définir en blanc la couleur de fond pour la colonne principale du blog. Page « Pagination », onglet « site » :
background-color : #ffffff
Et voilà ! Les couleurs sont inversées :
