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:
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:
Step two: Learn secrets of the magic CSS box
Here is what greets you when you open the CSS editor:
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.
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:
*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):
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:
And, in action (on my Blogs I Love page):
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.
