Visual interest - Pullquotes
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. I discovered a way to liven
Mandarin Design
"The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting."
Add this to your style sheet or add it to the HEAD section of your template:
.pullquote {
width: 145px;
background:#A3C586;
color:black;
float: right;
border:1px dotted #5B7444;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}
Then add this to your post itself:
<p class="pullquote">Play around with this until you find colors and fonts that you like. The color in the box can easily be changed by modifying the code in the style sheet "background:#A3C586;" to whatever color you want. I changed the background color to a green and the 'heading' font inside the pullquote to white. The possiblities are endless. There are more pullquotes at Mandarin Design if you would like to try another style.
<span >Mandarin Design: Easy CSS Pullquotes</span>
<span >"</span>
The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting.
<span style="font-size:large;">"</span>
</p>
30 Comments:
I had a problem with the pullquote width, it was dropping my sidebar down. I chanded it to fluid (35%) and I think it's even cooler. Now it fits any screen. By the way, I was inspired by your template to create mine. Hope you don't mind.
@j.noronha, your blog is lovely! I don't mind at all. Glad you figured out your pullquote problem. I love the fluid template.
Hi Annie. You must be sick of my consistently visiting this page but I just loved the idea of a pullquote on my own blogs.
I have tested it on a post on my SnapShots blog and found that the pullquote messes up the html spacing for the paragraph that the quote is placed in as the line spacing is closer than the previous paragraph. You will see what I mean by looking at the following post. http://freesnapshots.blogspot.com/2007/01/worlds-end-gorge.html.
Any ideas what might be happening?
Phew! Just letting you know and your readers if they have the same problem as myself, I removed the / from the end of the code in the post so that it looks like the following......
"< p >" without spaces which I added so that blogger would allow this post.
.......... On my SnapShots blog the paragraph format now looks correct with the line spacing.
@susan, so glad you figured it out. Sorry I didn't get to help sooner. But, it seems odd to me that you had to remove the /. That was the closing element. I'm baffled. I'm going to take a look at it anyway. That code works perfectly in my posts. Strange...
@susan, I played around with the code a bit and was able to reproduce the problem.
It seems that the spacing gets messed up when the pullquote code is inserted immediately after the last word of a paragraph.
But, when the pullquote is inserted immediately before the first word of a paragraph, it doesn't affect the line spacing of that paragraph.
I never encountered that problem because it seems I always placed my pullquote in the middle of a paragraph. Usually in the middle of a sentence!
I don't know why it does that. I think it has to do with the line break (<br>).
So, if you do use the pullquote in the middle of a paragraph, or right after the last word of a paragraph, the code on the post will work.
Go figure!
Thanks Annie :) I noticed that it will redo a closing element when removing the "/" on saving the draft. I will in future use it the way you do so that I am not messing around with the code.
Ps.... love your blog and always on the lookout for new ideas. Thanks!
@susan, I'm glad you liked my blog. I took a look at your blog, and you have inspired me to start my drawing again!
"you have inspired me to start my drawing again!"
Now that is fantastic as it also motivates me to keep at my drawing!
Take care. Susan
@susan, well, after Christmas, I was at a Walden's closing sale (guess they are going to be Borders). Anyway, I got a bargain on a Moleskine Notebook. I thought about what I wanted to do with it. It is ruled, and I thought it wouldn't be good for sketches. But, I decided my sketches won't be that good anyway, so it is a little off the cuff journal and sketch book! At some point in my life, I was pretty good at drawing...when I wanted to be. But, I did it often and became better and better. Now, I'm pitiful! I laughed at my poor drawing. But, I figure I just need more practice again. I enjoy it.
it is a little off the cuff journal and sketch book
I love to browse really old sketching notebooks that do have a story along with the drawing. Mmmmm... you have giving me ideas. I should do the same so that years down the track, the drawings will have more meaning to those that view them.
I love to look at blogs where artist show their daily drawings. They also make me aware that I am not confident when I lay my strokes down......I have to admit having a chuckle at some of my own sketches but hey it is so relaxing and sure both you and I will get better Annie, the trick is to stick at it to get that flow happening.
hi annie,
How to adjust the width of pullquotes in the individual post?
Cheers, Rohit
@rohit, you make changes to the design of the pullquote in this code:
.pullquote {
width: 145px;
background:#A3C586;
color:black;
float: right;
border:1px dotted #5B7444;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}
And to answer your question, you can change the width of the pullquote where it says:
width: 145px;
Change the 145 to whatever you want.
Annie,
I added the first part in my CSS style sheet.
Then add this to your post itself: I do not understand where to put the code.
That i already did.
but it changes the width in all the instances of pullquotes which i don't want.
I want to have different widths for different posts.
@rohit, sorry. I misunderstood. I'm not quite sure about this. I don't even know if you can do it. I would try adding width: XXXpx; to this and see if it overrides the CSS (you may have to remove width: 145px; from the CSS style sheet also):
<span style="font-size:large;width: XXXpx">
Or...try adding a percentage instead of px: width: 35%; (or whatever width you want.)
I will have to play with it when I get a chance and see if any of these ideas work.
@priya, when you type your post in the post editor, you put it in there. Just in the middle somewhere...you will get a feel for it. Sometimes I put it in and it doesn't look right, so I edit my post and move the code up or down in the post.
Anie,
I did and see the my message, but I unable to get the image as you have it. I will check again and let you know.
Hi Annie, I got a problem with my pullquote on Web Directory. It seem that regular post and pullquote cannot go side by side.
On my latest post, the pullquote is quite long, and if I were to use pullquote, there will be long blank spaces beside the pullquote. To avoid that from happening, I've to use blockquote as you can see now.
A question: how do I make pullquote and post go side by side?
As an experiment, certain template are able to do so, but not on my present template. I don't know which part of my CSS to tweak to make it right.
That is why I cannot use AdSense Vertical Wide Banner on it, because my post start at the bottom of AdSense leaving wide empty space beside AdSense.
I do hope you understand what I'm trying to say here, Annie. If not please leave a comment or two on my blog or shoot me an email me.
Greetings and lotta loves from Malaysia.
Nice to know, will try it and let you know, thanky. ;)
another great tut. sure i'll try it.
thanks
Am i the only one having problem with this code ?
It blowed out my sidebar.
@Perde, each template is different. Try adjusting the width, padding and/or margin to fit your blog template.
a good site. Thank you.
Thank you, I made it work modifying the widths and margins :)
Nice and simple, I think i might give it a try
Hi Annie, I also got a problem with my pull-quote on Web Directory.how do I make pull-quote and post go side by side?
The whole idea is clear but it's too hard for me to understand, frankly speaking, unfortunately...
Looks powerful I must say - I mean the code.
I can say that my template is somewhat more captivating..I am not that good in arts so maybe I still have to go over with my template and even get some ideas with other blogs...
I actually thought your pullquote was an ad, so I ignored until I actually focused on looking for what the pullquote would look like when used in your blog.