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?
Great job! I like your attention on SEO-topics
Cool! I love it too but kinda lazy to look into it hahahaha now, this one come in handy
quite simple but really cool technic boss
thx
http://curhatbarudak.com
Good, I love the bq style u mentioned,
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!
Sadish has this feature in some of his themes, check it out at http://wprocks.com/demo/ !
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
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.
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.
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.
(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.
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.
Sadish,
Thank you! This is really neat
I cannot seem to get this to work correctly. Can you take a peek and see where I may have gone wrong?
Warmest regards.
Hi Sadish,
I wanted a stylish blockquote which is like even bigger than the normal shown here.
I have been searching for a really big Blockquoting wordpress plugin and as of now haven’t found a great one.
I want the blockquote to have special importance within the wordpress blog posts and ‘may’ have a separate css style for it and ‘may’ be able to modify its background.
Do let me know if you have any such blockquote plugin.
By the way, I even require a good wordpress “Request A Quote NOW” or contact form plugin but haven’t found a friend in cforms which is not so user friendly and visitor friendly as well.
I had be glad to receive a positive response.
Thanks,
Ron.
I had be glad to receive a reply. Thanks.