You may have noticed that while the theme has an inbuilt CAPTCHA feature, there are no options to customise it beyond turning it on or off. So let’s look at how we can change the colours used for the CAPTCHA text and the background colour behind that 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 colour 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 colour for your CAPTCHA text, but if your page background colour is, for example, a light grey colour you might like to change the background of the CAPTCHA text to match, like this:
/** Background color in RGB-array */ public $backgroundColor = array(241, 242, 243);
So that’s the background colour 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(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 );
What’s happening here is that three 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 three colors at random. Three other colors (red, green and blue) have been commented out.
There are three ways that you can customise this:
- Change one or more of the colors that are already defined.
- Change the code so that the same color is used every time the contact form is loaded.
- 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(223,69,96) // magenta/pink );
Naturally, you would adjust the RGB value to that of your choice.
Option (3) is just as easy, simply uncomment the top three color definitions to get a list of six colors, 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/mingle-salutation/framework/utilities/captcha/ folder, overwriting the file of the same name that is already in there.
- 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/mingle-wp/shortcodes/
- Support forum: http://para.llel.us/support/groups/mingle-wordpress/forum/