Apr 08 2008
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.
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?
This is a website by Sadish Bala, created to share the news, tips and tricks on using WordPress.
# Matthiason 08 Apr 2008 at 10:14 amGreat job! I like your attention on SEO-topics
# netsteron 11 Apr 2008 at 10:02 amCool! I love it too but kinda lazy to look into it hahahaha now, this one come in handy
# eric akmalon 12 Apr 2008 at 4:06 amquite simple but really cool technic boss
thx
http://curhatbarudak.com
# Franca Richardon 12 Apr 2008 at 6:03 pmGood, I love the bq style u mentioned,
# Hannaon 15 Apr 2008 at 9:03 amI 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!
# Matthiason 15 Apr 2008 at 10:19 amSadish has this feature in some of his themes, check it out at http://wprocks.com/demo/ !
# bradon 24 Apr 2008 at 5:12 pmHow 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
# Sadishon 25 Apr 2008 at 6:32 amthanks 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.
# Joshua Mostafaon 01 May 2008 at 12:32 amI 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.
# Sadishon 01 May 2008 at 9:15 amThanks 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.
# Stephen Rideron 02 May 2008 at 1:43 pm(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.
# Sadishon 02 May 2008 at 2:03 pmTo 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.
# WP loveron 28 Jul 2008 at 1:21 pmSadish,
Thank you! This is really neat
# Charming Lambon 12 Aug 2008 at 2:42 pmI cannot seem to get this to work correctly. Can you take a peek and see where I may have gone wrong?
Warmest regards.