During the last few weeks, I’ve received lots of emails containig a recurrent question about changing the colors of the themes I created. In the beginning I thought it was fun to reply to those emails, but I soon relized that my squeduled tasks were weeping sad and lonely in their blank documents. So I decided to write a little tutorial.
Note to self: I should remember stop making crazy assumptions about how comfortable people feel when editing template files.
General remarks
As you certainly know, the colors of a website are always put together according to some well established criteria provided by the color theory. Just like clothes, some colors fit, while others get to create a disturbing mishmash.
The best practice, when setting new colors for your blog, is either creating a color scheme using a tool (blender, schemer) or chosing an existing color palette (see this beautiful list compiled by Speckyboy).
NB:Not all colors look nice on big surfaces. If you’ve chosen a palette, you should check whether the colors you set for the background look too strident; you can do this by using an image editor, like Photoshop, GIMP, or even Microsoft Paint.
Ok, from now on we’ll assume that you’ve chosen a beautiful color palette. What’s next?
Edit the stylesheet
Under the “Appearence” section of the admin area of your blog, go to “Editor” and change the hexadecimal color values. These values look like #xxxxxx (or #xxx, for shorthand notations), where “x” is a alphanumeric character (from a to f and from 0 to 9).
NB. Before changing anything, please backup the style.css file. You never know what may occur.
You need to know that stylesheets set generic color values, for the HTML tags, and specific values, for the markup elements. This means you’ll have to spot those tags and to identify the selectors.
The HTML tags
body: usually sets the background and the text colors;asets the links color;pdeals with the texts (stands for paragraph); it’s quite rare though to find any color declaration under this one;h1...h6: colors for headings;- occasionally
emandstrong, for italic and bold text;
The markup selectors
Markup selectors vary from one theme to another, so you’ll have to figure what are the ids and classes used by your theme. The most common are wrapper / container, header, post, sidebar, footer (but some theme authors may chose other selectors). Long story short, you only need to see the source of your blog (homepage, single post, other templates) and patiently write down the id and class selectors. Then you should check whether (or rather what) HTML tags have special styles according to their position in the markup (for instance #header h1 / h2 will stand for the blog title, #header h2 / h3 for the blog description and so on). Now, after having identified all these tags and selectors, you can change anything you want.
Use the Theme Teaker plugin
The Theme tweaker plugin was written by Manoj Thulasidas; basically, it enables you to visually modify the colors of your WordPress blog; technically, it creates a style and embeds it in the head of your blog.
I won’t insist in presenting it (actually the author provides a detailed description, and the plugin is very easy to use).
Please note: If you use the plugin’s default settings, i.e. don’t generate a stylesheet or a child theme, your twaks will simply disappear when the plugin is deactivated.
NB: While testing Theme Tweaker, I accidentally came across a bug, namely it won’t work for blogs that aren’t located in the root folder: if your blog’s url is example.com/blog and there’s another blog installed on example.com, the plugin will try to modify the look of the blog installed under the main domain.
There’s really no conclusion for this post. I only hope you’ll find it useful (and be creative).
Leave a Comment on “How to easily modify the colors of a WordPress theme”
Some Pings and Trackbacks Are Welcome