Quoted Blockquotes

By James Kanjo

Description

This is just some simple CSS code to put quotation marks in your blockquotes. This is special because there is a left double-quote in the top-left corner, and a right double-quote in the bottom-right corner (which looks really cool!).

Code

blockquote {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-right.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}
blockquote p {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif);
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 1em 60px 0;
    min-height: 37px;
}
blockquote p + p {    padding-top: 0;    background-image: none;}

In action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis at nibh tincidunt condimentum ac quis magna. Nunc sed ornare augue. Ut et lacus tortor, sit amet feugiat arcu. Donec eu massa eget tortor fringilla consequat non sed arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut malesuada varius sapien in tincidunt.

Cras at augue mauris. Suspendisse vitae diam tortor. Suspendisse arcu nibh, tempor sit amet convallis quis, posuere sed nisl. Duis eget tincidunt ipsum. Quisque feugiat mauris ut dui ullamcorper dictum vel sed enim. Aenean tempus gravida elit non mattis. Nulla eget odio ac nunc sodales pellentesque in sodales neque. Proin laoreet nisl odio, nec dictum felis.

Limitations

In Internet Explorer 6 and below, the opening quotation will appear at the start of every paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis at nibh tincidunt condimentum ac quis magna. Nunc sed ornare augue. Ut et lacus tortor, sit amet feugiat arcu. Donec eu massa eget tortor fringilla consequat non sed arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut malesuada varius sapien in tincidunt.

Cras at augue mauris. Suspendisse vitae diam tortor. Suspendisse arcu nibh, tempor sit amet convallis quis, posuere sed nisl. Duis eget tincidunt ipsum. Quisque feugiat mauris ut dui ullamcorper dictum vel sed enim. Aenean tempus gravida elit non mattis. Nulla eget odio ac nunc sodales pellentesque in sodales neque. Proin laoreet nisl odio, nec dictum felis.

You may prefer this effect; it can be made permanent across all browsers by replacing the last line of CSS code with blockquote p + p { margin-top: -1em;}

---

Thanks to tsangk for this great snippet: conditional-blocks

---

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

---

---

Other snippets posted by James Kanjo

---

Rate this solution

If you think this solution is useful — rate it up!

EricT 30 Mar 2010 20:40

Thanks very much, James. This will be good in our forum. I totally missed this snippet for months.

pieterh 21 Aug 2009 17:45

I've used this in the new rainbow-base theme which means it's now automatically in all sites which use the rainbow theme set.

---

Portfolio

Last edited on 31 Mar 2010 05:28 by GoVegan Show more

Re:

GoVegan 22 Aug 2009 00:06

Thanks Pieter! I'm flattered :D

Phil Chett 16 Aug 2009 13:05

Another block, leading to…

Second level of indenting. This second is indented even more than the previous one.

Third level of indenting. This third is indented even more than the previous one.

Back to normal text.

so it gets a bit messy with multi quotes, bit this is a fine idea. thanks james,

GoVegan 19 Mar 2010 00:48

You call that messy?