PLEASE SHARE

WordPress Wednesdays – Beautiful Blockquotes

Wordpress WednesdaysI’m sure you’ve seen them – really fancy looking quotes, beautifully styled on other peoples websites, and thought – “Why can’t my site do that?”

Guess what – it can! Although you may need some help from a programmer to get this set up, once you’ve got the styles in place, the rest is easy.

Firstly, start by styling your quotes the right way. If you look in the ‘Text’ tab in WordPress, your quote should look like this:

<blockquote>
Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
<cite>Brian W. Kernighan</cite>
</blockquote>

Which, depending on your styling, will come out something like this:

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
Brian W. Kernighan

You’ll find a button for blockquote in the tools in your editor (it looks like a curly quote), but you may have to switch to text view to add the cite.

Now, to make it beautiful, enter the CSS code. This will be added to the style.css file of your WordPress theme. If you’re not comfortable making this change, your programmer should be able to add in the code for you. For this example, I’ve added this code:

blockquote { 
   font-family: Georgia, serif; 
   font-size: 18px; 
   font-style: italic; 
   margin: 0.25em 0; 
   padding: 0.25em 40px; 
   line-height: 1.45; 
   position: relative; 
} 
blockquote:before { 
   display: block; 
   content: "\201C"; 
   font-size: 80px; 
   position: absolute!important; 
   left: -15px; 
   top: -20px; 
   color: #727091; 
} 
   blockquote cite { 
   color: #727091; 
   font-size: 14px; 
   display: block; 
   margin-top: 5px; 
   font-weight: bold;
}

which looks like this:

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
Brian W. Kernighan

Thanks to Matt at Webmaster-Source for the inspiration and explanation of this technique.

If you’d like to see some really beautiful, inspiring examples, check out these fantastic examples by Mary Lou at codrops:
http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/
Some of these use images to achieve the effect, but they are a great starting point for beautiful quotes.

If you’d like to get fancy quotes added to your site, contact us for a quote.

Comments Off on WordPress Wednesdays – Beautiful Blockquotes
Posted on by Sue
Categories: WordPress
Tags: