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.

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;
background-repeat:no-repeat;
padding:.7em 2.2em .2em 2em;
color:#121212;
}

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

20 comments

  1. 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.

    Like

    • 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.

      Like

    • 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.

      Like

    • 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.”

      Like

  2. 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.

    Like

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s