[SOLVED] Customizing Captcha

Hi everyone!:)

I'm new with the ChronoForms and I'll start by saying that it is a marvelous component! B)

OK, Here's my question... Is it possible to customize the Captcha image? What I mean is, since my Joomla template is in a dark color, I would like to achieve one of these two things to get a better look:
[list=1]1) Reduce the size (height) of the image box because the fonts are align at the top of the box and leave a big white space for nothing.

2) Or, somehow change the CSS of the Captcha so the background color matches the color of my template, and have the Captcha fonts in shades of white & gray.[/list:o]

Ether way, please be very specific in your explanations and provide examples because I'm not a pro in coding. :blush:

Thank you very much in advance for your precious help.

AfroSamuri.<br><br>Post edited by: AfroSamurai, at: 2008/03/21 17:01

Hi AfroSamuri,

You can change the colors and the size by hacking the chrono_verification.php file but unless you are experienced in php I wouldn't recommend it!

If you want to then experiment with these lines first

	$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$greylight = imagecolorallocate($im, 199, 199, 199);
$black = imagecolorallocate($im, 0, 0, 0);

Bob

Aaaah!:)

Thank you very much for pointing the direction! And don't worry, I will play with this in localhost mode first and then, on a test site on line before I even think of doing it on an actual website.😉
Safety first! :laugh:

Hey Bob,

would you be so kind and tell me where i can change the captcha image size.
I need to change the height.

Hi ifritz, same file as above, those lines if you are using the big characters version:

$image_size = imagettfbbox(20, 0, $font, 'X');
	$image_size = 5*(abs($image_size[2] - $image_size[0])+7);
	$im = imagecreatetruecolor($image_size, 40);

or edit the background.png file instead of you are using the small characters version!

Regards

Max

Would anyone happen to know how I could relocate where the captcha image is placed. I would really like for it to be located just above the text field associated with it. I don't really need a complete solution as much as just a point in the right direction, although if you happen to have the complete solution I won't be upset 🙂

Thanks for your time,
James

Hi James,

go to components/com_chronocontact/chronocontact.php find the showform function and before its end you can see a variable called $imgver which has the image tag and the input tag, you can change it here!

Cheers

Max

Awesome Max, thanks so much man it worked like a charm. For anyone who might want the complete fix here's what I did.

First I located this line.

$imver = '<input name="chrono_verification" style="vertical-align:top;" type="text" id="chrono_verification" value="">
              <img src="'.JURI::Base()
            .'components/com_chronocontact/chrono_verification.php?imtype='.$paramsvalues->imtype.'">';

I then took out the space tags.

And replaced them with these

<p></p>

After that I switched the order of the input and image, so this got put on top.

<img src="'.JURI::Base()
            .'components/com_chronocontact/chrono_verification.php?imtype='.$paramsvalues->imtype.'">

And this got switched to the bottom.

<input name="chrono_verification" style="vertical-align:top;" type="text" id="chrono_verification" value="">

And now it looks great and it was very simple after all. All thanks to Max. Hope this helps someone else too.

James

If you want to then experiment with these lines first

	// Create some colors
	$white = imagecolorallocate($im, 255, 255, 255);
	$grey = imagecolorallocate($im, 128, 128, 128);	
	$greylight = imagecolorallocate($im, 199, 199, 199);
	$black = imagecolorallocate($im, 0, 0, 0);
	
	imagefilledrectangle($im, 0, 0, $image_size -1, 39, $white);

I might be misunderstanding something here but if I wanted to change the background colour of the image to black, I should be able to simply change the last line to

	imagefilledrectangle($im, 0, 0, $image_size -1, 39, $white);

But I must be wrong as this doesn't appear to work.

Hi abasel,

It seems to work OK here - with $black in the last line.

Bob

Strange, i tried on two different networks in case it was cached on my squid server...... but will try again. At least I know that I am understanding it correctly. Thanks

Sorry to keep this discussion alive but I am going crazy. I got this to work previously but ever since I last posted this I have not been able to fix it.

  $white = imagecolorallocate($im, 89, 89, 89);	
	$grey = imagecolorallocate($im, 128, 128, 128);
	$greylight = imagecolorallocate($im, 199, 199, 199);
	$black = imagecolorallocate($im, 0, 0, 0);
	imagefilledrectangle($im, 0, 0, $image_size -1, 39, $white);

I even tried redefining white as the colour that I wanted but I still get a while background.

[attachment=0]Scndmp.png[/attachment]

(I am using the latest Chronoform (V4))

Hi abasel,

I just tested and changing $white to $black in the last line still works here.

	// Create some colors
	$white = imagecolorallocate($im, 255, 255, 255);
	$grey = imagecolorallocate($im, 128, 128, 128);
	$greylight = imagecolorallocate($im, 199, 199, 199);
	$black = imagecolorallocate($im, 0, 0, 0);
	imagefilledrectangle($im, 0, 0, $image_size -1, 39, $black);

I can only imagine that for some reason you aren't editing the right file, there shouldn't be any images cached anywhere as they are always different.

Bob

Hello,

first, my english is verry bad so i hope you understand what i mean and that you can help me🙂

