In my last article I showed you how to change the color of specific text within single posts and pages with a really easy addition of some extra code.
Today we’ll go over another quick fix — changing the text color in your WordPress theme — so it affects every post and page. The fun thing is that you can specify a different color for links (like I did here, did you notice? all my links are in blue so they stand out more and when you hover over them the color changes to pink.
In a future post I’ll go over a few different text effects you can do for links — like underline, or change the color of links when you hover over them, and stuff. It’s really cool. But for now let’s get the basics.
How to change the text color in your entire theme
Let’s change the text color of your whole theme, every word on every page. This might be a bit more difficult, but the good news is if you do it once you won’t have to do it again. Unless you want to, of course.
The design of your site, including the text color, is controlled in your css file, otherwise known as the stylesheet.
To find your stylesheet, click on the Design tab and then Theme Editor:
Now, locate your Stylesheet (style.css) under the Theme Files on the right:
A note about stylesheets:
WordPress is all about stylesheets, as are many newer websites.
Stylesheets have made it much easier to change design elements, such as color, and page layouts of websites.
CSS stands for Cascading Style Sheets — and basically what it does is it controls the design elements of your entire theme all from a single (occasionally multiple) file. Makes sense?
Think of it this way: HTML is the content of your website — and — CSS is the presentation of your website.
As WordPress Codex puts it: CSS "allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update."
If you want to read up on CSS in WordPress check out this article from the WP codex.
And for more about the layout and design of a WordPress blog see this helpful list of links that cover everything from basics to specific, and advanced design including information on themes, templates and customization.
Changing the text color in your WordPress theme
Each theme is different, and each stylesheet will also be different. To understand what each tag in your stylesheet does you will need a bit of patience and some experimenting. I’m going to be using the default WordPress theme Kubrick for this example and you can experiment with that theme as well, until you get a hang of it.
Now, as I explained in my previous post colors are represented by hexadecimal numbers that look like this: #FF0000 and sometimes like this: #333. They can have letters and/or numbers and can have 6 or 3 hexadecimal characters, but will always start with the # notation.
Without going through and trying to understand what every single thing in your stylesheet does (since all you want to do is simply change the color of some text), take a close look at your stylesheet and notice where these codes are listed. These are going to be the areas of your site (text, background color, borders, etc.) that are in color.
Please note: before making any changes, make sure to do a backup of your original stylesheet in case you want to go back to it. And if you haven’t already you might need to make your css file writable before editing it in WordPress.
The Kubrick theme, like many themes, makes it easy by labeling the different section of the stylesheet. So once you’re in the stylesheet you’ll notice this:
The comment area lets you know that this is the Typography and Colors area, and this is where we can experiment with some colors.
Go ahead and start by changing color: # 333; to color: # F6358A;
This quick change should have switched all of your paragraph text into a nice, pretty pink 🙂
Easy huh?
Now go experiment and see what color combination you can come up with to personalize your WordPress blog!
3 responses to “Another quick fix: changing the text color of your WordPress theme”
I LOVED this article. I appreciate that you broke in down so that people less experienced in this area, like me, would be able to understand it. I followed it perfectly and look forward to trying it out on my WP theme.
Thanks for sharing this! Very helpful info.
Great article about changing the text color of your WordPress theme. This will help many web design newbies understand how to change their own text color on their wordpress websites with ease. Remember to back up your files first!