Connect
To Top

How to have a stylish blockquote as in Magazines?

Recently Francesco asked me How to have a stylish blockquote as in Magazines? in our support forums.
He actually provided a site where he saw a blockquote style that he liked and I looked into it.

He wanted his blockquotes to look like the following image.

blockquote

I looked into the “View Source” of it and it looked something like this.
<div class="quoteborder">
<div align=”center” style=”width:150px; margin:6px 0px 6px 0px;”>
<span class=”quote”>“</span>
<span class=”quotetext”>your quote is entered within this span.</span>
<span class=”quote”>” </span>
<div class=”quoteborder” style=”margin:6px 0px 0px 0px;”></div>
</div></div>

“your quote is entered within this span” is the actual text that we want to be displayed in the magazine style, but see how it is surrounded by so much code.

What are the potential issues that might arise when using such technique.
Your page becomes “bloated” with so much code.
This is bad because
a) it increases the overall size of the page and the overall bandwidth your site uses.
b) it affects in a bad way for Search Engine Optimization. [Search Engines like to see less of the HTML code and more of your content]
c) it increases the probabilty of you making a syntax error when pasting the code.
d) The visual editor in WordPress might screw up all your code, unless you know how to do it the right way.

Is there any other way of achieving a similar style with less code?

We basically want the blockquote text to float on the right, with about 150px width. We also need a thick line at the top and at the bottom. How about doing this.
Step 1 : Add a class=”magazinequote” to the blockquote that we want to have this special style.
Step 2 : Define the styles for this class at the end of style.css
Something like

blockquote.magazinequote
{
float:right;
font-family:Georgia, Arial, Serif;
font-size:1.25em;
background:none;
width:150px;
border-top:#4C739E 3px solid;
border-bottom:#4C739E 3px solid;
margin:1em;
padding:1em;
color:#4C739E;
}

I hope this is much cleaner and leaner and is an efficient way of achieving a similar result. what do you guys and gals think?

14 Comments

  1. wprocks

    Matthias

    April 8, 2008 at 6:45 am

    Great job! I like your attention on SEO-topics 😉

  2. wprocks

    netster

    April 11, 2008 at 6:45 am

    Cool! I love it too but kinda lazy to look into it hahahaha now, this one come in handy 😉

  3. wprocks

    eric akmal

    April 12, 2008 at 6:46 am

    quite simple but really cool technic boss
    thx

  4. wprocks

    Franca Richard

    April 12, 2008 at 6:47 am

    Good, I love the bq style u mentioned, 🙂

  5. wprocks

    Hanna

    April 15, 2008 at 6:47 am

    I want to try this in my blog! I’ve also seen block quotes where it’s just intended and then a image shows up with the quote sign rather big to the right of the quote. That’s very cool too!

  6. wprocks

    Matthias

    April 15, 2008 at 6:48 am

    Sadish has this feature in some of his themes, check it out at http://wprocks.com/demo/ ! 😉

  7. wprocks

    brad

    April 24, 2008 at 6:49 am

    How cool is that and you are giving it for free!!
    That’s why i keep coming back Sadish you are the best in my book.
    Cannot wait to try it on my blog

  8. wprocks

    Sadish

    April 25, 2008 at 6:49 am

    thanks Brad. Please try it out. Also Let us know if you need to know how to do certain things with WordPress. If we know, we will let you know.

  9. wprocks

    Joshua Mostafa

    May 1, 2008 at 6:50 am

    I was just wondering the same thing, and I found the JavaScript Pull-Quotes plugin:

    http://striderweb.com/nerdaphernalia/features/wp-javascript-pull-quotes/

    It’s an elegant solution; it doesn’t include the extra blockquote in the markup (which would mean repetition of the same content), it adds it in dynamically using JavaScript. This means that feed readers and other non-browser use of content ignores it. You just have to put the text you want quoted into a span with a certain CSS class.

  10. wprocks

    Sadish

    May 1, 2008 at 6:51 am

    Thanks for posting your comment Joshua.

    Although the “pull quotes plugin” is trying to achieve a similar result, there is some difference in what we want to achieve.
    In this post, I am trying to style a “blockquote” element to display in such a way, but the “pull quotes plugin” is trying to style a “span” differently using Javascript.
    A blockquote is understood by any browser that understands HTML, but his pull quotes needs a javascript enabled browser.

  11. wprocks

    Stephen Rider

    May 2, 2008 at 6:52 am

    (I am the developer of the JavaScript Pull-Quotes plugin)

    Sadish — actually, the Javascript Pull-Quotes plugin does not format the span, it takes the contents of the span and duplicates it in a blockquote or div element.

    The fact that it only works with JavaScript was a conscious choice — I could have just as easily done it in PHP. The reason I feel this is a better way is that the duplicated text only will show up in graphical browsers, and not (for example) unformatted RSS feeds, text-only browsers, or screen readers.

  12. wprocks

    Sadish

    May 2, 2008 at 6:52 am

    To Stephen.
    Thanks for making it more clear for all of us. When I read your plugin page, it was not apparent to me that you are duplicating it into a blockquote element.

    To All,
    I would like to request you to refrain your comments to what is available on this website.

    Thanks.

  13. wprocks

    WP lover

    July 28, 2008 at 6:53 am

    Sadish,

    Thank you! This is really neat 🙂

  14. wprocks

    Charming Lamb

    August 12, 2008 at 6:54 am

    I cannot seem to get this to work correctly. Can you take a peek and see where I may have gone wrong?

    Warmest regards.

Leave a Reply

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

More in Uncategorized