How to Change Color Styles on Your WordPress Theme

If you’ve just downloaded a HTML template or a WordPress theme, it’s most likely that changing the color on some of its elements or changing the entire color scheme is on your to-do list. It looks like a simple enough task, but it can bring disastrous consequences for the success of a website when done by a complete novice with very little aesthetic sense. Here are a few pointers and some great online tools that make this all-important piece of customization work much easier and foolproof.

Picking Up the Right Colors

One of the crucial decisions in web design is the choice of colors. Is it completely subjective or are there any ground rules that should guide our choices? My answer to this is: both viewpoints are valid and the truth lies in the middle. Which color or color combinations I like has some subjectivity to it. After all, my tastes are mine and everyone has their own. There’s, however, such a thing as color theory: the nature of color, why some colors work together and others clash, the psychology of color, etc.

This post is going to be practical rather than theoretical, pointing out as much info on color theory as it’s needed to move the first steps in our theme customization tasks.

What Is Color

Color is light: objects absorb certain wavelengths and reflect others back to the viewer. Our perception of these wavelengths is what we call color.

The Color Wheel

Color wheel
Color wheel by Karen Arnold

A color wheel is a visual arrangement of colors on the basis of their chromatic relationship. Begin a color wheel by placing primary hues at the same distance from one another, then build a bridge between primary colors using secondary and tertiary colors.

Primary Colors: Those colors that cannot be created by mixing others.

Primary Colors: blue, red, yellow
Primary Colors: blue, red, yellow

Secondary Colors: Colors created by mixing two primaries.

Secondary Colors
Secondary Colors by Petr Kratochvil
Complementary colors on a color wheel
Complementary colors on a color wheel

Complementary Colors: Colors placed opposite each other on a color wheel.

Analogous colors on a color wheel
Analogous colors on a color wheel

Analogous Colors: Colors located close together on a color wheel.

Creating a Color Palette

Achieving a harmonious and balanced combination of colors is a matter of practice and talent. In the business of choosing a palette for a web design project, the starting colors can be picked from a variety of sources. Here are a few suggestions.

  • Business Websites

    If you’re modifying a template or theme for your online business, the first candidates for consideration are those colors that define your business’ brand: the logo, the stationery, the merchandise, etc.


    An additional place to start is the nature of your business: is it a kids’ toys website, a creative agency, a tourism website, a government-related website? If you’re interested in going a bit deeper on this topic, I recommend this excellent article by Gregory Ciotti, entitled The Psychology of Color in Marketing and Branding.

  • Personal Blogs

    If your theme is for a personal blog, the choice of colors can allow for more subjectivity and free rein. However, take into consideration the main subject of your blog, the audience it addresses, and the core message that it sets out to convey.


    One tip that can get you started on the search for the right colors is this. Make a list of keywords about your blog’s core subject. Then google up images related to those keywords. Select the images that you find most appealing and relevant, and open them in your photo editor of choice. Now the fun part begins. Color picker in hand, get crazy extracting colors from the photos and experimenting with the various combinations that can be created from them.

How To Add Color Styles With CSS

Adding color styles to a web page is done via Cascading Style Sheet (CSS). Best practice recommends putting all styling information in its own file with the .css extension. WordPress has a basic required file called style.css where CSS rules can be found.

CSS color rules can be added using hexadecimal notation or RGB values. I’m not going to explain how to calculate either of them here because you can use these notations even without knowing absolutely nothing about them (or almost nothing, anyway). If you’re interested, you’re encouraged to visit this W3Schools article on this topic.

As for the practical task of choosing the right hexadecimal or RGB value, it’s sufficient to use a color picker from a graphic editor or some great Firefox add-ons like Color picker or ColorZilla, to get what you need right away.

There’s also a third method: RGBA. It’s the same as RGB, but with alpha transparency. I’ll be giving you an example of how to use RGBA in your stylesheet.

Let’s Get Coding

Here’s a practical example of modifying the color scheme of an existing WordPress theme. My choice of theme is the very same used for wpthememakeover, the Tonal Theme, developed by the great guys at Automattic, freely downloadable from the wordpress.org website.

