How To Align Your WordPress Quotes Left Or Right

Sometimes we will want to quote some phrases to make it more outstanding so as to grab the attention of our readers. Of course in WordPress there is a ‘blockquote’ tag which we can use and style to our fancy but how about when you want to align the quotes to the left of the right of our post and have our text wrapped around the quotes?

In this blog, I have styled my blockquotes to have a black background with white text and an image of the word “Quote” in the background. When I use the ‘b-quote’ tags in the post editor, I will get this result. (P.S. Will not be visible in your Feedreader)

This is my style of quoting certain text which I normally have copied from other sources. Using quotes brings attention to that particular part of the post.

The Quick Brown Fox Jumps Over The Lazy Dog

Quotes can be improved further by positioning them to the left or right. It is especially useful when you want to quote a short phrase. These functions has been around for as long as I can remember but seldom used by many. The idiom on your left is accomplished with these codes in the stylesheet. All you have to do is to specify the class when you are writing the post, like this:

<p class="quote-left">All Your Text here</p>

Change the word “left” to “right” if you want it appearing on the right.

The CSS codes needed to achieve this are as below. Just copy and paste them anywher in your stylesheet.

.quote-left { font: normal 24px/30px "Tahoma", Georgia, "Trajan Pro"; color: #000000; margin: 10px 12px 5px 5px; padding: 12px 5px; float: left; width: 40%; text-align: left; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; }
.quote-right {font: normal 24px/30px "Tahoma", Georgia, "Trajan Pro"; color: #000000; margin: 10px 5px 0px 12px; padding: 12px 5px; float: right; width: 40%; text-align: right; border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;}