- Image via Wikipedia
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;}
Related posts:
- Align Image In Post WordPress 2.7 More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only...
- CSS Codes To Highlight WordPress Post Background Color. Highlighting certain part of your post will attract your reader’s focus on something important that you might want to relate in your post. This following piece of codes will let you highlight the background of your post like what you are seeing now Read more on CSS Codes To Highlight...
- How To Change WordPress Theme Fonts First, there are 2 types of fonts. Serif fonts and SanSerif fonts. Serif fonts are fonts that have those “edges” and san serif fonts are those without. A good example of a serif font is New Times Romans while Verdana is a san serif. Read more on How To...
- How To Make Web Buttons Made myself some web buttons without using any background images. It is made possible by the latest standard in CSS called CSS3. However, till today, Internet Explorer does not support this. These tutorials have been around for quite sometime, so it is nothing new or innovative on my part. I...
- How To Align YouTube Videos In WordPress Post Under normal circumstances, when we want to align images, WordPress will give us the options when we upload the particular image. On the other hand, if the image source is from a different site and you have permission to use it, you can use the div align tag to...