I find this theme ideal for a small blog. It’s elegant, simple, and very modern with its mobile-first sliding sidebar placed at the top. However, let’s say that the black and white color scheme doesn’t go with the topic or the overall tone of the blog. Let’s see how I can go about changing it.

Have a color palette ready

One of the latest and enduring web design trends at the time of writing is flat design. It uses bold, solid slabs of color and lots of white space. For my color palette, I use a ready made palette from Behance by Sampath Chadnana, a graphic designer from Sri Lanka.

Flat color palette
Flat color palette

Let’s say I want to change all the dark bits in the theme into something more vibrant, a great salmon color in Sampath’s palette. These are the top sidebar, the big site title and the buttons.

Create a Tonal Child Theme

After installing a copy of the Tonal theme locally on my development server, the next step is to create a child theme. In fact, to make future-proof modifications to a theme, it’s recommended that you do so on a child theme rather than on the theme itself. If you need a refresher on WordPress child themes, here’s my previous post on this topic: How to Create a WordPress Child Theme.

I created my child theme inside a folder called tonal-child. The only required file is style.css. Here’s what I put inside style.css:

Theme URI:    http://localhost/tonal-child/
 Description:  Tonal Child Theme
 Author:       Maria Antonietta Perna
 Author URI:   http://wpthememakeover.com
 Template:     tonal
 Version:      1.0.0
 Tags:          One Column, Responsive Layout, Custom Background, Custom Header, Custom Menu, Featured Images, Flexible Header, Post Formats, RTL Language Support, Sticky Post, Translation Ready
 Text Domain:  tonal-child
*/

@import url("../tonal/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

All done! Now it’s just a matter of clicking Appearance -> Themes on the WordPress admin panel to activate the child theme. At the moment Tonal Child is just identical to the parent theme: all the parent’s styles have been imported into the child and are ready to use until any of them is overwritten in the child’s stylesheet.

One preliminary thing to do is to check if the theme allows for any out-of-the-box customization options. Going to Appearance -> Customize lands us on the Theme Customizer page, an awesome WordPress tool that allows us to make modifications from the admin panel and see them live as we make them.

The Tonal theme customizer color options are not plenty: I can only change the header text color and the background color.

WordPress customizer color options
WordPress customizer color options

Therefore, if I want to change other elements I have two options: tweaking the CSS in the child theme or adding other options to the customizer. I show the first option here and leave the second for a more advanced future tutorial.

Firebug and CSS

The next step is to locate the elements I’d like to change using Firebug for Firefox (if you’d like to know more, visit How to Use Firebug to Change Your Theme’s Look and Feel) and open the Tonal Child theme’s style.css file in my code editor.

The first thing I’d like to change is the button that toggles the sidebar into view. At the moment it has a dark gray background and the icon is of a white color. Firebug shows me the elements I need to target and the styles that are applied to it by the Tonal CSS:

.button-block, .icon-block {
    background: none repeat scroll 0 0 rgba(1, 1, 1, 0.8);
    color: rgba(255, 255, 255, 0.5);
}

The style rule tells me that there’s no background image (background:none) and that the background color is an RGBA value: rgba(1, 1, 1, 0.8). This is black with 80% transparency. The color value for the icon is also applied using RGBA: rgba(255, 255, 255, 0.5)

It’s a white color with 50% transparency. If the Tonal theme’s designer had wanted to use color with full opacity rather than a transparent color, here’s what we would have found.

Using RGBA:

.button-block, .icon-block {
    background: rgba(1, 1, 1, 1);
    color: rgba(255, 255, 255, 1);
}

By simply setting an alpha transparency value of 1, it’s possible to eliminate transparency from the color.

Using RGB:

.button-block, .icon-block {
    background: rgb(1, 1, 1);
    color: rgb(255, 255, 255);
}

Using hexadecimal notation:

.button-block, .icon-block {
    background: #000;
    color: #fff;
}

Firebug also reveals this: one thing the child has inherited from the Tonal parent is that the style rules for the sidebar toggler are not in the stylesheet, but in the HTML page itself on line 4. This means that the rules for this element have been added dynamically using PHP and we need a little CSS trick to override an inline style from an external CSS file, as I’ll show you below.

Let’s modify this element’s color into the nice salmon that I picked before. Here’s the code to add to style.css in the Tonal Child theme:

.button-block, .icon-block {
    background: #e84c3d !important;
}

Adding !important before the ; enforces this CSS style and succeeds to overwrite the inline style from the parent theme. Use this sparingly, however, and only when it’s absolutely necessary!

Now we can apply the same technique to change the other elements’colors. Here’s what style.css looks like in the Tonal Child theme:

/* link buttons for sidebar and comments  */
.button-block, .icon-block {
    background: #e84c3d !important;
}

/* site title  */
.site-title a {
    color: #e84c3d !important;
}

/* site description  */
.site-description {
    color: #ed766b;
}

/* post title  */
.entry-title a {
	color: #c7422f;
}

/* post title on hover  */
.entry-title a:hover {
	color: #8c1c11;
}

/* submit button on forms  */
input[type="submit"] {
    background: #ed766b !important;
    border: 1px solid #f5aea7 !important;
}

/* top sidebar background  */
#menu-block {
    background: #e84c3d !important;
}

