How I customized my block quote style in WordPress

Without knowing CSS!

My blog uses the WordPress Argent theme.

(The fact I’m using a free WordPress theme out of the box is fine I guess. But honest, it’s just until I teach myself PHP and can start making my own themes, aka step 118 of 32975 on the road to my front end web development career.)

Here’s what the default block quote style looks in Argent:


block quote before
Puts the “block” in “blockquote” doesn’t it?

It isn’t horrible it’s just HUGE. I wanted the text smaller, and I wanted it included in a shaded box with a left outline. THAT’S IT.

After a few clickety clicks on the googlety goo I discovered that I could override Argent’s default style with CSS of my own.

Step one: Open your CSS customizer box

Here I reached my first problem: I didn’t have a CSS customizer box.

Turns out, you pay for the privilege of customizing CSS in WordPress to the tune of $8/month (for the Business plan, or $25/month for Premium). I’d already paid for the personal plan ($4/month). So, $48 later I had the magic box:


CSS Customizer in WordPress


Step two: Learn secrets of the magic CSS box

Here is what greets you when you open the CSS editor:


Customize 3


The link takes you to a basic basic basic introduction to CSS, which is most useful for pointing you in the direction of other resources. Here are the top five I found most useful:

1. Intro to CSS

In this article by WordPress learn things like: what CSS stands for.

2. CSS customization forum

I don’t understand most people’s questions on this forum, let alone the answers, so wade carefully into this one. Start by searching for your theme and see where that gets you.

3. Finding CSS Selector Classes

CSS selector classes are like tags that point the computer to what you want to change on your page. For block quotes, the selector class is “block quote” — they tend to be intuitive like that. In this article, it walks you through using tools on your web browser to figure out which selector classes go with which parts of your site.

4. How to tinker with your site

The actual title of this article is “Previewing Changes with the Matched Rule Pane” but wow that sounds boring as hell. This is a good next step after learning about selector classes. You learn how to preview CSS changes, see which ones work and which don’t, etc.

5. The WordPress Happiness Engineers

I’ll be honest, I read all of the above articles, searched the forum, and used my Chrome dev tools to find selector classes. But when it came down to making actually effective CSS edits (like changing my block quote style!) I pretty much let WordPress’ Happiness Engineers do it for me.

Step three: Ask the Happiness Engineers what to do

I don’t know how I first found the “Contact Us” page. I know that to get there again I had to do a Google Search for “contact WordPress Happiness Engineers.” However you get there, find this screen:


Wordpress Contact Us page
Help is near when you see this screen.

 

*UPDATE: A Happiness Engineer pointed out very helpfully that to get to the Contact Us page, you just need to click the “?” button that appears at the bottom right hand corner of the WP site. Plus, all the support pages have a Contact Us button at the bottom.*

Here’s what my first exchange with a Happiness Engineer looked like (excerpts from my original message in block quotes):


Happiness Engineer Help
Happiness Engineers live up to their somewhat-cringey title.

4. Copy and paste

Et voilà, I had my new block quotes. I futzed with it a little after the Happiness Engineer sent me the outline. Here’s what my CSS code looks like now:


block quote CSS.png


 

And, in action (on my Blogs I Love page):


new block quote.png


Much better right?

I’m looking forward to the day when I know how to do a lot of this on my own, but until then, I will shamelessly beg, borrow and steal all the help I can get.