How To Customize Blockquotes Style in WordPress Themes

Name: Latest Blog is the right place to share and learn about IT Industry blogs Update
Address: new york, northeastern, 10001, Australia
Telephone: 1300 600 900
Price range: FREE
Rating: 4.9/5

On Jul 8, 2019

Quotes often are the most memorable part of your article. They are also the most shared part of any post or presentation. This is why newspapers and main stream media sites customize their blockquote style to make it stand out. In this article, we will show you how to customize blockquotes style in WordPress along with showing you 9 beautiful examples of customized blockquotes style.

WordPress allows you to add blockquotes within your posts and pages by using the toolbar area in your write section.

This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.

  <blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.  <cite>Wise Man</cite></blockquote>

In order to customize the blockquotes style in your WordPress theme, we would need to modify the style.css file of your theme. You can do this by either going to Appearance » Editor in your WordPress admin or edit the files via FTP.

Next, you would need to use one of the styles suggested below and override your blockquote styles. If none exist, then simply add these. You are also more than welcome to combine the two styles and customize to your heart’s desire.

1. Classic CSS Blockquote

Usually people use CSS background-image to add large quotation marks in blockquote. In this example we have used CSS to add large quotation marks.

  blockquote {  	font-family: Georgia, serif;  	font-size: 18px;  	font-style: italic;  	width: 450px;  	margin: 0.25em 0;  	padding: 0.25em 40px;  	line-height: 1.45;  	position: relative;  	color: #383838;  	background:#ececec;  }    blockquote:before {  	display: block;  	content: "201C";  	font-size: 80px;  	position: absolute;  	left: -10px;  	top: -10px;  	color: #7a7a7a;  }    blockquote cite {  	color: #999999;  	font-size: 14px;  	display: block;  	margin-top: 5px;  }     blockquote cite:before {  	content: "2014 2009";  }

2. Classic Blockquote with Image

In this example we have used a background image for quotation marks.

  blockquote {  	font: 16px italic Georgia, serif;  	width:450px;  	padding-left: 70px;  	padding-top: 18px;  	padding-bottom: 18px;  	padding-right: 10px;  	background-color: #dadada;  	border-top: 1px solid #ccc;  	border-bottom: 3px solid #ccc;  	margin: 5px;  	background-image: url(https://example.com/wp-content/themes/your-theme/images/gray-georgia.png);  	background-position: middle left;  	background-repeat: no-repeat;  	text-indent: 23px;  }     blockquote cite {  	color: #a1a1a1;  	font-size: 14px;  	display: block;  	margin-top: 5px;  }     blockquote cite:before {  	content: "2014 2009";  }

3. Simple Blockquote

In this example we have added background color and dashed left border instead of blockquotes. Feel free to play with the colors.

  blockquote {  font-family: Georgia, serif;  font-size: 16px;  font-style: italic;  width: 500px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #383838;  border-left:3px dashed #c1c1c1;  background:#eee;  }    blockquote cite {  color: #999999;  font-size: 14px;  display: block;  margin-top: 5px;  }     blockquote cite:before {  content: "2014 2009";  }

4. White Blue and Orange Blockquote

Blockquotes can be made to standout and they can be just as colorful as you want them to be.

    blockquote {  font-family: Georgia, serif;  font-size: 16px;  font-style: italic;  width: 450px;  margin: 0.25em 0;  padding: 0.25em 40px;  line-height: 1.45;  position: relative;  color: #FFF;  border-left:5px solid #FF7F00;  background:#4b8baf;  }    blockquote cite {  color: #efefef;  font-size: 14px;  display: block;  margin-top: 5px;  }     blockquote cite:before {  content: "2014 2009";  }

5. Using Google Web Fonts for Blockquotes in CSS

In this blockquote CSS example we have used Droid Serif font from Google web fonts library.

  blockquote {  @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400italic);  font-family: 'Droid Serif', serif;  font-size:16px;  font-style:italic;  width:450px;  background-color:#fbf6f0;  border-left:3px dashed #d5bc8c;  border-right:3px dashed #d5bc8c;  text-align:center;  }   blockquote cite {  color: #a1a1a1;  font-size: 14px;  display: block;  margin-top: 5px;  }     blockquote cite:before {  content: "2014 2009";  }

6. Round Corner Blockquote

In this example we have blockquote with rounded corners and we have used drop shadow for borders.

    blockquote {  width: 450px;  background-color: #f9f9f9;  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "2014 2009";  }

7. Using Gradient as Background for Blockquote

In this CSS blockquote example, we have used CSS3 gradient to enhance background of blockquote. CSS gradients are tricky, because of cross-browser compatibility. We recommend using colorlabs, CSS gradient generator.

  blockquote {  width: 450px;  color:#FFF;  background: #7d7e7d; /* Old browsers */  background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */  background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "2014 2009";  }

8. Blockquote with Background Pattern

In this example we have used a background image as pattern for blockquote.

    blockquote {  width: 450px;  background-image:url('https://example.com/wp-content/themes/your-theme/images/lined_paper.png');  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote cite:before {  content: "2014 2009";  }

9. Using Multiple Images in Blockquote Background

You can use multiple images in blockquote background using css. In this example we have used blockquote:before pseudo element to add another background image to blockquote.

    blockquote {  width: 450px;  background-image:url('https://example.com/wp-content/themes/your-theme/images/lined_paper.png');  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #ccc;  font-style: italic;  }  blockquote:before{  position:absolute;  margin-top:-20px;  margin-left:-20px;  content:url('https://example.com/wp-content/themes/your-theme/images/pin.png');  }  blockquote cite:before {  content: "2014 2009";  }

We hope that you found this article helpful in learning how to customize blockquotes style in WordPress. If you have any questions or suggestions, then please feel free to leave a comment below.