Simple Guide to Styling Blockquotes Within Your Posts for Those with Limited Technical Skills

Part six of: “Stylizing Your Content”.

For this, there is only one file you will be working with:

1. style.css

You can find this in your WordPress admin under Presentation > Theme Editor - listed on the right hand side.

Open up your style.css file and look for the following:

blockquote {
padding-left: 10px;
border-left: 5px solid #ddd;
color: #666;
}

The red part is what you’re looking for, the middle is what we will change to suit our style (if you can’t find it, then create it).

Styling Blockquotes

Here’s a bunch you can either use as is, or tweak to fit your template:

Style #1

blockquote {
padding-left: 10px;
border-left: 5px solid #ddd;
color: #666;
}

Example:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mattis, orci vitae adipiscing venenatis, erat metus faucibus est, sed convallis nulla leo ac metus.”

Style #2

blockquote {
font-family: ‘Times New Roman’, Times, Serif;
padding: 10px;
color: #666;
font-style: italic;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

Example:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mattis, orci vitae adipiscing venenatis, erat metus faucibus est, sed convallis nulla leo ac metus.”

Style #3

blockquote {
font-weight: bold;
font-style: italic;
color: red;
}

Example:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mattis, orci vitae adipiscing venenatis, erat metus faucibus est, sed convallis nulla leo ac metus.”

Style #4

blockquote {
border: 3px dotted #ddd;
padding: 10px;
font-style: italic;
color: #666;
}

Example:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mattis, orci vitae adipiscing venenatis, erat metus faucibus est, sed convallis nulla leo ac metus.”

Now, whenever you wrap something in a <blockquote> tag, it will display accordingly.

See you soon for part seven of “Stylizing Your Content”.

Christian from Smiley Cat Web Design has put together a great pullquote showcase. Go check it out.

Image credit: ximenatapia.