Styled Blockquotes

August 4, 2010 By Leave a Comment

As seen above the blockquotes found in most WordPress themes look a bit bland and could do with some nice styling. Below are some samples of styled quotes that can be used in WordPress themes. These styled quotes should work in most themes without a hitch, if not some minor tweaking will be needed.

To test these stylings out you can replace the original blockquote code that should be located in your theme’s style.css and upload the included image.

Styled Quote 1

CSS Code:

blockquote {
	border: 1px solid #8D8761;
	min-height: 20px;
	padding: 15px 10px 10px 35px;
	margin-bottom: 20px;
	background-color: #DED9BA;
	background-image: url(images/blockquote.jpg);
	background-repeat: no-repeat;
	background-position: 3px 3px;
	}

Included image: image link

Styled Quote 2

CSS Code:

blockquote {
	background: #E8E8E8;
	margin: 0px 25px 15px 25px;
	padding: 10px 20px 0px 15px;
	border-top: 1px solid #DDDDDD;
	border-right: 1px solid #666666;
	border-left: 1px solid #DDDDDD;
	border-bottom: 1px solid #666666;
	}

Styled Quote 3

CSS Code:

blockquote {
        margin:22px 35px;
        color:#575757;
        padding: 10px 20px 5px 35px;
        background: #fff url("images/blockquote1.jpg") no-repeat 0 0;
        }

Included image: image link

Styled Quote 4

CSS Code:

blockquote {
	padding: 0 0.5em;
	border-left: 5px solid #8D8761;
	margin: 0;
	background-color: #DED9BA;
}

Well now, there you have it. With a bit of color editing and some css tweaking you will have some fancy quotes in no time.

Filed Under: CSS Styling

Speak Your Mind

*