I’m posting this because I’ve made a new commitment to give a bit more back to the ‘web’ in general, basically if I find some information or a technique I use in my business or here on BlogPiG.com I’ll post about it for others to find.

As it happens this is a technique I actually put together myself :)

The Problem

Most WordPress templates use a quote background image to enclose the blockquote content. The problem is that you CSS only allows one background image per element so you can only have an open quote image. I always thought this looked a little odd as you should really close the quotes too.

I found a couple of proposed solutions out on the web, the most interesting involved enclosing the the contents of the blockquote inside an additional DIV and styling that with another background image containing a close quote positioned to the bottom right.

This would indeed work but having to remember to add the additional DIV inside WordPress blockquotes would be a pain and it means you’d have to leave the WYSIWYG editor and switch to the HTML editor, an issue for some people perhaps.

In short it wasn’t elegant enough…

The Solution

I finally realised that WP already enclosed the contents of the blockquote inside another element, namely a paragraph ‘p’ tag. With this knowledge I could simply style the ‘blockquote p’ CSS to contain the close quote mark image and position it using margin and padding. Et voila!

WordPress blockquotes with a neat close tag automatically added each time I use them.

I centre my block and the text inside the paragraph but you should be able to style it exactly as you need with a bit of tweaking.

The CSS

/* Start blockquote */
blockquote p
{
width:100%;
color:#E6751F;
font-family:"Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
background-image:url('images/ClosePostQuote.png');
background-position:right bottom;
background-repeat:no-repeat;
text-align:center;
margin:0px 0px 0px 0px;
padding:0px 30px 15px 0px;
}

blockquote
{
width:75%;
margin-left:auto;
margin-right:auto;
padding:20px 0px 0px 35px;
background-image:url('images/PostQuote.png');
background-position:left top;
background-repeat:no-repeat;
position:relative;
left:-15px;
}
/* Finish blockquote */

Some Notes

I had to include the 0px margin in the p style or it doesn’t work, I have no idea why this is.

Add a contrasting background colour to both your ‘blockquote’ and ‘blockquote p’ styles temporarily whilst you adjust your padding. It makes it much easier to see what is going on.

If you’re centering the blockquote using margin left/right auto then don’t forget to offset it’s postion by the same amount as you right pad the paragraph. In my case the paragraph was right padded 15px so I positioned the block with a relative left -15px. This seems to maintain the centering nicely

I’ve checked this using Firefox, Chrome & IE browsers and all seems well. I’ve also tried it with lengthy multi-line quotes as well as single line and that appears to work without problems too (i.e this quote)

Please leave feedback in the comments if you use it successfully or improve it or maybe find it just doesn’t work for you.

Tags: wordpress, blockquote, close blockquotes, How To, blockquotes, close quote