Blockquotes Style

 

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.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 18px;

04	font-style: italic;

05	width: 450px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #383838;

11	background:#ececec;

12

}

13

14	blockquote:before {

15	display: block;

16	content: "\201C";

17	font-size: 80px;

18	position: absolute;

19	left: -10px;

20	top: -10px;

21	color: #7a7a7a;

22

}

23

24	blockquote cite {

25	color: #999999;

26	font-size: 14px;

27	display: block;

28	margin-top: 5px;

29

}

30

31	blockquote cite:before {

32	content: "\2014 \2009";

33

}

2. Classic Blockquote with Image

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

01	blockquote {

02	font: 16px italic Georgia, serif;

03	width:450px;

04	padding-left: 70px;

05	padding-top: 18px;

06	padding-bottom: 18px;

07	padding-right: 10px;

08	background-color: #dadada;

09	border-top: 1px solid #ccc;

10	border-bottom: 3px solid #ccc;

11	margin: 5px;

12	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);

13	background-position: middle left;

14	background-repeat: no-repeat;

15	text-indent: 23px;

16

}

17

18	blockquote cite {

19	color: #a1a1a1;

20	font-size: 14px;

21	display: block;

22	margin-top: 5px;

23

}

24

25	blockquote cite:before {

26	content: "\2014 \2009";

27

}

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.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 16px;

04	font-style: italic;

05	width: 500px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #383838;

11	border-left:3px dashed #c1c1c1;

12	background:#eee;

13

}

14

15	blockquote cite {

16	color: #999999;

17	font-size: 14px;

18	display: block;

19	margin-top: 5px;

20

}

21

22	blockquote cite:before {

23	content: "\2014 \2009";

24

}

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.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 16px;

04	font-style: italic;

05	width: 450px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #FFF;

11	border-left:5px solid #FF7F00;

12	background:#4b8baf;

13

}

14

15	blockquote cite {

16	color: #efefef;

17	font-size: 14px;

18	display: block;

19	margin-top: 5px;

20

}

21

22	blockquote cite:before {

23	content: "\2014 \2009";

24

}

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.

01	blockquote {

02	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);

03	font-family: 'Droid Serif', serif;

04	font-size:16px;

05	font-style:italic;

06	width:450px;

07	background-color:#fbf6f0;

08	border-left:3px dashed #d5bc8c;

09	border-right:3px dashed #d5bc8c;

10	text-align:center;

11

}

12	blockquote cite {

13	color: #a1a1a1;

14	font-size: 14px;

15	display: block;

16	margin-top: 5px;

17

}

18

19	blockquote cite:before {

20	content: "\2014 \2009";

21

}

6. Round Corner Blockquote

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

01	blockquote {

02	width: 450px;

03	background-color: #f9f9f9;

04	border: 1px solid #ccc;

05	border-radius: 6px;

06	box-shadow: 1px 1px 1px #ccc;

07	font-style: italic;

08

}

09	blockquote cite:before {

10	content: "\2014 \2009";

11

}

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.

01	blockquote {

02	width: 450px;

03	color:#FFF;

04	background: #7d7e7d; /* Old browsers */

05	background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */

06	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */

07	background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */

08	background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */

09	background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */

10	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */

11	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

12	border: 1px solid #ccc;

13	border-radius: 6px;

14	box-shadow: 1px 1px 1px #ccc;

15	font-style: italic;

16

}

17	blockquote cite:before {

18	content: "\2014 \2009";

19

}

8. Blockquote with Background Pattern

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

01	blockquote {

02	width: 450px;

03	background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

04	border: 1px solid #ccc;

05	box-shadow: 1px 1px 1px #ccc;

06	font-style: italic;

07

}

08	blockquote cite:before {

09	content: "\2014 \2009";

10

}

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.

01	blockquote {

02	width: 450px;

03	background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

04	border: 1px solid #ccc;

05	box-shadow: 1px 1px 1px #ccc;

06	font-style: italic;

07

}

08	blockquote:before{

09	position:absolute;

10	margin-top:-20px;

11	margin-left:-20px;

12	content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');

13

}

14	blockquote cite:before {

15	content: "\2014 \2009";

16

}

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.