Responsive WordPress Theme – Caliber

A theme with simple controls and limitless potential. Work fast and build an amazing website!   Find out more »

UpThemes – Beautiful WordPress Themes

Create a site your church, gallery, newspaper, blog, recipes, band and more!   See the themes »

Tutorials

Customising the CAPTCHA Colors in Mingle

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.

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 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:

  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(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.  



Resources


Parallelus

Copyright © Parallelus. All rights reserved.

Follow us: Twitter | Facebook