Blockquote Blues!

Recently I was cleaning up some of my posts on TBODC and I noticed one of my plain bland-looking blockquotes. Naturally, being a designer, I had to do something about this. The blockquote is a highly underrated character on a blog or website. Usually it just sits there looking bored or like a clone of fifty-billion other blockquotes used across the Web. My goal was to change this, at least for my blog anyway.

Keeping to the theme of my blog and the fact that I'm a cartoonist I designed a speech balloon blockquote in Photoshop. Unfortunately, since I'm not a coder by any stretch of the imagination, I had no idea how to make this work on my blog. Designing something is easy, by comparison - you look at it in Photoshop and go, "Super! KaPow!", but then you have to figure out how to slice and dice it and make it work on a web page.

I had been in correspondence back and forth with SBA here on Blogging With Success and I had mentioned my blockquote dilemma to her. She made several suggestions including links to tutorials and resources right here on this site. I checked them all out, but except for the ones that explained how to use "quotation marks" there wasn't much I could use. Finally I turned to Google and after about two hours of searching I discovered there wasn't a whole lot of help there, either.

The design which I had developed was going to have an image for the top, a slice for the middle (background), and one for the bottom (as illustrated below).

The majority of coding tutorials talked about using the CSS syntax "blockquote: before" and "blockquote: after" to place these top and bottom images in the blockquote, but neither of these were working for me. In frustration I turned to a coding friend of mine and asked if he would lend me a hand. He said yes and I sent him the code I had written (thus far) and a screenshot of the finished blockquote design.

Usually blockquotes are pretty boring, but with CSS I knew he could make it better. Now I'm sure there are better ways to accomplish this, but here is the solution my friend came up with. TBODC is on Blogger so I always write my posts in the Post Editor there (usually in the Edit Html window) and so he streamlined the code I would have to insert each time I wanted a blockquote in my post. Here it is ....

<blockquote>
<img src="/img/quotetop.png" alt="" />
The blockquote is a highly underrated character on a blog or website. Usually it just sits there looking bored or like a clone of fifty-billion other blockquotes used across the Web. My goal was to change this, at least for my blog anyway. So I designed a blockquote with a personality and character to match my own site and voila - here it is!
<p class="cite">- Doug Cloud, <a href="http://dcblog.net">TBODC</a></p>
<img src="/img/quotebtm.png" alt="" />
</blockquote>

Unfortunately, I would have to add the top and bottom images manually since we could not find a proper work around, but it's better than what I had originally. Next he wrote up the CSS which would style this blockquote ....

blockquote img {display: block;}

blockquote {
  width: 345px;
  margin: auto;
  background: url(/img/quotemid.png) repeat;
}

blockquote p {
  font-size: 1.0em;
  font-style: italic;
  padding-left: 25px;
  padding-right: 15px;
  color: #663300;
}

p.cite {
  text-align: right;
  font-size:0.8em;
  font-style: normal;
  color:#663300;
}

p.cite a:link, p.cite a:active {
  font-weight: bold;
  font-style: normal;
  color:#663300;
}

p.cite a:visited, p.cite a:hover {
  font-weight: bold;
  font-style: normal;
  color:#993300;
}

Because I was using a background image for the center this caused that image to be displayed above and below the blockquote. To fix this I saved the top and bottom images with a background color (the same as the content area on which they would be displayed) and my friend added the "blockquote img {display: block;}" to the CSS to prevent the background image from overlapping. The "p.cite" codes are there so I can add a citation after the quote if I want to. And with the above code written and in place we have the finished blockquote design ....

Not bad, eh? How about you? Are you singing the blockquote blues? Are you ready for a change? Then I suggest taking what I have done here and incorporating it onto your own site or perhaps using this as a building block to create your own unique design.