The WordPress visual editor has this button 
for turning text into a blockquote. A blockquote is simply a way of showing a block of text as being a quote from some third party (person, literature, etc).
You can make your blockquotes look more visually appealing by using CSS to style them. The possibilities are endless, everything from the simple to the very complex, and depending on the style of your WordPress blog you should be able to find a blockquotes style that works for you.
To begin with you will need to open the Style.css file for your WordPress theme in an editor such as Dreamweaver or Notepad.
Look for existing blockquote code. If it does not already exist you can create your own.
The kinds of CSS properties you may wish to play with are things like margin, padding, borders, and backgrounds. Here are some example styles for blockquotes.
Sample #1
blockquote {
margin: 5px 10px 5px 10px;
padding: 15px 20px 15px 20px;
border-width: 1px;
border-style: solid;
border-color: #cfcfcf;
background: url(images/blockquote1-img.png) no-repeat;
}
Sample #2:
blockquote {
margin: 5px 10px 5px 10px;
padding: 10px 10px 10px 10px;
border-width: 3px;
border-style: solid;
border-color: #980000;
color: #9b5c5c;
font-size: 14px;
font-style: italic;
}
Sample #3:
blockquote {
margin: 5px 10px 5px 10px;
padding: 10px 60px 10px 10px;
border-width: 1px;
border-style: solid;
border-color: #cfcfcf;
background-color: #d3eefd;
background-image: url(images/blockquote3-img.png);
background-repeat: no-repeat;
background-position: top right;
font-family: Georgia;
font-size: 14px;
font-weight: bold;
color: #8f8f8f;
}
Sample #4:
blockquote {
margin: 5px 10px 5px 10px;
padding: 10px 120px 10px 10px;
border-width: 1px;
border-style: solid;
border-color: #cfcfcf;
background-image: url(images/blockquote4-img.png);
background-repeat: repeat-y;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #efefef;
}
About Paul Cunningham
Thanks for that! I used sample #3.
You’re welcome Tom.
Thank you. These are some very nice styles.
Thank you I liked it and i used #3
:)
Thank very much for information
Hi,
I am a total n00b in CSS and I would like you to help me do this awesome stuff! I insterted the code of blockquote4 in style.css (I am using Thesis Theme) and while I use the “blockquote” button in HTML (WordPress-> Posts-> New Post) I dont get this awesome blockquotes of yours… Some advice please?
Thanks!
Hi Marinos,
Firstly, I just noticed that example 4 had a typo in the CSS code, which I’ve fixed.
Secondly, Thesis is a little different. Instead of editing style.css for Thesis you need to edit custom.css which is found in the /custom folder of the Thesis theme files. Hope that helps!
Thanks Paul! It worked like a charm!
Thanks Paul for this invaluable information! I was looking for something just like this to use for testimonies – this has saved me hours of searching online. I’ll be sure to keep following your blog & Twitter. Thanks again for providing such great and helpful information to many of us who are just starting out! :)
I added the image for number 4, and recreated it to match my clients website. I copied the code here, added the new graphic and it is cutting it off. It doesnt show the full image. Any suggestions on how to fix this?
Thank you!
Janet
You may just need to tweak the width of the image itself, or the padding/margin settings.
I will try resizing the graphic. I played with the margins already. I will let you know if that works! Thank you!