How to change the ReCaptcha style

[5942marine]

Just figured this out, so I thought I'd share with the rest of you.

If you want to change the default Red Recapctha style, to something else, all you have to do, is open

Code: Select all

captcha_recaptcha.html

which is found in /prosilver/template

Search for the following

Code: Select all

var RecaptchaOptions = {
lang : '{L_RECAPTCHA_LANG}',
tabindex : {$CAPTCHA_TAB_INDEX}10
};

Then, replace with the following

Code: Select all

var RecaptchaOptions = {
theme : 'clean',
lang : '{L_RECAPTCHA_LANG}',
tabindex : {$CAPTCHA_TAB_INDEX}10
};

You can use

• clean
• white
• blackglass

I'm using white on my registration page.

Picture 1.png (40.57 KiB) Viewed 3280 times

You can see it live @ http://www.ixtreme.net/ucp.php?mode=register

[MichaelTunnell]

I was coming here to post the same kind of tutorial but since you did I will just add onto it.

You didn't provide all of the options.

Theme Options

• red - default
• clean
• white
• blackglass
• custom

If you set the value to "clean" you can then change the colors via CSS.
- http://wiki.recaptcha.net/index.php/How ... CHA_colors

Code: Select all

 .recaptchatable .recaptcha_image_cell, #recaptcha_table {
   background-color:#FF0000 !important; //reCaptcha widget background color
 }
 
 #recaptcha_table {
   border-color: #FF0000 !important; //reCaptcha widget border color
 }
 
 #recaptcha_response_field {
   border-color: #FF0000 !important; //Text input field border color
   background-color:#FF0000 !important; //Text input field background color
 }

For more advanced users, the "custom" option will give you much more control.
- http://wiki.recaptcha.net/index.php/Theme

(The word 'custom' is required, do not make up a name)

• In your HTML, create a an empty div with ID recaptcha_image. This is where the actual image will be placed. The div will be 300x57 pixels. Thus in your comment form, add the div reference ( <div id="recaptcha_image"></div> ).
• Also in your comment form, create a text input with ID and name both set to recaptcha_response_field. This is where the user can enter their answer.
• Optionally, create a div which contains the entire reCAPTCHA widget. This ID div should be placed into the custom_theme_widget and the style of the div should be set to display:none. After the reCAPTCHA theming code has fully loaded, it will make the div visible. This element avoids making the page flicker while it loads.