Warcraft Style Blockquotes

A while ago I played around with a plugin that would change the look of my blockquotes to mimic World of Warcraft blue posts as seen on mmo-champion. There’s been a few updates and added features over the past few months, but I found the easiest way to get the style I wanted was to just add to my own css.

For example, using [ blockquote ] text here [ / blockquote ] I can style them any way I want. Just by adding a background color, round corners (doesn’t work in IE) add box shadow, change the font color, size and family.

/* warcraft style blockquotes are pretty cool thanks Lassirra for the image*/
blockquote {
 -webkit-box-shadow: 0px 1px 3px #525252;
 -moz-box-shadow: 0px 1px 3px #525252;
 box-shadow: 0px 1px 3px #525252;
 color: #089ade;
 margin: auto !important;
 width: 90%;
 padding: 10px !important;
 background: url('http://zeaks.org/blizzbg.jpg') #333 no-repeat !important;
 -moz-border-radius: 8px;
 font-size: 12px;

This will give you an effect that looks like this which works on any color background, any length of text. I’ve added !important in a couple areas because it wouldn’t work properly in 2010 child themes. The background image and border-radius idea was provided by Lassirra.
Anyways, I was planning on updating the warcraft blockquote plugin, but for now this solution seems better. If you don’t want to use the blockquote tag, you can add your own around the text such as

<div class="wow-quote">Your quoted text here</div>

then use .wow-quote in your css instead of .blockquote

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap code in [code] Your Code Here [/code] tags.

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge