Styling WordPress blockquotes with CSS

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

Download image file

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:

Download image file

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:

Download image file

blockquote4 {
	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;
	}

Tagged as: CSS, Design, WordPress