This tutorial demonstrates how to place two background images behind the HTML <blockquote> tag. The first image will be positioned at the top left of our blockquote and will be our opening quote mark, and the other at the bottom right which will be our closing quote mark. The apporach I'm going to demonstrate appears to work in all of the modern browsers, although some of the older browsers might struggle.
The reason for this tutorial is the inability of CSS to allow more than one background on a single page element, so in the case of the blockquote I, like many other template designers, have resorted to creating borders and background colors to separate blockquotes from the surrounding text. We do this because many blog and forum scripts provide a quote button that simply wraps the quote in <blockquote> </blockquote> tags.
Using CSS and the :first-letter pseudo class, we are able to assign two background images to our HTML <blockquote>, and all we need to do is position them so that they work correctly. The image below shows you what I mean.
The opening quote mark and larger first letter are defined by blockquote:first-letter, and the border, background and closing quote mark are defined by the blockquote style.
The code to make this work is surprisingly simple. First start with your quote mark images. The images used iin this example are displayed at the bottom of this post, feel free to download them and use them in your blog. Once you have your images, open your stylesheet, Serendipity users need to open style.css for your chosen template, whilst Blogger users need to edit their template file within your dashboard.
blockquote:first-letter {
background: #f8f6f6 url(quoteleft.gif)left top no-repeat;
letter-spacing: -.06em; padding-left:30px;font-size:1.6em; }
blockquote {
background: #f8f6f6 url(quoteright.gif) right bottom no-repeat;
font-weight: normal; font-style:oblique; color: #444;
margin: 0px 50px 10px 20px; padding: 0px 25px 0px 4px;
line-height:1.5; border-top:1px solid #efefef;
border-bottom:1px solid #efefef; }
The great thing about this technique is that is so easy to implement, nobody needs to be a designer to use the css code above.
If your images aren't located in the same folder as your stylesheet, you will need to include the full path to them. Serendipity users shoud place the images in the img folder of their chosen template, then edit the url part of the css to read url({TEMPLATE_PATH}img/quoteleft.gif). Blogger users will need to upload these images to their Blogger account or another free image hosting account such as
imageshack.us.
Here are the quote images.
steven said,
Thursday, August 24. 2006 at 13:40 (Reply)
Carl said,
Thursday, August 24. 2006 at 13:50 (Reply)
Serg said,
Wednesday, August 30. 2006 at 03:41 (Reply)
ps: you have bag in Sponsors section.
It looks like
YellowLed said,
Friday, September 1. 2006 at 12:23 (Reply)
So people using this should probably make sure they use blockquote alone (at least with the new default theme, I have not tested it within other themes). Might also depend on my other settings in the particular theme - I guess all I'm saying after all this rambling is: Use it with care
(Great job, though.)
Carl said,
Friday, September 1. 2006 at 13:45 (Reply)
@yellowled, what exactly does it do when a paragraph is used, I haven't tested that because many blog engines simply wrap a quote in the blockquote tags without the paragraph element. I'd be happy to play with this code more and try to find a solution. Also, if you're having trouble with paragraphs, it is possible to style any paagraphs that fall under a blockquote, simply add "blockquote p {}" to your stylesheet.
YellowLed said,
Sunday, September 3. 2006 at 06:56 (Reply)
However, I simply put up a screenshot for you, see http://www.yellowled.de/tmp/bq.png - this is a p within a blockquote in Firefox/Linux using s9y 1.1-beta1.
I think it sort of 'shrinks' the blockquote, probably because of the setting for a paragraph within .serendipity entry:
/* additional styles used for entry text */
.serendipity_entry p {
text-align: justify;
margin: 2% 0;
padding: 0;
}
If I can find the time, I'll play around with blockquote p { } a little, thanks.