You may have noticed that while the theme has an inbuilt CAPTCHA feature, there are no options to customize it beyond turning it on or off. So let’s look at how we can change the colors used for the CAPTCHA text and the background color behind that text.

You will need a text editor or “code editor” to follow along with this tutorial because we will need to modify one of the PHP files that is part of the theme. You must not use a word processor like Microsoft Word because apps like these are not designed for editing code. You need a plain text editor, such as Windows Notepad for example. On the Mac you can use TextEdit, and remember to set it to use Plain Text (not Rich Text).

The file we are going to edit is named captcha.php and it is in the framework/utilities/captcha/ folder.

Firstly, make a backup of the original file so that when if you make a mess of this you can quickly and easily put things back the way they were to start with. So duplicate the captcha.php file and rename it captcha-original.php.

Now open the captcha.php file and scroll down to line 111 where you will see the following couple of lines of code:

/** Background color in RGB-array */
public $backgroundColor = array(255, 255, 255);

You can see that the background color is set to be “255,255,255″, which is the RGB for white. If you change this to “0,0,0″ then you have jumped to the other extreme, i.e. black. In most cases it may be that white is perfectly suitable as a background color for your CAPTCHA text, but if your page background color is, for example, a light grey color you might like to change the background of the CAPTCHA text to match, like this:

/** Background color in RGB-array */
public $backgroundColor = array(249, 249, 249);

You can remove any border that is around the captcha image by adding this style to your Custom CSS box in Appearance > Design Settings:

.field_type_captcha img { border: none !important; }

So that’s the background color sorted. A couple of lines further down you will see a chunk of code that looks like this:

/** Foreground colors in RGB-array */
public $colors = array(
  array(56,54,53),		// mute brown
  array(231,103,74),	// orange
  array(90,185,207),	// blue
  array(155,77,125)		// purple
);

What’s happening here is that four colors have been defined for the foreground color, i.e. the actual CAPTCHA text. Each time the contact form is loaded the theme will select one of these four colors at random.

There are three ways that you can customise this:

1. Change one or more of the colors that are already defined.
2. Change the code so that the same color is used every time the contact form is loaded.
3. Add to the colors so that each time the contact form is loaded it picks from a list of more colors.

Option (1) is achieved just the same as we changed the background color, i.e. simply modify the RGB values to those which produce the color(s) of your choice. You can change the comment after the // to remind you what color the numbers represent.

Option (2) would involve you cutting down the code to look like this:

/** Foreground color in RGB-array */
public $colors = array(
  array(155,77,125)	// purple
);

Naturally, you would adjust the RGB value to that of your choice.

Option (3) is just as easy, simply copy the top color definition as many times as the number of extra colors that you want and paste it directly above the top one, like this:

/** Foreground colors in RGB-array */
public $colors = array(
  array(27,78,181),     // blue
  array(22,163,35),     // green
  array(214,36,7),      // red
  array(58,64,70),      // dark blue gray
  array(56,163,252),    // bright blue
  array(223,69,96)      // magenta/pink
);

And of course to finish you would adjust the RGB values of all the color definitions to those of your choice, and update the comments.

After saving your customised captcha.php file, the final step is to upload it to your web server into the /wp-content/themes/parallellus-salutation/framework/utilities/captcha/ folder, overwriting the file of the same name that is already in there.  

---

Resources

• Cool PHP Captcha: http://code.google.com/p/cool-php-captcha/
• All about web colors: http://en.wikipedia.org/wiki/Web_colors
• Shortcodes: http://para.llel.us/themes/salutation-wp/shortcodes/
• Support forum: http://para.llel.us/support/groups/salutation-wordpress/forum/