• X

    How to Style BlockQuote With CSS for BlogSpot and WordPress

    By in Uncategorized

    Bluehost hosting

    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 theblockquote “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.

    blockquotes without image

    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.

    blockquote icon wp blogger

    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.

    $49 worth WordPress Guide

    Discover more awesome articles

    Article by

    Mukund has written 30 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 6 comments… read them below or add one }

    Annabelle

    I used it on blogger and it works. Can I just ask if we could have the same symbol to end the quote?

    Reply

    Ben

    Doesn’t seem to be working with WP. I’ve tried putting your code in both style.css and a newly-created custom.css. Does custom.css exist somewhere outside of my theme already? Should I be adding custom.css to the theme folder, or to theme/stylesheets?

    Reply

    Jason M

    I can find the code.. just can’t find any decent blockquote images. Have any ideas where I should be looking for them at? – Thanks!

    Reply

    shashank chinchli

    Firebug and your code jazzed up my blog.Thanks mukun for rolling tonnes of blog @ SML.

    Reply

    Mukund

    @Ji_Won: Well, go ahead and change them. It varies from one theme to another. So, you can change them. But, I recommend you to have a back up copy of your theme, just in case, you end up in a mess using the above codes/CSS.

    Reply

    Ji_Won

    can’t find “.post-body blockquote” in my template.. But there’s “blockquote”..

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `