Pullquotes for your Blog

It is definitely an oldy, but it is an oldy I really like. I first encountered it at AnnieBlueSky's BlogU. It is an easy trick to let your post jump out of the screen, by showing an interesting quote, that gives the essential idea of the post itself.

Sometimes text needs a little help to make it more interesting. Graphics works miracles in this department. But often you don't have a graphic that you can use. Jazzing up your text is an excellent option.
The pullquotes are easy to implement: you only have to add some CSS to your template, so strictly speaking it is not even hacking. Or maybe we could call it soft-hacking.

The only thing you have to do is add a class called "pullquote" to your template, and configure it any which way you like. In your post, add a <span class="pullquote"> around the text that you want to show in the box, and there you go.

This is the CSS that I added to my template. As you see, I defined color variables, so that I can set the color from my Fonts and Colors page.

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(http://home.planet.nl/~hansoosting/images/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

Color Variables that need to be defined are:
pullquoteBgColor, pullquoteTextColor and borderColor