Better Blogging: Fix Up Your Blockquotes

I recently shared some CSS for changing how your text highlighting works on your blog, so how about we work on your blockquotes now?

This blog is on WordPress.com using the Single theme, so if you happen to be using both of those, this will be extra simple for you. 😉

Here’s how the theme’s default blockquotes looked:

My blockquote before adding CSS
Blockquote from RBG, Boss Bitch.

Perfectly fine, but not quite right for the look I’m going for here. Sure, I want it to be minimal (and it is), but those grey lines at the top and bottom weren’t for me, so I added some CSS to make a few adjustments.

And here’s how blockquotes look today:

My blockquote after adding CSS
Blockquote from RBG, Boss Bitch.

Ah, that’s better!

The pink line fits more with the rest of the site and I like the quotes in italics. (I was italicizing them manually a lot of the time lately, so this is simpler and more uniform.) Now the blockquotes stand out more, but don’t feel quite as divided from the rest of the post as they did before with the horizontal lines (and that works better for how I use them).

CSS selectors vary, but if you can find what your blockquote is called (hopefully “blockquote” like mine to make it easy), you can get this working too. (This post on finding CSS selectors is helpful if they’re new to you.)

Here’s how I figured out what to target in Chrome:

Open Chrome and go to a blog post that has a blockquote. Then go to View > Developer > Developer Tools. (Chrome has info on this here.) Or right click on a blockquote on your site it, then click Inspect Element.

That’ll expand the DevTools area and show you the Elements section. When you hover over a line in there, it’ll highlight the corresponding area on your site so you can figure out which element/selector applies to a particular spot.

Below is a screenshot of where I found a blockquote in my DevTools window (and realized it’s called plain ol’ “blockquote” so I could use that to add the CSS).

Chrome DevTools inspecting my blockquote

And this is what happened on my site when I hovered over the blue line above:

Chrome DevTools inspect my blockquote

So helpful!

Once you’ve got your selector picked out, you can pop over to your CSS area and start tweaking. (If you’re on WordPress.com and have an upgrade that allows you to add CSS, you can do that in Customize > CSS.)

The CSS I used to adjust my blockquotes:

blockquote {
	border: 0;
	margin: 20px;
	font-style: italic;
	line-height: 1.5;
	border-left: 6px solid #D400AA;
	background: #fff;
}

Here’s what each of the lines of CSS are doing:

  • Line 1: Targets the blockquote & gets us started.
  • Line 2: The “0” reduced the default grey lines to nothing.
  • Line 3: The “20px” indented my blockquote.
  • Line 4: Italicized the text in my blockquote.
  • Line 5: Adjusted the space between the lines.
  • Line 6: Added a solid 6px thick line to the left. The #D400AA is the color.
  • Line 7: Sets the background color to white.
  • Line 8: Closes the code so it can get to work!

Ta-da! Now get quoting! 😀