Styling blockquotes in WordPress with CSS

I like to blog about what interests me but already for a few weeks I was thinking that what this blog needs are some tutorials. You know, to work in my street-cred among the techie guys and just to help out the community cos that's the kinda guy I am...(kuch).

So here we go, our very first tutorial on how-to style blockquotes in WordPress with css and I'm pretty sure some of our developer's eyes will frown when reading this post and I'm sure to expect some comments on what is wrong about this post. But like a lot of bloggers, I'm a blogger and not a developer and already really happy I managed to get this blog where it is right now.

I like the Lightword WordPress theme and all the fancy widgets but I had to do a lot of repairs and css tweaking to get everything looking the way it does. So one of the the things I didn't like about the theme was the way the blockquotes were designed.

For me this didn't really work, a bit to dead and simple and not really saying quote.

Now this is the shit I'm talking about! Is this cool or what? Glossy magazine blockquotes to make your blog even more credible!

And with a little bit of help of css-tricks.com you can make it look even more metro, classier and glossier than ever!

Now I can already hear some people saying saying that there are already hundreds of tutorials like this out there. True but this tutorial solves a typical WordPress (theme) related issue which prevents the default css solutions from working correctly in all browsers, in my case Firefox. So bear with me and start with downloading the quote-open and quote-close and for the orange style you'll need the openquote and closequote images.

Got it? So here's pretty much the standard code I've tried and which you'll find pretty much the same on many real tutorial websites like webdesignerwall.com:

blockquote.style1 {font: 1.4em Georgia, "Times New Roman", Times, serif;color: #777777;border: 0px;padding-left:30px;padding-right:30px;padding-bottom: 0px;text-indent:-38px;background-image: url(/images/double_quote_close.gif);background-position: bottom right;background-repeat: no-repeat;}

blockquote.style1:first-letter {font: italic 1.4em Georgia, "Times New Roman", Times, serif;color: #777777;background: url(/images/double_quote_open.gif) no-repeat left top;margin-left:10px;padding-left: 28px;}

The first part places the quote-close image at the end and makes the right padding and text-indent, the second part puts the quote-open image at the beginning and alters the first letter to make it even more cool.

Proper usage would be: <blockquote>blablabla</blockquote>

Now in my situation this will work in Chrome but will not work in Firefox because WordPress seems to change
<blockquote class="style1">blablabla</blockquote>
into
<blockquote class="style1"><p>blablabla</p></blockquote>
and thus adding an unwanted <p></p> inside the blockquote preventing the first-letter style from working in Firefox. I found that I'm not the only one with this problem but I didn't find sites that actually offer a solution to this problem.

So the solution is simple (hence the for Dummy thumbnail in this post), instead of blockquote we apply the style to a paragraph <p> element. So you css will look like this:

.style1 {font: 1.4em Georgia, "Times New Roman", Times, serif;color: #777777;border: 0px;padding-left:30px;padding-right:30px;padding-bottom: 0px;text-indent:-38px;background-image: url(/images/double_quote_close.gif);background-position: bottom right;background-repeat: no-repeat;}

.style1:first-letter {font: italic 1.4em Georgia, "Times New Roman", Times, serif;color: #777777;background: url(/images/double_quote_open.gif) no-repeat left top;margin-left:10px;padding-left: 28px;}

For the orange super-duper-classy-metro version:

.style2 {font: 1.4em Georgia, "Times New Roman", Times, serif;color: #777777;padding-left:30px;padding-right:30px;padding-top: 8px;padding-bottom: 8px;background-color: #faebbc;border-top: 1px solid #e1cc89;border-bottom: 1px solid #e1cc89;margin: 5px;background-image: url(/images/closequote.gif);background-position: bottom right;background-repeat: no-repeat;text-indent: -38px;}

.style2:first-letter {font: italic 1.4em Georgia, "Times New Roman", Times, serif;color: #777777;background: url(/images/openquote.gif) no-repeat left top;margin-left:10px;padding-left: 28px;}

Now instead of <blockquote>we use <p> to get the end result with this code:

<p class="style1">And there you have it, blockquotes pimped with css!</p>

This will look like the quote we want and consistently through all browsers including Firefox. You'll probably have to change the padding and margins a little bit but this should get you sorted on the whole blockquote styling thing.

So there you have it, our first tutorial, definitely no rocket science but programming is so overrated anyway!

Related posts: