Edit WordPress CSS – Blockquote Example

Editing stylesheet in wordpress is very simple, you can either create a new stylesheet or override an existing one. In the below example i am going to override the blockquote stylesheet.

Edit CSS

Appearance > Edit CSS

Go to your blog admin page then hover over appearance and click the "Edit CSS" link, in the left hand side you can put your new CSS code, an instant change will show in the right hand preview screen, after you are satisfied just click on "Save & Publish" button.

Wordpress Edit CSS page

Custom Blockquote

Blockquote with lines

CSS used (notice how the below bold borders affected the above quote example) :

blockquote {
background: #f9f9f9;
border-left: 0px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
border-top: 2px solid #38b6cd;
border-bottom: 2px solid #38b6cd;

}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;

}
blockquote p {
display: inline;
}

The above example can be applied to anything, starting from headlines to images and buttons.


Subscribe to
for video tutorials updates

Leave a Reply

Your email address will not be published. Required fields are marked *