dans Empty

Personnalisez vos blocs de citations « blockquote »

Vous voulez personnaliser vos blocs de citations sur votre blog ? Lorsque j’ai voulu faire ça, j’ai découvert que :

  • ce n’est pas évident, car il n’y a pas cette fonctionnalité par défaut sur les plateformes de blog
  • l’aide ne se trouve pas forcément en français

Je me suis dit que ça pourrait être utile de décrire la technique (trouvée sur le site Natalie Downe) en français, et de manière didactique.
Pas besoin d’être un pro en CSS ! L’idée est la suivante : il faut attacher les guillemets « ouvrants » au bloc « blockquote », et les guillemets « fermants » au bloc « p » (paragraphe). Cela permet de gérer différemment les deux images, et de les positionner proprement. Attention ! cette technique ne semble donner des résultats que dans Mozilla Firefox (problèmes pour l’affichage du guillemet dans IE).
Imaginons donc que vous avez deux images img1.jpg (guillemet ouvrant) et img2.jpg (guillemet fermant), placé sur un serveur http://www.mondomaine.com. Voici les images que j’utilise, par exemple :

Media_httpimagesblomi_aygjm

et

Media_httpimagesblomi_ccadv

Il faut aller dans le modèle CSS de votre blog (feuille de style), et aller modifier la définition du bloc de citation de la manière suivante (tailles à adapter suivant les images utilisées) :

.post blockquote {
margin:1em 25px;
text-indent: 27px;
background: url(http://www.mondomaine.com/img1.jpg);
background-position: 0 2px;
background-repeat: no-repeat;
}

Cela revient à placer une image de fond dans le bloc « blockquote », et à faire démarrer le texte plus loin pour que l’image s’affiche avant le texte (text-indent).
Pour les guillemets fermants, il faut ensuite (juste dessous) aller modifier le code du bloc « blockquote p » de la manière suivante :

.post blockquote p {
display: inline;
margin: 0;
padding-right: 27px;
background: url(http://www.mondomaine.com/img2.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

La partie padding-right permet de laisser une place pour l’image, mais la partie un peu intelligente, c’est d’afficher le bloc « blockquote p » comme un « in-line ». (Il y a deux types d’affichage, en gros, en CSS : les objets de types « bloc » prennent des lignes entières et provoquent un retour à la ligne, et les objets « in-line » qui sont placés dans une ligne et ne provoquent de retour à la ligne). En changeant les propriétés d’affichage du bloc « blockquote p », on permet donc à l’image « guillemets fermants » de se positionner à la fin de la citation.voilà c’est tout. Le dessin suivant est là pour illustrer l’explication ci-dessus, et la rendre plus compréhensible au cas où elle ne le serait pas !

en chantier, bientôt mis à jour !

Bon Blog !

Write a Comment

Commenter