11 Stylish Ways to Customize Blockquote CSS In WordPress Themes?

Quotes- A story describes in few words. When you present your thoughts, work, or any content in a quote it looks more attractive. So, when you are adding a Blockquote in your website content you are simply adding more likes and share of your website.

Since quotes are the most memorable parts and most shareable parts of your post or presentation. That’s why many newspapers and mainstream media websites customize their Blockquote style.

As we mostly deal with WordPress and designing sites too. So,  we will love to explain how to Customize Blockquote CSS in WordPress themes and add variation in the Blockquote style.

Before going deep in customization first understand what is Blockquote in WordPress-

What Is Blockquote In WordPress

Blockquote is an HTML element or code used to define a long quotation. According to the default HTML styling of maximum browsers, it will create the right & left margins on the display and in composed form.

The same thing we add in WordPress website to make some highlights in content. It is a simple feature but an eye catchy add-on to your website.

Every feature in WordPress gives you an opportunity to modify and create something unique for your audience. On the same note, we will share how to customize Blockquotes style in WordPress website.

Customize Blockquote CSS In WordPress

WordPress permits you to add Blockquotes in your pages or posts by using the toolbar area in the write section.

Blockquote is an HTML element in your page or post that we use to customizing the style. There is an example of HTML given below but we will use the text mode in WordPress post editor.

<blockquote>Museums provide places of relaxation and inspiration. And most importantly, they are a place of authenticity. We live in a world of reproductions – the objects in museums are real. It’s a way to get away from the overload of digital technology
<cite>Wise Man</cite></blockquote>

You want to customize the blockquotes style in WordPress then you have to modify the style.css file in your theme.

To do this either you can go to Appearance >> Editor in WordPress admin area. or edit the files by using FTP.

Now, if you want to do this then you would require to use one of the styles given below and override your blockquotes style. In case there is none exist then add these.

Classic CSS Blockquote Style: Add Quote In Background

Usually, many people use CSS background-image to add large quotation marks in blockquotes. Also, using a background image with your quote makes it more relevant to your message in the image that you are using. Thus in the given example we have used below;

classic-css-blockquote

To Customize Blockquote and add the quote as a background image. You have to use the below-written code.

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

Classic Blockquote with Image

Here, we have used a background image to quotation marks in blockquotes. Because sometimes a simple quotation mark makes your blockquote very allegiant.

classic-image-quotes Customize Blockquote css in WordPress
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”;
}

Simple Blockquote

For this you can use the background image with a dashed left border rather than blockquotes.

simple-css-blockquote-example
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”;
}

White Blue and Orange Blockquote

If you want to customize blockquotes in a colorful manner, that makes it more highlighted and more visible to your readers. as you want then you can use this. Also, you can use different color combinations with is to match with your rest of the page content. All you need, just to use your imaginations.

orange-blue-white
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”;
}

Using Google Web Fonts for Blockquotes in CSS

we have used Droid serif font from Google web fonts library.

google-font-blockquote
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”;}

Round Corner Blockquotes

In this you can use round corners and drop shadow for borders. Because of the round corner in your quote, it gives the appearance of a paper cutting. Also, it becomes more highlighted to readers, with its sleek round corners.

round-corner-blockquote
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”;
}

Using Gradient as Background for Blockquote

We have used CSS3 gradient to enlarge background of blockquotes.

Since CSS gradient is tricky because of cross-browser compatibility. So, we recommended using color labs, CSS gradient generator.

Customize Blockquotes
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”;
}

Center Align Blockquote

As we use most of the text style in our post. But the maximum time we use left-aligned text only. Therefore if you make your blockquotes to center align manner. then they become more highlighted and attracted ever before. You can try this in your post and can see the difference.

For doing this in your own post all you need to do is to add given below short CSS snippet:

google-font-blockquote
blockquote {
max-width: 550px;
text-align: center;
margin: 20px;
padding: 20px;

}

Change Font, Color, and Size In Blockquote

Let us now try one more simple but yet attractive style in the blockquote. Let’s try to change the font color, and increasing the size of the blockquote fonts.

Just use the given below code and use your imagination too to give your blockquote a new style and color with desired font size:

blockquote {
max-width: 550px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
}

Multiple Images In Background

Although you can also use the multiple images in your blockquote background that you desire with the help of css shortcode.

In the given below, code we are using the blockquote:before, which is a pseudo-element that allows you to add another background image with the existing one in your blockquote. So let us try now:

blockquote {
width: 450px;
background-image:url(‘http://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(‘http://example.com/wp-content/themes/your-theme/images/pin.png’);
}
blockquote cite:before {
content: “\2014 \2009”;
}

Background Pattern In Blockquote

Using the single image as patter in your blockquote background makes it as unique as you want. All you have to is just try different image patterns to makes it more stylish.

See the given below example and check out the code, try this in your own blog:

blockquote {
width: 450px;
background-image:url(‘http://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”;
}

Conclusion

Here, in this post, we have discussed how to customize blockquotes style in WordPress themes. We hope this post will help you to customize it. 

If you have any problem,  tell us in the comment section below. We are happy to help you. If you like this post, please share it with your peers.

You can contact our WordPress Support Team Dial +1-855-945-3219 (Toll-Free). The door to our WordPress customer service is always open for you. We will be pleased to help you and solve the issue related to WordPress.

That’s all, thanks!

Read More Blogs:



Leave a Reply

Call Now