Sunday 25 March 2007

Pullquotes to Break the Boredom

I have been wanting a new pullquote in the worse way, but I have been putting out fires all across the blogosphere, with no time for pullquote shopping!

...A pullquote is a nifty little item...

Well, it seems that tonight all fires have been extinguished. And surprise, surprise, I can actually make a change on my blog!

I have loved the blockquotes on Buttermilk Clouds ever since I started working with it. The lines are simple, elegant, and it sets off the text within the blockquote without distracting from the overall feel of the post. Tonight I started playing with the code to see if I could modify it enough to become a pullquote. The results are outstanding! (I get excited easily by the strangest things...when the code actually works the way I want, pullquotes, CSS...the list goes on.) So, here 'tis. As you can see, I made the font different, a bit larger, and centered.

To get your own new snazzy pullquote, open your Dashboard/ Template/ Edit HTML The following code goes in the CSS style sheet:

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}
If you wanted a different color font, change this value. Change this value for a different size font. You can make the border solid, dotted or dashed and change the border color here. Save your template. Now, when you create a new post, put this code in the post editor window - or - a little tip: if you plan to use pullquotes often, or just don't want to go digging for code, you can automate this process. Open Dashboard/ Settings/ Formatting/ Post Template and paste this code there:
<blockquote class="pullquote"><p>...THIS IS YOUR PULLQUOTE TEXT...</p></blockquote>

<p>TYPE POST HERE...
A pullquote is a nifty little item. Why? Because, everyone reads them! And that is that. Have fun!

post signature

No comments:

Post a Comment