DIY pull quotes
Disclaimer the first: I’m a web-idiot. I’m no designer. I’m no programer. Sometimes I see things I like and in the process of trying to build my own, I break other things. Caveat emptor, yo.
I’ve noticed a few folks doing pull quotes in their blog posts and I think it’s pretty cool. Feels kinda newspapery or something. (that’s right, newspapery) I first noticed it at Genuine Curiosity, then at Church of the Customer (also Never Work Alone, but that’s Dwayne again). Had to dig into their code to grok it, but it works great. If you want to win style points with pull quotes, here’s what you do:
- First, you’ll need to be able to edit html in your blog posts. I could explain that more, but if you don’t know what I’m talking about, keep moving–nothing to see here.
- Next you’ll need to copy this little code snippet:
<span class="pullquote" style="margin: 20px; padding: 5px 8px; font-weight: normal; font-size: 16pt; float: right; width: 172px; line-height: normal; font-style: normal; height: 82px; text-align: right; font-variant: normal;">Your quote goes here</span> - Next, you’ll want to place the snippet in your post. Find the beginning of the paragraph where you want the pull quote to appear and paste in your code right above that.
- The last step is to customize the snippet. Using the margin, float, width, padding and other variables, you can adjust the size and placement of your pull quote. As posted here, the pull quote will show up on the right margin and the letters will be 82 pixels tall. This code will default to whatever color your blog post text appears. If you want to change the color of the pulled quote, just put in the following code (modifying what you see here, of course) after the "font-style: normal;" section:
font-color: #000000;
Pull quotes are cool, but read the disclaimers
Disclaimer the second: this stuff may make your blog look weird in some browsers, or maybe not. You may only find out when someone yells at you. Also, if you’re real smart, you can probably just define all this stuff in your stylesheet and henceforth just use something like a custom <pullquote> tag. Or maybe not (see Disclaimer the first).
Besides the technical jive, you want to make sure you stay in good form. Don’t go all overkill with the pull quotes. Choose quotes that help the reader get a quick sense of the post. When you’ve got pull quotes in a post, readers’ eyes will naturally be drawn to the quotes, and the quotes will help them decide whether this is something they want to keep reading. As always, be thoughtful when selecting content and quantity of the quotes.
That’s it. Go forth and look all literary.
Related Stories
POSTED IN: best of, tips and tricks, web/tech, weblogs
5 opinions for DIY pull quotes
Javier Cabrera (ClearYourMind)
Dec 6, 2005 at 10:27 pm
I love when people start learning!
Fellow, let me show you a more “clean” way to do it. You can have two classes in the same class=”"! like this
Let’s say you take all the style=”margin: 20px; padding…” and put it on one class in the .CSS file of your blog. Let’s call it “special”. Now you have this
like this: (ed. the following subs square brackets for angle brackets)
.special {margin: 20px; padding: 5px 8px; font-weight… all that} [span class=”pullquote”]Your quote here[/span]
but if you do this
[span class=”pullquote special”]Your quote here[/span]
You will get exactly the same result!
I encourage you to keep learning this, is beautiful being able to edit sites! I think you should be better if you use something like a DIV instead of a span because if you want to write something more wider (like a little three lines paragraph) a span will sometimes break ;)
Hugs!
Javier Cabrera
Javier Cabrera (ClearYourMind)
Dec 6, 2005 at 10:30 pm
Oops! Fellow, for some reason is not showing up on the comment! please, see if you can put some [code][/code] (ed. DONE!) in all my previous commented code (I forgot it!)
If you look at the comment on your admin’s area, you will see what I wanted to say. (if you want to delete this post, just do it! no problem at all! but the above code may be really useful for some people).
Other places to learn with examples: http://www.w3schools.com/
Sharif
Dec 7, 2005 at 6:14 am
I might also leave out the “height:82px” part. That doesn’t define the height of the text, but the fixed height of the text block.
If the height is defined, and if you have a particularly short quote, you’ll have a lot of extra whitespace floating there. And if you have a long quote, the bottom may get cut off.
By leaving out a specific height, the pullquote box will adjust to the necessary height on it’s own.
Bren
Dec 7, 2005 at 6:43 am
Great tips, thanks guys!
WTF3.12
Dec 7, 2005 at 11:49 am
Pull Quotes!!!
This is only a test… This is a test of the pull quote system. Grabbed this from Slacker Manager…