Recently I was searching for a new WordPress theme for a blog I’m starting with my brother. During my search I came across a multitude of impressive themes. Unfortunately, I couldn’t find the perfect combination of layout and color that I wanted. So, since changing the color of theme is easier than changing the layout (at least from my perspective), I opted to leverage my novice Photoshop skills and change the color on a theme that was almost exactly what I wanted.

I settled on Cordobo Green Park designed by Cordobo for the new blog (brothersinblog.com target launch 4/2/07). The theme has a great 3 column layout and was highly rated and praised by its installed base. The only thing I didn’t like was the green color; however, knowing just enough about WordPress themes to successfully make minor modifications, I decide to see if I could change the color to some shade of blue.

I downloaded the theme and took a closer look at the supplied images. I opened one in Photoshop and began adjusting the hue. Bingo! I could get the blue color I wanted with a little modification. Here’s how I did it.

1. Open the image in Photoshop (start Photoshop then select File -> Open browse to the images folder, select image and click the Open button)
2. Once the image is open, select from the menu bar Image -> Adjustments -> Hue/Saturation. The Hue/Saturation adjustment dialog box appears.

3. Make sure “Preview” is selected so you can see the color changes as you make them.
4. Move the Hue slider left or right to find the color hue you want. You can also play with the color saturation and lightness by moving their respective sliders. At this point in the process the key is experimentation. Play with the sliders till you see what you want in your image.
5. Once you have the color you want, make note of the numbers for hue, saturation, and lightness. In my case I only moved the hue slider to 128 so I wrote that down.
6. Click OK in the Hue/Saturation dialog box and save your changes.

Now apply this color change to every other image for the theme in the following manner:

1. Open the next image in Photoshop.
2. Select Image -> Adjustments -> Hue/Saturation from the menu bar.
3. This time, instead of experimenting with the slider, simply enter the number for hue, saturation, and lightness that you wrote down from your first image adjustment. Again, in my case I only had to enter 128 for hue.
4. Click OK and save your changes. Repeat for each image in the theme.

Study the Cordobo theme and notice how the green differs. Some images are lighter or darker than others. Fortunately you don’t have to concern yourself with these subtle changes provided you wrote down the number used to change the hue, saturation, or lightness. Using the same number over and over for each image helps maintain the same color consistency seen in the original Cordobo theme.

Aside from updating the images, I also needed to change the color settings in the Cordobo stylesheet. I’m embarassed to admit it, but my approach to updating the stylesheet color settings was very manual and tedious.

I searched through the stylesheet and made note of every color setting I could find. Then, I created a blank canvas in Photoshop and filled it with that color. If the color was green, I applied the Image -> Adjustments -> Hue/Saturation setting I used to change the image color to this color filled canvas. The color changed to some form of blue and then I made note of that color number. Later I did a massive search and replace across the stylesheet to change original color settings to the new ones. Ugh! That was a time consuming and error prone process to say the least. Fortunately, you can avoid the manual headache I went through because another excellent tutorial on this topic does exist.

Nikolaj Slon posted an excellent Cordobo color changing tutorial over at his blog (SNNicky.com). Unfortunately, I didn’t find that post till “after” I had finished my color change. Nikolaj’s tutorial includes instructions for Gimp users and includes an excellent automated way to update the stylesheet. If you’re dabbling with theme color changing, I strongly encourage you to check out Nikolaj’s tutorial.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips