Customiser le plugin Drop Caps à vos couleurs

Vous aimez ? Partagez !

drop-capsTout récemment, je vous parlais du petit plugin Drop Caps qui permet d’afficher la première lettre de vos articles sous la forme d’une lettrine.

Bien que parfaitement fonctionnel, ce plugin reste toutefois assez rudimentaire et n’offre pas de possibilités directes de customiser vos lettrines.

Cependant, rien n’est perdu ! Il y a plusieurs manières de faire en sorte que vos lettrines soient vraiment en accord avec les couleurs de votre blog et nous verrons aussi comment simplement changer la police de caractères.

#1 Pour les moins exigeants (ou les plus paresseux !), une toute première chose à faire : changer la couleur de la première lettre de vos articles et pages, exactement comme vous le feriez pour une phrase ou un paragraphe, à partir de votre éditeur de texte.

C’est ultra simple, il faut juste que vous y pensiez chaque fois que vous publiez un article, ça doit devenir un réflexe.

#2 Une deuxième chose est possible : changer la couleur de l’ombre sous vos lettrines. Pour ça, il va falloir aller chercher dans Extensions installées > Drop Caps > Modifier.

Une fois sur la page de l’éditeur dans lequel s’affiche par défaut le fichier drop-caps/wp_drop_caps.php, vous allez cliquer à droite sur le fichier drop-caps/dropcaps-no-ie.css.

Vous verrez alors ceci :

                           span.cap:before{
                           content:attr(title);
                           color:#666;
                           }

Maintenant, pour changer la couleur de l’ombre des lettrines, vous allez remplacer #666 par la couleur de votre choix. Pour ma part, j’ai adopté un gris #999999 (#999 en raccourci), un peu moins foncé que celui d’origine.

Si vous ne savez pas comment chercher une couleur, je vous invite à vous rendre ici ou à vous inscrire sur ce blog pour accéder à la section Les outils de la couleur.

Naturellement, lorsque vous avez modifié le code couleur, pensez à cliquer sur Mettre à jour le fichier.

#3 Nous pouvons aussi faire une troisième chose : utiliser une police particulière pour nos lettrines. Là, ça devient un peu plus intéressant… 😉

Attention toutefois : vous ne pourrez utiliser que les polices de caractères appartenant à la liste des Web safe fonts, les seules à pouvoir s’afficher dans le navigateur de vos visiteurs, quel que soit le navigateur en question et quelle qu’en soit la version, tout simplement parce que ces polices sont présentes par défaut sur tous les ordinateurs.

Pour afficher vos polices préférées, il faudra utiliser d’autres outils. Je vous renvoie à cet article dans lequel je donne quelques pistes.

Prenons un exemple simple. Mettons que la police de votre blog soit Arial (une police dite « sans-serif » car elle ne présente pas d’empattements) et que vous souhaitiez faire apparaître vos lettrines avec une police comme Georgia (dite « serif » cette fois, car elle comporte des empattements).

Vous allez voir, c’est tout bête.

Allez dans Extensions installées > Drop Caps > Modifier. Une fois dans l’éditeur, ouvrez le fichier drop-caps/dropcaps.css.

Sous la ligne float:left;, vous allez ajouter ceci :

font-family:’Georgia’,serif;

N’oubliez surtout pas le ; en bout de ligne, sans quoi ça ne fonctionnera pas. Et bien sûr, n’oubliez pas d’enregistrer vos modifications.

La ligne à ajouter que je vous donne est la manière la plus simple de procéder. Dans l’idéal, vous pouvez ajouter des polices alternatives pour être absolument sûr qu’au moins une de ces polices s’affichera correctement.

Puisque nous avons chois d’afficher une police « serif », nous pouvons compléter cette ligne comme ceci par exemple :

   font-family:’Georgia’,Times New Roman,serif;

Si vous avez un doute et que vous avez peur de ne pas écrire ces lignes correctement, reportez-vous à cette page et copiez tout simplement la ligne de code qui est donnée sous chaque police. Comme ça, pas d’erreur possible.

