Home » Customize Blockquote in WordPress Easily – Responsive Styling

Customize Blockquote in WordPress Easily – Responsive Styling

We can customize blockquote in WordPress. Before going to the discussion that how to customize blockquote you should know what is blockquote and why to use blockquote. The blockquote is one of the tools in WordPress that is used for styling and highlighting the text. The styling of blockquote in WordPress is different for the different themes. So if you not happy with the blockquote styling then you can customize it according to your need. And for customizing blockquote you should have some knowledge of CSS.

Customize Blockquote

Unfortunately, when I have installed my WordPress theme then there was no any blockquote styling. So, I have done it my self and sharing my experience with you all. Because I have good knowledge of CSS so it was not a tough task for me. But there are some people who do not have knowledge of CSS and they are also afraid of codes so for that people I am also sharing the codes which I have used on my WordPress site. If you have some knowledge of CSS then you can also customize it according to your needs.

Also Read: Install Kali Linux In VMware 2018   
                     More WordPress Tricks

Steps for Customize Blockquote in WordPress

1. First of all, go to Dashboard>Appearance>Editor>Style.CSS

2. Then search for blockquote (Press ctrl+F and enter blockquote) and you can also search it manually.

change blockquote

As I earlier said that blockquote doesn’t have any styling in my theme ( As shown above).

3. This is the final step, Remove the previous blockquote codes in the style.css file and copy the given code and paste it into the style.css file and press update so that your style.css will be updated.

Customize Blockquote

This is the output sample of the blockquote styling for the below codes.

Codes:

blockquote {
width: 100%;
max-width:1170px;
margin: 30px auto;
box-sizing: border-box;
padding: 7px 7px 7px 7px;
border-left:8px solid #1abc9c;
border-right: 3px solid #1abc9c;
box-shadow: 2px 2px 15px #ccc;
position: relative;
color: #2c3e50;
text-align: justify;
font-family: Roboto;
content: “”;
font-style: italic;
}

blockquote:before {

font-size: 30px;
position: absolute;
font-size: 60px;
font-weight: bold;
color: #757575;
left:10px;
top:26px;
}

blockquote p{
margin-top: 0px;
margin-bottom: 0px;
clear: both;
display: table;

}

 

Now you can use blockquote with above mention style and for changing according to your need you should have knowledge about CSS.

Note: Sometimes it will require some change in the code to get the exact Blockquote as I am having. It depends on your theme, If you are getting any issue you can comment below or mail us.

Azzu

My name is Azad Ansari. I am from Delhi. I have completed my bachelor degree in computer science engineering. I have interest in technology and blogging that's why I have started this blog.

Add comment

Leave a Reply

Your Header Sidebar area is currently empty. Hurry up and add some widgets.