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;
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!
The Exclamation Mark you made was fabulous! Thank you for the 1,2,3 step! And, thanks for sharing the code!
LikeLike
You are welcome. I’m not sure if it will work with all themes, but is worth a try.
LikeLike
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.
LikeLike
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.
LikeLike
I’m with Susan. My head is already hurting. I’ll have to look into this when I have extra Advil.
LikeLike
Sorry for causing headaches. Just put the Advil on my tab.
LikeLike
Thank you for sharing the secret code; now I don’t need to hunt for my secret decoder ring. 🙂
LikeLike
There are some other things I would like to figure out, so maybe I could borrow your secret decoder ring for a while.
LikeLike
I can’t believe how I am under using my quotaion marks and other punctuations. I am just plain lazy.
LikeLike
Well! Yes, you are!
LikeLike
You have clearly “crossed over.” You certainly know your “tech stuff.” You’re going to be my “go to” person from now on… : )
LikeLike
I really know nothing compared to people who know something, but at least I know what I don’t know. Sometimes.
LikeLike
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.
LikeLike
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.
LikeLike
Jeez, Margie, your techno-computerese-knowing-stuff is almost scary. I’m impressed. Clueless, but impressed.
LikeLike
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.”
LikeLike
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.
LikeLike
You are very kind, but this type of knowledge is really an indication that I need to get out more…
LikeLike
Who’d have ever thought there could be so much complexity behind simple quotation marks.
LikeLike
Computers and the internet don’t really make life any simpler!
LikeLike