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?
