Pretty Blockquotes
In the spirit of making the blogosphere a better (ie prettier) place, here are a couple of ways to dress up the lowly blockquote. This is the code for my simple blockquote:
.post blockquote {Mine is very simple for a reason. (Not that I don't want wild and wonderful...it just would confuse my readers.) My blockquote is actually a design element that gently separates areas of code from the blog post it's self. That way my readers can see the code that needs to be copied at a glance...no guessing needed. I picked a soft color because codes can make you crazy, and tranquil blue is my way of offsetting any craziness!
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
blockquote {
background:#EFEFF7;
}
One of my favorite blockquotes is with a big chunky quotation mark. I found this fun little blockquote in a theme designed by Fauxzen at Blogger Templates.
Here is the code that you paste into your CSS style sheet (between <head> and </head>):blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("QuoteImage.URL") 5% no-repeat #FFF8DD;
}
<-- This is the image you will need. Right click it then save to your desktop. Upload it to your webhost. I use Ripway. After uploading, put the URL in the above code.Here is one more. I use it on Buttermilk Clouds. It is simple in a fancy way. I'm changing the color here so you can see a variety. The great thing about this blockquote is you don't need an image to save and upload. It is all done with smoke and mirrors!
Once again, here is the code that you paste into your CSS style sheet (between <head> and </head>):blockquote{If you want a different color, find one on this fantastic color chart then put that color code in place of #DC143C in the code above.
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
I'm going to stop for now. But, this is really fun, so I will probably do more of this type of thing in the future. Especially if I see much interest in it. Let me know!
Update: 1/16/07 I forgot to mention that you should replace the old blockquote code in the CSS style sheet with the new code in this post.
Labels:
Blockquotes,
Blogger Beta,
Classic Blogger,
Design,
Graphics,
Posts
60 Comments:
This hack really nice. I love it and already tweak my blog with that hack. Thanks Annie!
@amin, it looks great! Glad you like it.
Thanks Annie for always giving us this great stuff! I hope all is well and it's not too cold in IL!
@Mani, Hi! Hope your holidays are happy. It is not too cold today. Sunny and in the mid 40's. But, we had a bout of bad ice storms and snow.
Glad you are still liking my tips. I always think I will run out, but I find something else. So it goes on...:-)
I absolutely adore your little Christmas wreaths! How festive!!
Very useful! Thanks for sharing.
Thanks. I love this useful and pretty detail.
@rachael, ohhhhhh, I love it too!! This was one of my most fun posts to do. And as soon as I can find time, I want to do more along the same lines!
I think i'm missing something ... when i try to put on an entry in blogger, it doesnt show up ... I'm using tg the style tag and just the blockquote a specific blog entry.
Clues?
Tx
GP
@jp, did you replace the blockquote code in the CSS style sheet with the new style you want? It will look something like this:
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
blockquote {
background:#EFEFF7;
}
And you will find it between the <head> tags.
abbe.. u rock!
I have two question, please:
- Why couldnt I use your kind of quote for my blog? I copied and pasted into the CSS code between head and /head but nothing changes with my quote.
- The second one is how can I make my comments contain pictures code as in your blog?
Thank you very much.
@vagabon, in answer to your questions.
-I don't see the blockquote code in your style sheet between the head tags. It has to be there in order for the blockquote to work. Also, just so we are on the same page. To get a blockquote in your post you click on the quotation mark in the post title bar.
-To show the profile images, open Dashboard> Settings> Comments> check 'Show profile images on comments'.
Didn't work.
I put this code
blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("MY IMAGE") 5% no-repeat #F7F7EF;
}
after the head tag and what I got was the above showing as grey text right below the nav bar.
Please advise!
@Janie,
Just off the top of my head, I think you may have put the code too far up. True it is put in after the <head> tag, but it is in the style sheet. The style sheet is somewhere after this: (but before the </head>)
/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 2
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Let me know if that does it. If not, I will look into it further. BTW, did you upload the 'quote' image to a webhost?
That was the problem! It worked just fine now.
Thanks for your help. I have linked your blog over at mine. :-)
@janie, I'm glad that worked! I figured it had to be something really simple because I tested all the blockquotes in a test blog to make sure my code was working.
Thanks for the link!
Hi Annie, I came across your blog today and it's simply awesome! I tweaked my blog to have this bockquote (even though there's only one post which uses it!) and it works great! I also tried some other tweaks listed by you and was so pleased with myself. Just like you've put the link for the quotes image with an orangish background, I'm looking for quote image in grey. Do you have one?
@smriti, Thanks! I don't have any other quote images, but you can use GIMP maybe to change the color of that one. Or, you could do a search for quotes on google and maybe that would turn up something that is useable.
Thanks alot for all the tips. blockquote worked except that "comma" is absent in the quote.
anitya~ this happened to me too, at first. but i tweaked the background-position parameters and then i got the quote image to show up. specifically, what i had to do was make the negative number values positive ... and then the quote image became visible in the quote box.
just an FYI ...
thanx for this annie ...
now - on to find some sort of fix for my styleswitcher dilemma ... *sigh*
hope your move's going well ... i know how much moving sucks ...
regards,
roxanne/the red mantissa.
Hi, Annie
thanks for your work, it's really helpful :)
Thanks I used yours, goes with the minimalist feel.
thanks... I'll use the last one :D
pura vida
Annie,
Just linked to this post from my blog. Thanks for the help!
http://www.homeschoolblogger.com/MamaBugs/446111/
Nice,simple,clean and fast.
Gonna check it out all of them, I'm now thinking in changes on my blog.
Hi, I'm new here.. your work is great! I'm working on my new blog's template; in particular I'm working on blockquote code to have rounded corners boxes with shadow. The only problem is that I can't set a margin, as you can see, text is right on the border of the box. Please, can you help me?
@paola, I'm going to work now, but when I get a chance I will take a look.
Thank you Annie! I'll wait for your precious help :)
Hi Annie...
I've just added this feature to my blog. Its awesome, thanks! However, I'd like to know if it is possible to round the corners... appreciate the advise!
@Onesimo Flores Dewey, Take a look at Visual Interest - Pullquotes...a Pure CSS Approach. I think the width could be tweaked and the float removed and it would work.
Hi Annie.
I'm having trouble with this tutorial. I want to add a blockquote image that i made, but i can´t! My template is a mess!! Could you help me?
Thank you
@M.Maria, I'm on vacation now, so maybe when I get back I can look into it.
thanks annie!
Thanks, I understand you cannot response to each 'issue' but I am bringing it up for general thought anyway.
I presumed that this way one could make different blockquote styles (with different names and then use these names e.g. 'blockquote_style2' in your post between the fish hook signs (I cannot put HTML here, so apologise the description)
Etc.
However, when I define a new blockquote style, that new style does not seem to work. Only the style that is defined (or altered) under the original blockquote in the HTML template is working. The others do not do anything. Anybody any idea what I am doing wrong
always i get the great stuff from you ..thanks 4 the share
Annie, your tips and absolutely magnificent.I love the last design of blockquotes,i'm taking into consideration, on inserting it on my blog...
Annie,
Your blog is amazing, but you must already know that! I used some of your tutorials to edit one of my blogs (http://interpretesdeasl.blogspot.com), and now I love it! Thank you so much!!
Thanks to you, now my blockquotes are attractive.
I would love if you would post about the "Read more..." feature with post summaries. I've been reading a lot of sites on this, and I'm still unable to use it successfully on my blog.
It always creates a mess in the posts. Any ideas why this might be happening?
Have a nice one!!
nice tutorials..tanx!!
Oke ... success for you.
Thanks for tips
Thank Anne.. I have tried it. And work. So please if you don't mind visit my blog.
One-4-All
i defined a new new blockquotestyle,that the newstyle does not seem to work.only the style that is defined under the orginial blockquota in the html template is working.
I had never used blockquotestyle. Looks interesting and simple to use. Thanks!!
I love this way of making quotes stand out. It's subtle yet noticable enough that you know it's a quote.
thank's a lot madame c'est rare de trouver un travail serieux merci...
Thank you.
I find this post very useful.
Interesting tips. I've been thinking of adding a blog on my website (in the name), but not sure if i can commit the time and effort to run a successful one, since obviously you spend quite some time running this website.
Very useful! Thanks for sharing.
Great, exactely what i was searching for for my blogs! Thanks again! ^^
LOVE the quotations...made my own, added the code. somethings wrong. I am thinking my image was too big? Anyways....any help would be appreciated!! I have deleted the code for now but LOVE these quotations!!!
it works well with my old template, but recently I changed my template using Design tab, and the code doesn't work anymore when I put it.. where did I do wrong? thx Annie
Love the quotes! Beautiful!
These are some super pretty examples for quote boxes. Now I will play around with this code and make some of my own!
Thank you! This is so helpful. Can't wait to put it to good use.
Hi
Excellent article am using the quotes in my website now, very well explained in a n easy manner!
Thanks.
i dun understand..
where to put the code..
@fiqasaleh, You insert this code within your post where you want the blockquote to appear. (using the Edit HTML window). <blockquote>PLACE QUOTE TEXT HERE</blockquote>.
Thanks for this ....Im going to try it out on my Blog.
Seems simple enough.
I need this to dress up my dreary blog. lol
Thank you very much! I was searching for more art and creative way to visualize comments on my blog and now you showed me how to do it. This will add more color and shine to my blog!
I'll try this some time, thanks. :)
I think i'm missing something ... when i try to put on an entry in blogger, it doesnt show up ... I'm using tg the style tag and just the blockquote a specific blog entry.
Clues?
Tx
Robbin