Using Pullquotes

Although I prefer the minimalistic approach to web design there are some design features I've seen on other sites that I thought were kind of cool. For example, some of the big news and magazine sites make use of a styling technique called pullquotes. A pullquote is a little block of text that is highlighted in someway which adds an interesting dimension to a post. On most HTML-based sites it is accomplished through the use of DIV classes and usually a gazillion of SPAN tags. While the end result is rather nice the code involved is messy and bloated. Fortunately there is a much cleaner way to implement this in WordPress using plain old blockquotes.

This is a pullquote made possible by adding a new class to the existing blockquote.

First, we need to assign a new class to our blockquote so that all blockquotes don't inherit the styling we're going to give it. When writing a post you could add class="mag" to the blockquote tag so that the entire tag will look like <blockquote class="mag">Your text</blockquote>. Then it's simply a matter of styling the new class in your style sheet. This is what I added to my style sheet to achieve the look of the pullquote in this post ...

blockquote.mag{
float:right;
font-family:Georgia, Arial, Serif;
margin:.5em;
padding:.5em;
font-size:1.25em;
background:none;
width:150px;
border-top:#660000 2px solid;
border-bottom:#660000 2px solid;
border-left:none;
border-right:none;
color:#660000;}

You can style this in so many different ways. Add a background colour or image. Modify the borders. Alter the margins and paddings. Float the block left. You are limited only by your imagination.