Part One: The Freedom of Restraint

Hi!

While normally, my devotion here is presenting my comedy-horror funny-sad podcast, I’m taking a break right now to bring you informative tech journalism. For the next few days, I’m going to tell you about customizing your premium WordPress.com site using custom CSS.

If you learned CSS from an online course, and there’s no shame in that, you independent learner you, you likely learned it in relation to HTML, moving freely between two files, organizing your ids and classes and divs in HTML and selecting them as you needed them in CSS.

However, with WordPress.com’s themes, you have limited access to the HTML, which means you can’t alter each element exactly in the ways that might make sense to you. You are forced to adjust to the structure and vocabulary of the theme creator, and much of this code is inaccessible to the casual user. Considering you know a thing or two about CSS, it seems a little frustrating to be stymied by these closed doors. Why can’t you see what’s there in the HTML? Why can’t you alter it? Why isn’t it consistent?

I understand. I used to be like you. Just a few days ago, the way I was altering my CSS was copying the whole style sheet of the page, thousands of lines of code, and painstakingly altering the parts I wanted. It was…a partial solution. It made the page look how I wanted, but it was difficult to fix on the fly. It was poorly organized and ugly and as someone who studied as a poet, I want my language to be concise, even my unseen computer language.

The good news is: the selectors aren’t hard to find. Modern browsers have developer tools that allow you to see the labels on specific elements, and intuitively labeled. If you left-click an element and select “inspect element…”

…you’ll find a new window at the bottom the browser that looks kind of like this:

That block of text looks horrible and ugly and something only computers want to read. That bit on the right though:

That’s CSS! I’d recognize it anywhere! It looks so simple and clean. Can I just put those selectors in and change the values and fix everything?

As it happens, no. At least not in most cases. But what I wanted you to look at is higher on the page when you hover over the big ugly block of text.

Do you see that pop-up box there? It has the img element and a whole bunch of different classes, color coded for your convenience. I’m using Firefox, but Chrome and other browsers have similar interfaces.

Now, we can definitely change some properties of that image by entering that whole thing, img.alignone.size-full.wp-image-643.aligncenter, and that would take care of that specific image. As you learned in your online class, you can set properties for all your images with the selector ‘img’ or for use any number of those classes to choose images of a certain type.

Essentially, this hovering and interpreting the information displayed is the most fundamental step to using CSS with WordPress.com. No matter what else you’ve learned about CSS and other coding, if you haven’t figured out how to get this information from your website, you’re going to be more frustrated than you need to be, when really, more than half the work has already been done for you! Relax! All you have to do is customize the elements to your liking, which we’ll talk about next time.

❤

LL