Styling 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

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

Say thanks by sharing this post with your friends

About Paul Cunningham

Paul has been blogging since 2006, runs a popular technology website, and is the author of several ebooks. Read more about him here, and follow him on Twitter at @paulcunningham.

Comments

  1. Tom Bones says:

    Thanks for that! I used sample #3.

  2. Paul { says:

    You’re welcome Tom.

  3. WpExplorer { says:

    Thank you. These are some very nice styles.

  4. SuL64n says:

    Thank you I liked it and i used #3

    :)

  5. GEORGE says:

    Thank very much for information

  6. Marinos { says:

    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!

  7. 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! :)

  8. Janet says:

    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

Trackbacks

  1. [...] The “Indent” button moves text to the right by 30 pixels.  If you want to indent text even further you just press it again and the text is indented a further 30 pixels.  In some WordPress themes using the indent button will change the text to a blockquote. [...]

  2. [...] Styling Blockquotes with CSS ~ Blogging Teacher [...]