7 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 and in the given example we have used below;

classic-css-blockquote

To add the qoute 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.

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 make your blockquotes colorful as you want then you can use this.

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.

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

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