How do I quickly recolour the default theme

Creating a new VWP theme from scratch is fiendishly difficult. Fortunately, for most cases it's enough to just change the colour scheme to fit in with the rest of your website.

Checking out the source

Start off by downloading the source files.

Follow the instructions on this page to retrieve a copy of the source for the Woodstock project. Within this is the themes folder - that's where the default theme resides.

The folder contains a file, theme-name.properties.sample, which can be copied to a new name, say "green.properties". Edit it and change the theme.name setting to "green".

Finally, use ant to create the starting files for your new theme:

ant -Dtheme.name=green cloneTheme buildTheme buildJsTheme

Recolouring the theme

This requires changes to two groups of theme files - the CSS stylesheets, and the graphics files. Problem is, there's a huge quantity of the latter - about 400 images. Loading them one by one into a graphics program to recolour them sounds like a nightmare, especially if you've got to do it all over again every time the woodstock library changes.

ImageMagick to the rescue

ImageMagick is an open source set of command-line graphics manipulation tools. Most Linux distributions include it on their CDs, and the website contains a version for Windows. These tools can do some great things but in this case, we're only interested in altering an image's hue. Basically this means that you set its colour without affecting its saturation. So, a bright blue might become bright red, a grey-blue image would become grey-red, and pure grey would remain pure grey.

There are two ImageMagick commands you'll use. One is convert, which you'll use to play around until you find the exact shade you want. Then, you'll use the mogrify commands to change the files in the theme. The difference between them is that the convert commands reads from one image file and writes to an output file, whereas the mogrify command overwrites the existing file.

To find the hue that you want, first choose an image that represents the overall teal shade of the theme, open a shell / command prompt and go to that folder.

 cd src/green/images/version 

The command to use is convert inputfile -modulate 100,100,80 outputfile . For example,

 convert version_brand.jpg -modulate 100,100,80 output.jpg 

Note the number 80 - that is the percentage to alter the hue. The other two represent brightness and contrast and should be left at 100. The value 80 produces a brighter green co,lour. 120 produces purple and 180 is a dull red.

Once you have found the value you want, you can use the mogrify command to apply the same modification to the files you choose. Keep in mind however that this change is cumulative - if you apply it twice to the same file it will shift the hue further each time.

A nice trick would be to use an ANT task to apply the command to all images, but there are a number of images that shouldn't have their colours altered, like the red "error" icon, blue "information" icon etc.

One solution is to divide the images into two source trees according to whether you're going to change them or not, then use an ANT task to run the mogrify command on all the images in one tree.

Sample script

The (Linux) bash script below will apply the recolouring process to all images in the images directory, then copies all the images in the images-nc directory back to the images directory, overwriting them. The images-nc directory is a directory in which you can copy any images whose colour should not change, like the alerts and alarms.

#!/bin/bash

cd src/green/images

for A in `find -type f`
do
    echo mogrifying $A
    mogrify -modulate 100,100,80 $A 
done

cd ../images-nc
cp -av * ../images