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:bottomright; }blockquotep{background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif); background-repeat:no-repeat; margin-top:0; padding:1em60px0; min-height:37px; }blockquotep + 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!
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.
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,