These instructions are for the Genesis Framework. If you aren’t running Genesis, you’ll need to locate your custom CSS area and then follow along. Genesis users can simply modify the code in their child theme! The exception is if you are running Prose, there is a special CSS section you can use.
What is a blockquote?
On the WordPress edit screen, the sixth button over is the blockquote. It indents the text and in some themes, stylizes it. Here is an example.
“Create Your Laptop Lifestyle has the best tutorials!”
Here are a few examples of other blockquotes. As you can see, they can get quite elaborate!
For the purposes of this tutorial, we’ll keep things simple. We’ll stylize the font and add a nice background.
The first thing you need is to write the following code into your stylesheet. Here’s a tip about CSS. You can either find the code in your existing stylesheet and simply modify it* or you can write it out in a custom CSS box that many themes come with. *If you modify the theme stylesheet and it isn’t a child theme, it will get overwritten during an update so just know that. It’s better to add it to a specific CSS modifications area.
.content blockquote {
background: #D8E6ED;
border-left: 6px solid #000;
-webkit-box-shadow: 5px 0px 5px 5px #616161;
box-shadow: 3px 3px 3px 0px #616161;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
}
.content blockquote p {
font-family: Georgia, serif;
color: #000;
letter-spacing: 1.5px;
}
.content blockquote a, .content blockquote a:visited {
color: #7A6E72;
}
.content blockquote a:hover {
color: #26347A;
}
Explaining the code
So this design may not match your color theme or font styles. No problem! When you understand what each line of code does, you can adjust it to your liking. Below is a list of each element and what it does!
The blockquote background = .content blockquote
- Background: This is where you put the six digit color code you’d like for the box background. If you’d rather have an image background, you’d first have to upload the image to your media library, copy the file URL, and then use this code to replace it. background:url(images/fileurl.png) repeat;
- Border-left: This is where you see the black line to the left of the box. You can change the pixel size to make it fatter or smaller, and then change the color code. If you wanted the border on the other side, you’d replace the word left with the word right. And if you wanted the border to go all the way around the box, just delete the hyphen and the word and have it simply say border.
- -webkit-box-shadow: This is what creates the drop shadow on the box to make it look 3-D. If you adjust the numbers, you can make the shadow bigger or smaller, plus change the color with your six digit color code.
- Border-radius: This is the element that creates the rounded edge. The higher the pixel, the more round it becomes. If you up the pixel size a lot, you can get an oval shape.
The blockquote text = .content blockquote p
- Font-family: Here’s where you specify what font you want to use. Keep in mind that you have to have the font already loaded into your theme in order to pick one. For more explanation about adding Google fonts to your theme, check out WP Beginner’s tutorial. If that’s too overwhelming, just delete this line of code and your blog will automatically pull your preloaded paragraph font.
- Color: This changes the color of the text.
- Letter-spacing: This makes the letters a bit more spread out so it appears slightly different.
The blockquote link = .content blockquote a, .content blockquote a:visited
This simply tells your site what color to make a link IF it’s in the blockquote. If you look at the code right underneath it, you’ll see the word hover. This is telling your blog what color to transform the link when the mouse hovers over.
You can delete any parts you won’t use!
If you are pasting this into a custom CSS box on your theme, you can easily manipulate the code without worrying too much about messing up your site. Just keep an original copy somewhere if you need to revert back.
Using Blockquotes
I love to use blockquotes to write out memorable quotes or tweetables. You can also use them for quoting someone or to make a bulleted list stand out more. While it may be tempting to make a crazy blockquote style, it will be that way every time you use the blockquote button — and therefore limit its use a bit.
What about the big quotation marks?
When you see a blockquote like this…
You first have to create 2 images that are transparent (a png) and then add your quotes to either side of the blockquote. This CSS tricks article has all the instructions and code to go with it. Have fun and don’t be afraid to try something new!
