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 {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:
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;
}
<blockquote class="pullquote"><p>...THIS IS YOUR PULLQUOTE TEXT...</p></blockquote>A pullquote is a nifty little item. Why? Because, everyone reads them! And that is that. Have fun!
<p>TYPE POST HERE...
32 Comments:
That is very cool! Just last night I tried following your directions for pretty blockquotes, but it made no difference in the appearance of my blockquotes. I tried a couple of different styles and still nothing. I'll give it another read and another try to see if I missed anything.
That was fun, Annie! I learned something today...I've always wondered if I could designate anything other than a solid border when I was specifying top and bottom borders, now that I know I can...watch out!
I have a background image in my blockquote script that insisted on becoming part of the pullquotes when I used the HTML. Simple fix, I added a line to the CSS you provided that reads "background:none;" it eliminated the quotation mark image I use in blockquotes and looks wonderful. And of course I changed the colors, that's just part of the fun.
Great addition to my site. Mille Grazie!
ciao bella~
CeeCi
@jennifer, sorry you had problems. Sometimes it takes me several swipes at it before I can make it work. If you need more help, let me know. I will need to see your template and exactly what you have done.
@CeeCi, Glad I was able to introduce something new to you. I was excited when I figured out I could do the double line thing also, lol.
It is always about changing colors!
Woohoo! Another trick for us! Thank you Annie! I continue to learn through BlogU
@jennymcb, yes!! Always something new to try.
I got both working, thanks! (I had put the blockquote code in the middle of a couple of the body style code, if that's what it's called, without realizing it.
@jennifer, Wonderful that you figured it out. Codes are very picky about where they are put!
hi dean annie, i've been reading your blog for quite a while now and it amazes me every now and then. Now, i'm on a mission to transform my blog based on your lessons! cheers to that :)
anyway, i was trying to change the pullquote font from Verdana into Georgia, but don't seem to work if i simply change the font setting. i also tried deleting the "sans-serif" or replacing it with simply "serif", but still it didn't matter. any advice would surely help!
@freelance*jervis, well, I ran across the same problem in making that pullquote, but when I finally got all the other issues ironed out, I was too tired to pursue it any further and I thought Veranda was fine.
Your comment reminded me that I did want to look into it further. So if and when I find the solution, I will let you know. Or, if you stumble across the answer, let me know :-)
Very cool. Handy little bit of code that helps liven things up very simply. Another helpful post from Blog U.
TV Stream - Live Free Internet TV
http://tvstream.blogspot.com
Awesome annie. I have been using pullquotes and its great for a change.
Thank you.
What happened to your cocommenting. It is working for me. Thanks for the tip.
@janet...what do you mean exactly? I have had coComment on and off several times, lol. Presently it is off. I'm finicky.
Hi Annie!
Hari here... I came across your blog recently. A wonderful and informative site I must say. Using your blog I was able to change my header image, insert a favicon and also come up with a signature at the end of each post!! Thanks a lot Annie.. I continue to learn a lot thro Blog U..Keep going...
By the way I am not able to locate the CSS Style sheet that you are talking about in this post...
I blog at www.thunderthrob.blogspot.com
Yippee!! Its working Annie... I just pasted that code in the sidebar content of my template...and it worked! I am trying to link your site but some problem with the internet right now :-|...so will be linking you ASAP!! Thank u!
@hari, glad you got it working! Just for future reference, this is the beginning of the CSS Style Sheet...but you add the CSS code after all the variable definitions:
%lt;style id='page-skin-1' type='text/css'>
/*
-----------------------------------------------
Blogger Template Style
Name: Washed Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006
-----------------------------------------------
*/
The CSS Style Sheet ends with:
</style>
dear annie, i am far away down in jakarta, and now i find your trick is very nice and cool. thanks a lot. i expect to translate soon my first post that displays your wonderful trick in our blog into english so you can read it.
Where have you been all my blogging life?! Haha!
I'm glad to have stumbled upon here and will be sifting through your archives to see how I can improve my various blogs :)
Will be back soon for sure!
@the shtes! I've been quietly archiving all my posts for you to stumble upon today! Enjoy.
Thanks Annie great blog, I got the pullquotes running really neat thanks
Hi there.
I placed the following under .post blockquote to even up the spacing:
padding-bottom:.75em
This ends up getting transferred to the pull quotes as well. Is there anything I can do about that except removing this line of code (which I don't want to do)?
@tcbuk, Yes, there is a way. Under .pullquote { Add:
padding: 3px 0 !important;
Works perfectly... thank you very much!
very cool.. I am posted it on my CCS and going to try it out. I will let you know how it goes. Cheers!
Pullquotes to Break the Boredom in Chinese
and i again i am able to do something with my blog with your very easy to use instructions. it took me a while before i can get it going as i didnt know where the CSS style sheet began. thank you so much! my blog is still in the works so no links yet. again, thank you. ;>
Hello Annie
Terrific site. Thanks to your explanation I've got some great looking pull quotes. But they're altering the surrounding text in the entries I'm using them in and I can't figure out why. The spacing between sentences becomes very tight at the point where I paste the blockquote line of code into an entry. And it stays tight through the end of the entry.
Any thoughts?
Thanks,
A
Here's what I'm using:
}
.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 1px 0;
font: $bodyfont;
color: #990000;
text-align: right;
font-size: 1.3em;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.pullquote p {
padding: 0;
margin: 0;
}
@abraham, how bizarre. I have a blog, Buttermilk Clouds, which I dearly love, but the template is very particular. I have to throw in an extra <p> after the blockquotes. It seems your blog has the same problem.
What you need to do is inclose all of the text after the pullquote with <p> and </p>. See if that doesn't help.
I wish I knew why that happened. But, at least I know how to fix it.
Annie
Whatever the problem was, that fixed it. Thanks so much.
Abraham
Love it!
I was using HR tags to highlight certain text until I found this great tip, thanks!
Got it to work on our baby / family blog, And Baby Makes Three!
Annie -
I just added the pull quote code to use in my blog (http://leah-noel.blogspot.com), but the text wrapping (correct term?) seems to be a problem.
The pull quote seems to overlap the text, so the text is behind the pull quote.
How can I fix this?