Last week, we showed you how to create a child theme in WordPress – the first step in experimenting with your theme and becoming a WordPress MacGyver. This week and next, we’ll look at the basics of tweaking your WordPress theme’s text. After reading these posts, you’ll be able to make basic changes to how your website displays text – so that your site will stand apart.
But before you begin, a word of warning: it’s easy to go too far when making changes to your website text. Think of designing your website the way you would decorate a house. Striking colors and quirky fonts can quickly become gaudy in the wrong setting. By applying a light touch, you can make your site look unique, sophisticated, and tasteful.
Above all: back up your style sheet before making any changes, and experiment until you find the look that you want.
Types of Text in WordPress
When you’re looking through your child theme’s style.css, you might see something like this:
font-family: Arial, Helvetica, sans-serif;
This is a set of instructions that tells your computer how to display the website’s body text. As you look through the style.css, you’ll see other classes of text. Here are some other common classes:
Headers. These appear at the tops of your WordPress pages and posts, as well as within your posts (if you use headers). They appear in CSS as h1, h2, h3, h4, h5, and h6.
Hyperlinks. These can appear throughout the body of your website, as well as in your WordPress widgets. The four main classes of hyperlinks are:
- a (the basic hyperlink)
- a:hover (what it looks like when your mouse hovers over it)
- a:visited (the hyperlink to a page that you’ve already visited)
- a:active (the colour of the hyperlink when it is selected)
There are many other classes in your CSS, including instructions for general layout, menus, comments, and other elements on your website. As you learn more about tweaking your WordPress theme’s text with CSS, you will feel more comfortable experimenting with other elements on your website. (Of course, before making any changes, you should be sure to back up your style sheet!)
Colours in CSS: Understanding Hex
CSS is fairly friendly when it comes to colours. It recognizes 147 distinct color names, which you can see on this website. You can think of this as a basic color palette – like the paint swatches at Home Depot.
However, if you want your text to be just the right colour, the best way to represent colours in CSS is to use hexadecimal. This six-digit code controls the proportions of red, green, and blue – the three essential web colours. (If you look very closely at your computer screen, you will notice that it consists of red, green, and blue dots.)
The lowest value in a hex byte is 00, while the highest value is FF. This allows for 256 distinct shades each of red, green, and blue – more than 16 million colours! When you join these together, they form six digits, and look like this:
That hex code, by the way, creates a lovely shade of crimson. The lowest hex code (#000000) is black, because it means no colour; while the highest hex code (#FFFFFF) is white, because all the colours are shining their brightest.
Luckily, while it helps to understand hex, you don’t have to master it in order to tweak your WordPress theme’s text colors. If you use Photoshop, you can select the color of your choice using the color picker, then copy the hex code (circled in the picture to the right). There are also many websites that allow you to experiment with different hex colors, like www.colorpicker.com.
However, one of my favourite online tools is Colours on the Web. I’ll admit it – I’m not especially artistic. Luckily, with tools like this, you don’t have to be. This color wizard allows you to submit a basic color, and see other colors that go well with it. When you’re tweaking your WordPress theme’s text, this is a fun tool that will help your site colours pop!
Next week: How to use different fonts, text sizes, and decoration to create that unique look!
(First image credit: Jeff Dahl, Wikimedia Commons)