Quotes in 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-top: 1em;
    min-height: 37px;
}
blockquote p + p {    padding-top: 0;    background-image: none;}

@import url(/local--theme/newtheme/style.css?1);
@import url(http://snippets.wikidot.com/local--code/code:quotes-in-blockquotes);
 
.ie6 blockquote p + p {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif);
    margin-top: -1em;
    padding-top: 1em;
}

This is the Redirect module that redirects the browser directly to the "http://snippets.wikidot.com/code:quotes-in-blockquotes/noredirect/true/?theme_url=http://snippets.wdfiles.com/local--code/code:quotes-in-blockquotes/2" page.

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;}

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Phil Chett 1250427908|%e %b %Y, %H:%M %Z|agohover

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,

pieterh 1250876711|%e %b %Y, %H:%M %Z|agohover

I've used this in the new http://themes.wikidot.com/rainbow-base rainbow-base theme] which means it's now automatically in all sites which use the rainbow theme set.

---

The Wikidot Blog | My other works

Re:

James Kanjo 1250899599|%e %b %Y, %H:%M %Z|agohover

Thanks Pieter! I'm flattered :D

---

λ James Kanjo | blog | photos | contact