*Suffusion theme’s new CSS drop caps styling update at end of post.
Drop caps are elegant and a bit old fashioned, in a good way. I’ll show you how to make easy CSS drop caps to add a sophisticated flair to your blog text as shown at the beginning of this paragraph. They can add visual interest to your blog design, and they are super easy to style with CSS–even easier if you happen to use the Suffusion theme.
Also called, “Initial caps,” drop caps are the large, decorative capital letters that begin the first word of the first paragraph in your post, or each chapter of a book.
To create drop caps with CSS in your WordPress blog or website, here’s all you need to do:
Add the following to your theme’s CSS stylesheet if you want a drop cap that looks like the one at the beginning of my first paragraph above. (Remember, it will get deleted when your theme is updated so be sure to add it back in after every update. Unless your theme is Suffusion, in which case just add this CSS code into the special Custom Includes section in Suffusion’s dashboard.)
p.introduction:first-letter {
float: left;
font-family: Palatino, Georgia,serif;
font-size: 310%;
font-weight: bold;
line-height: 90%;
margin-right: 6px;
margin-bottom:-2px;
margin-top: 7px;
color: #487FB8;
}
Of course, you’ll need to play with the settings depending on your line spacing, font, font size, and color preferences, but that’s pretty much the way your CSS should look.
Next, before the first paragraph of every post and/or page, add this, making sure that you are in HTML mode, not the Visual editor: <p class=’introduction”>
And close the first paragraph with: </p>
Note: If you insert an image to the left of your first paragraph, you may have to add vertical space to the image by clicking your image, then clicking the framed painting-like icon, then selecting “Advanced settings.” I added 25px of vertical space to mine.
And voila! That paragraph will now begin with the beautiful blue drop cap that you see at the beginning of this post. Enjoy, and please comment with a link to your blog where you have used this WordPress CSS tip.
UPDATE FOR SUFFUSION THEME DROP CAPS:
The world’s best free WordPress theme keeps getting better. Now you can set site-wide CSS drop caps for:
- Full content
- Excerpts
- Tile layout
- Magazine layout
- Static pages
While the previous CSS option will allow you greater control over your drop caps on a case-by-case basis, this method is simpler and will give a uniform look to your site. Because if you have one post or page begin with a drop cap, then in most cases, all of your posts and pages should have them.
So to set CSS drop caps in Suffusion 3.9.2, here is all you need to do:
1. Navigate to the Suffusion options in your WordPress dashboard
2. Select “Skinning” at the top, and “Typography” on the left.
3. Now scroll down to “Drop Caps,” choose the options you prefer, and save. And that’s it! [clearboth]
(Click images to enlarge)
[clearboth]
[clearboth]