When I started this blog, I was working with the idea that my readers would know little or nothing about web development. This blog is for authors, not web developers.
But having a developer husband, I have picked up bits and pieces of understanding over the years. I am by no means a professional. Heck, I wouldn't even call myself a hobbyist. I prefer content to code.
That being said, as I set up my author site I am finding I want to customize it more than many WordPress themes allow. It started when I chose a free theme (Authorize) that did not have an option for choosing custom accent colors. I liked the bones of the theme, but I wanted to pick colors that matched my own branding and writing style.
I noticed the "Additional CSS" tab in the customizer and I thought, Okay, sure, let's do this.
And it was surprisingly easy! It's relatively easy to learn the basics of CSS, and I'm going to walk you through that process.
Familiarize Yourself With the Language
Before you dive into customizing your website, it's a good idea to wrap your head around the basics. For that, I recommend Code Academy. It has several tutorials that allow you to practice real-life situations as you learn to code. While HTML can be helpful, you want to focus on the CSS lessons. Don't worry that it says it takes 11 hours- if you just go through the free content, you can gain a basic understanding in about 5 hours. So give yourself about an hour each night for a week to complete the course.
I also highly recommend the site W3 Schools. This has more info than the Code Academy course, and it is also free. However, it doesn't walk you through actual projects. I tend to use the W3 Schools site as a reference when I want to do something and don't know what it's called or when I come across an unfamiliar term in the CSS. In other words, any time I edit my CSS. I should note that my husband, the web developer prefers MDN Web Docs as a reference.
I want to be clear here- you will not be a CSS expert by skimming through these courses. But you should pick up enough of an understanding to perform basic manipulations on your site.
Familiarize Yourself With Your Website
My husband showed me a neat little trick for manipulating websites. On any website, you can right-click on the part you want to change and go down to the last menu option "Inspect." Alternatively, you can hit ctrl+shift+C to open the inspector on an element you have highlighted. (This is for Chrome. In Firefox, you will select "Tools -> Web Developer -> Inspector" or use the shortcut ctrl+shift+I).
When you do this, the inspector will open on the bottom half of your screen. This inspector contains a bunch of code that (if you're like me) you won't be able to understand. That's not a problem. As you move your cursor through the code on the left, different parts of your website will receive highlighting and the style for that part of your website will pop up on the right. All you have to do to change an item is highlight it and turn your attention to the right side where your CSS is located.
Now, this next part is super cool. You can add or change the CSS right there in the inspector to preview changes. You can play around without fear of breaking your site, because these changes are not in your actual code. As soon as you refresh your page, it will revert to what it was before.
Make Your Changes Permanent
Once you've made changes that you like, you can simply copy the section you changed and paste it in the Additional CSS tab of your customizer. Click "Publish" and your website should rock your new look.
It's a good idea to create a child theme before you make extensive changes to a theme. And if you want to change the functionality of a theme as opposed to its appearance, the best way to do so is to work with a child theme. However, you can easily do this with any number of plugins.
Confused as all heck? Check out this short video I made showing how I manipulate the CSS for my author site.
If you are anything like me, you may resist learning CSS. However, since authors tend to be precise with their aesthetic desires, learning the basics will open up a world of options for you. It will let you save money during your early days and try out changes as your website matures to help you learn exactly what works for you and your readers.