WordPress Canada

Add Flair With Dropcaps

Awhile ago I showed you how to use a technique called pullquotes in your WordPress blog. (see Using Pullquotes) In this post I'll show you how to add another visually interesting feature to your posts called dropcaps. What is a dropcap? A dropcap, much like a pullquote, is a technique often used in print whereby the first letter of a work, chapter, paragraph etc is larger than the rest. In fact you can see it in action in this very post.

Creating a dropcap is very easy. First we assign a new class and wrap it in span tags then we define the new class in the style sheet. Using the first sentence of this post as an example ...

<span class="dropcap">A</span>while ago I showed you how to use a technique ...

Now we define the new class "dropcap" in the style sheet. This is what I added to my style.css

.dropcap { float: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 3.25em; line-height: 0.75em; color: #aaa; padding: 0.08em 0.1em 0 0; }

You may have to adjust the line-height and padding to fit the look of your current theme. Obviously you can customize this anyway you want by changing the font-family, size, color etc.

• RSS
• Digg This
• Tweet This
• Stumble It
• Add to Delicious