Using Pullquotes
Filed Under: Blogging, WordPress
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:#FFA500 2px solid;
border-bottom:#FFA500 2px solid;
color:#FFA500;}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.
Thanks for visiting! If this is your first time here why not grab the RSS feed. You can also follow this discussion by checking the "Notify me of followup comments via e-mail" box or by subscribing to the comments RSS feed. Please scroll down to leave your comment.
2 Comments so far. Add Yours Now!
Werner Patels
Great code — I have been looking for something like this for a long time.
And it works on Typepad just fine too.
Thank you!!!!!!!!!!!!!!!
May 20th, 2008
Len Kutchma
Hi Werner!
Glad you found it useful.
May 20th, 2008
Reply to “Using Pullquotes”
Please note: Comment moderation is in effect. It may take some time for your comment to appear. There is no need to resubmit it.
Management does not necessarily endorse or agree with comments left here. Management reserves the right to not publish comments it deems unfit. Play nice.