How to Style BlockQuote With CSS for BlogSpot and WordPress

As the title of the article suggests, we’ll be using :before and :after attributes in defining our CSS. However, the actual credit goes to the “content” property which helps us to achieve cool effects via CSS. So, in this article, I’ll illustrate the basic usage of content property to add stylish block quotes using CSS. In other words, you’ll be able to add a block quote that appears to have an image but does not. Sounds interesting, but confusing… Isn’t it? Continue with the article and you’ll better understand about the same.

If you read Shoutmeloud on a regular basis, I’m sure you would have noticed block-quotes somewhere in any of the article. If you inspect the same using firebug or view the page source, you’ll find the following CSS defined for block-quotes in the custom.css file.

.custom blockquote {color:#9E9E9E;font-style:italic;margin:2px 0 13px; border-left: 0;}
.custom blockquote p {background:url("images/blockquote.png") no-repeat scroll 5px 0 transparent;font-size:14px !important;padding:0 30px;}

From the above code, it is clear that Harsh has used an image to style the block-quotes. But, what if we could achieve a similar effect using pure CSS – no images involved in it. Cool… Isn’t it? Well, you’ll be able to achieve it by following the tutorial below. Take a look at the screen shot below for the final effect – screen shot taken from my demo blog run on blogspot.

Let me define the HTML involved behind block-quotes.

<blockquote>
So, this is the example statement for testing block quotes.
</blockquote>

You need not define the above codes anywhere in your template/theme. By default, they’ll will be added to your articles when you hit block-quote icon in your post editor – be it WordPress or Blogger. So, select the text which you want to appear as a block quote and hit the corresponding icon to get the HTML work.

Now, we need to define the CSS for the same. The procedure for WordPress Users and Blogspot Users are little different. However, the CSS involved is the same. Well, I’ll start with the tutorial for WP users first. WP users need to add the following codes to their custom.css file and upload the same to their file manager to enable the effect.

Block Quote Styling for WordPress: 

.blockquote {
    padding-top: 0px;
    overflow: hidden; /* clearfix alternative */
    font-size: 15px;
    font-style:italic;
    line-height: 16px;
    padding-bottom:5px;
    color: #454545;
 }
.blockquote:before {
    display: block;
    float: left;
    margin: 5px 10px 0 0;
    font-size: 50px;
    content: open-quote;
    color: #bababa;
    text-shadow: 0 1px 1px #909090;
 }
.blockquote:after {
    content: none; /* could be content:close-quote; */
 }

Very simple! Isn’t it? If you find difficulties in adding the same, then leave a comment and we’ll help you out.

Block Quote Styling for BlogSpot blogs:

When it comes to blogspot users, navigate to “Design >> Edit HTML” from your blogger dashboard and search for the following  code in your template.

.post-body blockquote

Just replace the entire block, following the above codes, with the following piece of code.

.post-body blockquote {
    padding-top: 0px;
    overflow: hidden; /* clearfix alternative */
    font-size: 15px;
    font-style:italic;
    line-height: 16px;
    padding-bottom:5px;
    color: #454545;
 }
.post-body blockquote:before {
    display: block;
    float: left;
    margin: 5px 10px 0 0;
    font-size: 50px;
    content: open-quote;
    color: #bababa;
    text-shadow: 0 1px 1px #909090;
 }
.post-body  blockquote:after {
    content: none; /* could be content:close-quote; */
 }

That’s it! Save your template and your done! Possible customizations include changing the color for the blockquotes, increasing or decreasing the size for the same and changing the background color. It’s pretty self explanatory. Just play with the values defined for color/font-size attributes in the CSS mentioned above and you’ll be able to understand the same.

Well, if you find any bugs with the above code, then leave a comment below and get it solved . I’ll come up with another article wherein you can add images to specific link types using the above content property and :after attribute – probably in not more a week. Anyway, share your opinions about this article via comments! Don’t forget to subscribe to us for more design tutorials.