Home WordPress How to Edit Blockquote Style in WordPress (With Examples)

How to Edit Blockquote Style in WordPress (With Examples)

If you are a WordPress blogger and often write your thoughts on it, chance that you may often add some quotes from influenced persons to sharpen your arguments. In WordPress, we can add a blockquote and will be showed on a different style. All you need to do is block your desired words and click on the Blockquote button available on the WordPress WYSIWYG editor.

example_blockquote

Each of WordPress theme comes with various styles of blockquote. Some are nice to look but there are also themes with a poor blockquote style.

If you think you need to edit your theme blockquote style, you can do it manually by editing its style.css file. In the WordPress theme structure, style.css play a role to prettify the look of theme, including blockquote style. Follow the steps below if you want to edit your theme blockquote style

  • Login to your WordPress dashboard and go to Appearance –> Editor. Choose Stylesheet (style.css) on the right sidebar

stylesheet

  • Scroll down your mouse and find the blockquote section. Use ctrl+f for a quicker way. Replace the blockquote section with your desired one

block

If you have no idea how to customize blockquote on your theme, below are 5 examples that you can try

1

 

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

2

 

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

3

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

4

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

5

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

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

MOST-READ THIS WEEK