This is what the Tonal Child page looks like now on my local server:

Tonal Child theme front page with salmon color added
Tonal Child theme front page with salmon color added

Tonal Child theme sidebar with salmon background
Tonal Child theme sidebar with salmon background

Free Online Tools For The Job

Luckily for us, there’s an enormous number of free online tools to help us as we work with colors in web design. This is not a round-up of the greatest color generators on the web, just those that I use most often.

Color Palette Generators

Whipping up a nice color palette is a matter of experience, but using one of these tools makes it fun and easier.

Adobe Kuler

Adobe Kuler interface
Adobe Kuler interface

Adobe Kuler is a sophisticated, free online app that easily allows us to choose analogous, triadic, monochromatic, complementary, and also custom color palettes from the color wheel. It also lets you upload a photo and extracts a color palette from it. Finally, there are lots and lots of ready-made color combinations that other users have uploaded for sharing. If you see anything that’s appropriate to your needs, grab it!

Color Scheme Designer

Color Scheme Designer interface
Color Scheme Designer interface

Color Scheme Designer is an ideal free online app for beginners. It lets you create different types of palettes from a color wheel, like Kuler. Also, it lets you preview the colors as people affected by color blindness would perceive them, and you can export your palette in various formats. Finally, you can preview the color combination of your choice both on a dark and on a light page example.

Color Shades Generators

A color palette for a web project doesn’t need to have many colors. The fewer colors the smaller the chance of getting the wrong combinations. However, working with only 2 to 4 colors can feel restrictive. This is where using various shades of the same colors saves the day. The tools below are really helpful when it comes to picking up the various shades of a color and translating them into hexadecimal or RGB values ready to use in your CSS.

HTML Color Picker

HTML Color Picker interface
HTML Color Picker interface

The HTML color picker on the W3Schools website, is a simple but handy tool. It easily lets you pick a color from a color picker and instantly displays a number of shades and their hexadecimal values on the page.

0To255.com

0To255 interface
0To255 interface

0To255.com is a freely available web app that I couldn’t live without. Just input a color value and the app displays a complete list of shades based on that color, from lighter to the darker, each with its hexadecimal notation in plain view. The initial color value is highlighted and a mouse click is enough to copy the hexadecimal value on your computer’s clipboard ready to be pasted into your CSS document. Very cool.

Hex to RGB Converter

Finally, here’s a handy little tool that will make your life as a theme color ninja so much greater, the Hex To RGB Color Converter. Just enter your hexadecimal color value in the text-box and click the Convert to RGB button. Instantly, the RGB value is displayed in the appropriate text-boxes.

To Sum Up

Customizing a theme almost always involves tweaking or overwriting its original color scheme. Choosing the right color scheme for a theme doesn’t come easy to some of us, but practice and some free awesome online apps can really help. This post’s practical goals were those of giving you a few tips on how to go about choosing and applying colors for a web project as well as pointing you to the tools that I use most often to get the job done.

What about you? How do you go about choosing a color scheme for your theme, and what are your favorite tools?

Featured image: Abstract Colorful Background Photo by khunaspix.

Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s