I have the same problem as abasel, i have install Joomla again totally clean 2.5.4 and install Chronoforms 4.0 RC3.3 and only this nothing more. But i cant change the color???

I'm sure i have the right file. This is my chrono_verification file:

<?php
/**
* CHRONOFORMS version 4.0
* Copyright (c) 2006 - 2011 Chrono_Man, ChronoEngine.com. All rights reserved.
* Author: Chrono_Man (ChronoEngine.com)
* @license		GNU/GPL
* Visit http://www.ChronoEngine.com for regular updates and information.
**/
//You are not allowed to use this piece of code without the ChronoForms package, or without a license for it
//In order to use this piece of code at your own application you must have a license for it alone (ChronoCAPTCHA) OR have ChronoForms license, otherwise it only helps the function of ChronoForms ONLY
//you are not allowed to edit,copy or reditribute this piece of code under your own name/brand
define('_JEXEC', 1);
define('JPATH_BASE', realpath(dirname(__FILE__).'/../..' ));
define('DS', DIRECTORY_SEPARATOR);

require_once(JPATH_BASE .DS.'includes'.DS.'defines.php');
require_once(JPATH_BASE .DS.'includes'.DS.'framework.php');
$mainframe =& JFactory::getApplication('site');
$session =& JFactory::getSession();

$alphanum  = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789abcdefghijkmnpqrstuvwxyz";
$rand = substr(str_shuffle($alphanum), 0, 5);
$alphanum2  = "ABCDEFGHIJKLMNPQRSTUVWXYZ23456789abcdefghijkmnpqrstuvwxyz?><,.|\"'[{]}_=+*&^%$#@!~";
$rand2 = substr(str_shuffle($alphanum), 0, 7);
//$_SESSION['chrono_verification'] = md5(strtolower($rand));
$session->set("chrono_verification", md5(strtolower($rand)), md5('chrono'));
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache");
header("Content-type: image/png");

//$rand = session_name();
if(JRequest::getVar('imtype') == '1'){
	$font = dirname(__FILE__).'/default.ttf';
	$image_size = imagettfbbox(20, 0, $font, 'X');
	$image_size = 5*(abs($image_size[2] - $image_size[0])+7);
	$im = imagecreatetruecolor($image_size, 40);
	
	 // Create some colors
   $white = imagecolorallocate($im, 255, 255, 255);
   $grey = imagecolorallocate($im, 128, 128, 128);
   $greylight = imagecolorallocate($im, 199, 199, 199);
   $black = imagecolorallocate($im, 0, 0, 0);
   imagefilledrectangle($im, 0, 0, $image_size -1, 39, $black);
	
	// The text to draw
	$text = $rand;
	// Replace path by your own font path
	$font = dirname(__FILE__).'/default.ttf';
	$chars = array();
	$chars2 = array();
	for ($i = 0; $i < strlen($text); $i++) { $chars[] = $text[$i]; }
	for ($i = 0; $i < strlen($rand2); $i++) { $chars2[] = $rand2[$i]; }
	//$chars = str_split($text);
	//$chars2 = str_split($rand2);
	// Add some shadow to the text
	//imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
	
	$size2 = 20;
	$angle2 = 0;
	$x2 = 10;
	$y2 = 25;
	$bbox2 = array();
	$bbox2[0] = 0;
	$bbox2[2] = 0;
	foreach($chars2 as $char2){
		$angle2 = rand(-20, 20);
		$size2 = rand(15, 20);
		$y2 = rand(0, 40);
		imagettftext($im, $size2, $angle2, $x2, $y2, $greylight, $font, $char2);
		$bbox2 = imagettfbbox($size2, $angle2, $font, $char2);
		$x2 = $x2 + abs($bbox2[2] - $bbox2[0]) + 3;
	}
	
	$size = 20;
	$angle = 0;
	$x = 10;
	$y = 25;
	$bbox = array();
	$bbox[0] = 0;
	$bbox[2] = 0;
	// Add the text
	foreach($chars as $char){
		$angle = rand(-20, 20);
		//$size = rand(15, 20);
		imagettftext($im, $size, $angle, $x, $y, $black, $font, $char);
		$bbox = imagettfbbox($size, $angle, $font, $char);
		$x = $x + abs($bbox[2] - $bbox[0]) + 3;
	}
	
	// Using imagepng() results in clearer text compared with imagejpeg()
	imagepng($im);
	imagedestroy($im);

}else{
	$image = imagecreatefrompng(dirname(__FILE__).'/background.png');
	$greylight = imagecolorallocate($image, 199, 199, 199);
	$black = imagecolorallocate($image, 0, 0, 0); 
	imagestring ($image, 5, 8, 14,  $rand2, $greylight); 
	imagestring ($image, 5, 5, 11,  $rand, $black); 
	header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
	header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
	header("Cache-Control: no-store, no-cache, must-revalidate"); 
	header("Cache-Control: post-check=0, pre-check=0", false); 
	header("Pragma: no-cache"); 
	header('Content-type: image/png');
	imagepng($image);
	imagedestroy($image);
}

?>

Are there more options i can do?

Hi xxErwinxx,

I'm sorry, this works OK here; I have no idea why it doesn't work for you or for abasel. I can't think of any explnantion :-(

Bob