Writers Voice
Comments 20

How to Insert Bold Quotation Marks

There are three ways, at least, for adding quotation marks to a Blockquote. The first is the easiest – you just type them where you want them to go.

The second and third ways are achieved by writing CSS rules for Styling a Blockquote. If you have a WordPress.com theme, you will have to purchase the CSS upgrade before you can make these changes permanent. This option gives you many style upgrades, even if you never touch the CSS Stylesheet Editor.

You write the CSS in the Stylesheet Editor. Go to your Dashboard and click on Appearance – Customize – CSS.

Technique 1: Using the before selector to automatically add quotation marks to a blockquote.


The theme used a before selector that contained content: ‘\0201C’;
I added the CSS  (in italics below) to do three things:
I added the border with the blockquote { selector.
I moved the blockquote right and changed the background color with the .site-content .entry-content blockquote { selector.
I moved the existing blockquotes built into the theme to the left with the  .site-content .entry-content blockquote::before { selector.

blockquote {
border: .1px #a8a8a8;
border-style: solid;
border-radius: 10px;

.site-content .entry-content blockquote {
margin-left: -5px;
margin-top: 2px;
margin-bottom: 7px;
padding: 15px 20px .25px 30px;
background: #ffffff;
display: flex;

.site-content .entry-content blockquote::before {
margin-left: -35px;
margin-top: -10px;

Your theme may use different selectors, and you will have to figure out which ones to use.

Technique 2: If you want to use blockquotes you designed yourself, here is one way to do it:

Download, or create your quotation marks in the size you want them to appear on your page, then upload them to your WordPress Media Library. Note what the URL is for that image.

The quotation marks I’ve used here is a small .gif image that is 15X15 pixels in size. I could have made it larger, or a darker colour if I wanted bolder quotation marks.

Then write the CSS (in italics below) in the Stylesheet Editor. The blockquote { selector may not be the selector used by your theme – so you may have to test other selectors until you find the one that works.

blockquote {
background-image: url(‘insert your quotation mark URL here’);
background-position:top left;
padding:.7em 2.2em .2em 2em;

Insert your image URL where it says insert your quotation mark URL here. Your image URL must be inside one set of single quotation marks.
The setting for padding will determine where the image sits on your page, so you will have to tweak that.
The setting for color will determine the color of the font, so you will have to tweak that too.

There, that is it. Or it might not be it, in which case you should contact the WordPress Happiness Engineers or the WordPress Forum and ask for help!

Post 348

This entry was posted in: Writers Voice
Tagged with: , ,


Photos and Stories with a Canadian perspective. My four blogs showcase my main interests: Birds and Bugs; Plants and Places; Digital Photo Filters; Quotes and Quips.


  1. The Exclamation Mark you made was fabulous! Thank you for the 1,2,3 step! And, thanks for sharing the code!


  2. You amaze me, Margie, at how tech savvy you are or are becoming. I was overwhelmed just by your directions and had to go lie down and take a little nap. I don’t think I’m ready for that upgrade yet, though I’ve thought of purchasing the video upgrade so I can put videos in my posts.


    • Thanks Susan. I am, at heart, a person who likes to figure out how things work, then see what else I can do with them. My blog isn’t just a place to put photos and words, but a place to play with the technology of blogging.
      WordPress introduced a new feature a few days ago – extensive control of the colours on blogs. If you have the CSS upgrade, you can change background, title and link colours with a simple drag and drop interface. I think that WordPress is trying to make the CSS upgrade easy to use for those who don’t have the time or interest to figure out the CSS stylesheet.


    • There are some other things I would like to figure out, so maybe I could borrow your secret decoder ring for a while.


  3. You have clearly “crossed over.” You certainly know your “tech stuff.” You’re going to be my “go to” person from now on… : )


    • I really know nothing compared to people who know something, but at least I know what I don’t know. Sometimes.


  4. Does the $30 upgrade make it easier? All one has to do is switch the editor tab from Visual to HTML and do any coding required. That’s what I do.


    • The CSS upgrade let’s you change the appearance of your entire blog, while the HTML editor lets you change the appearance of the words within individual posts or widgets. For example, with the CSS upgrade I can put the big quotation marks in front of quotations and that change will affect every quotation in my blog that has been tagged with the blockquote. Or I could adjust the header size, change the color of the menus or make every link red if it was blue. CSS requires some effort to figure out, but WordPress is gradually adding more and more features so that the upgrade becomes user friendly.


  5. Jeez, Margie, your techno-computerese-knowing-stuff is almost scary. I’m impressed. Clueless, but impressed.


    • If you think that is scary, you should get a load of my hair do when I first get out of bed. One of my grand children once remarked, “Grandma, you have scary hair.”


  6. Yep, I started reading, and thought only you could figure this out; therefore I decided to never use quotation marks, thus saving myself from a fiery technical faux-pas. You’re an amazing woman, Margie.


  7. Marcie says

    Who’d have ever thought there could be so much complexity behind simple quotation marks.


There, I'm finished. Now it is your turn:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.