Cette astuce va vous donner pas mal de possibilités pour customiser Drop Caps à votre goût.

#4 Enfin, pour les plus aventuriers d’entre vous, nous pouvons aller plus loin, mais ça va vous demander un peu plus de boulot. 🙂

On peut parfaitement remplacer les lettrines créées par Drop Caps par des images de lettres, exactement comme l’a fait Yvon sur son blog Copywriting-pratique. C’est d’ailleurs en essayant de comprendre comment il avait fait que j’ai trouvé plusieurs manières d’envisager la chose.

Il y a plusieurs méthodes, je vais vous en livrer trois dans le prochain article, à vous de voir quelle est la plus pratique pour vous en fonction de votre thème et des réglages que vous avez faits.

Mais vous devez d’abord disposer des 26 lettres de l’alphabet sous forme d’images, dans le style qui vous plaît, avec la couleur qui s’accorde le mieux à votre blog.

Vous allez me dire « oui, enfin, commencer un article par Z ou K , c’est pas demain la veille ! »

Ok, c’est comme vous voulez, mais on ne va pas faire les choses à moitié, tant qu’on y est, autant les avoir toutes, on ne sait jamais. 😀

Alors si vous n’avez pas de lettrines sous forme d’images, je vous en fournis déjà pas mal dans les ressources graphiques gratuites réservées aux membres, peut-être allez-vous trouver votre bonheur dans ce qui est proposé.

Vous pouvez aussi les créer vous-même avec votre logiciel graphique habituel et du coup, vous allez aussi pouvoir utiliser vos polices de caractères favorites. 😉

Bien sûr, si vous disposez de Photoshop (+ Elements), ou si vous vous débrouillez bien avec Gimp, vous pourrez obtenir des lettrines avec de charmants petits effets de dégradé ou de volume ou d’ombre… bref, à vous de vous amuser avec ça.

Deux choses importantes si vous créez vos lettrines vous-même :

1. faites-les assez grandes, disons pas moins de 100 px, vous pourrez toujours diminuer leur taille ensuite au moment de les insérer dans vos articles si besoin ;

2. enregistrez-les au format .jpg pour ne pas risquer de vous retrouver avec l’affreux fond gris que WordPress donne aux fichiers .png quand l’affichage des miniatures est activé pour les extraits de vos articles qui s’affichent sur votre page d’accueil.

Je vous retrouve donc dans quelques jours pour le prochain article, cela vous laisse le temps de choisir ou de créer vos lettrines. Peut-être même que j’aurai une petite surprise pour vous. 😉

***

separator

  1. Tarik
    Tarik05-26-2012

    Bonjour,
    J’en étais sûr !!!
    J’étais sûr qu’Yvon utilisait des images au lieu de lettres pour ses magnifiques lettrines, mais tu viens de ma faire découvrir DropCaps.
    Voilà la solution que j’attendais.
    Donc un grand merci 😉
    Tarik Mon dernier article… Le DIF : mode d’emploiMy Profile

    • Alexandra
      Alexandra05-26-2012

      Bonjour Tarik, bienvenue ! 🙂

      Il doit bien y avoir une possibilité de créer des lettrines de ce genre en CSS, mais dans WordPress, c’est rapidement compliqué, enfin ça nous emmènerait un peu loin… mais avec des images, oui, on peut y arriver sans trop de difficultés.

      C’est ce que je vais expliquer dans le prochain article.

      Ceci dit, avec Drop Caps, on peut déjà faire quelque chose de sympa. Et pour ceux qui ne craignent pas de faire des expériences avec les fichiers du plugin, on peut très certainement pousser plus loin les explications que j’ai déjà données.

      Contente que cette solution te convienne en tout cas. 🙂

      A bientôt !
      Alexandra

Laisser une réponse

CommentLuv badge

Ce blog utilise CommentLuv Premium qui vous autorise à associer des mots-clés à votre nom si vous avez effectué 3 commentaires approuvés. Utilisez votre vrai nom puis @ et vos mots-clés (maximum de 5).

Ce site utilise Akismet pour réduire les indésirables. Apprenez comment les données de vos commentaires sont utilisées.