Tweaking some colors

The Zen subtheme CTI_Flex comes with four color presets, called black, blue, red, and teal.

I like this theme, but one of our clients wanted a different color scheme to match the colors of their new building (green and orange). I was able to create a new "colorway" for this theme with just a little tweaking of images and templates. You can see this green/orange colorway in action at: http://midtownanimalclinic.com

In this theme, there is also a color picker that lets you choose your own colors. However, colors chosen this way come out as "flat" areas of color; they don't have the rounded, slightly 3D appearance of the preset color schemes. That's because those presets use images for certain areas, so that there are gradients in the header, navigation, and right-sidebar blocks (for each of which a background image is used), color-coordinated buttons, et cetera.

I chose instead to create a new color version with images, based on one of the existing presets. Briefly, the process involved:

1. Cloning the color CSS file and the color images folder, and renaming to the new color.
2. Creating the new range of colors. (I used Photoshop for this.)
3. Creating new gradient images for the new colorway. These were saved to the new color folder.
4. Replacing colors and URLs in the new CSS file to suit the new colorway.
5. Editing the two template files, template.php and theme-settings.php. (This involved a very simple bit of PHP.)
6. Uploading everything into the cti_flex folder on the actual website.

I posted a detailed account of what I did on Drupal.org, as part of my contribution to the Drupal open-source community: you can see all the details here.