July 6, 2009 - 7 comments

reCaptcha reTheme – UPDATED

Jan, 25th 2013 Update: Thanks for everyone who enjoyed this post - please take note that the zip file is back online - also please take note that this post was written 4 years ago and may not reflect the current state of reCaptcha.

UPDATE - Hi Everybody, thanks for the great feedback on this post. It seems that the supplied CSS was lacking support to force the display of your newly created icons, this should now be fixed and is available for download.

Please feel free to post any comments and question you may have.

ORIGINAL POST

recaptch1

If you need highly effictive spam protection and want to help digitze old books and manuscripts, reCaptcha is great, there is no better choice. If you are looking for a tool that allows you to configure it to match your website... thats a different story. Currently reCaptcha only offers 4 themes (red, blackglass, clean and white) which is better than nothing but can be an eyesore if none of these themes fits your site.  So to counteract this limitation we have compiled all the resources you need to create a custom reCaptcha for your website.

Below you will find all the instructions and source materials to take reCaptcha to the next level.

Before you start - When you open the PSD file included in the tutorial you will notice that the file we are working with looks nothing like the final result of recaptcha. To save time on load, all the images are grouped and flattened into what you see below.  Don't worry about this; we have included everything you need to make this work like a charm. Another thing you will notice is that we have started out with the white theme; this is because it will be easier to add color to a lighter object than it would a darker one.

recaptcha_red

Step One -  Download all the files included. Open the PSD. We are going to change the background color of the image. It is a gradient, so to get the smoothest color we are going to want to use our color balance.

  • Select the layer called 'Sprite', it is in the folded named 'Step One'
  • Next go to Image > Adjustments > Color Balance
  • Using the sliders, adjust the color of your container to fit the styling of your website. For example,  I have made mine blue - take your time and experiment with the controls until you achieve your desired colors. To make the colors richer and more or less saturated use the "Hue and Saturation" and "Curves" tools in the adjustments menu.

recaptcha_stepone

Step Two - If you are happy with the colors you selected then let's move on to the borders. The borders or "Stroke" may look alright to you but they also might need some adjustments, so let's take a look at that.

  • Select the layer "Border" in the folder "Step Two". This layer has a "Color Overlay" layer effect on it, if you were to click into that you would see the basic color picker to edit that layer to match your newly created background.

Step Three - The action for this step and the next are essentially the same as Step Two. I have taken the time to isolate the reCaptcha logo, tagline and icons. Because of that, you can directly apply a color to them which will be a breeze. This step is for the Logo and Tagline.

  • Note - You could change or remove these objects entirely but I would check with the TOC from reCaptcha first.

Step Four - Now go ahead and open the "Step Four" folder and change the color of the icons.  My final example is below.

recaptcha_blue

Step Five - I have taken the liberty of setting up the slices for this tutorial. Export your new icons to your server. You can name them anything you like but you will have to then rename them in the stylesheet.

***UPDATE***  The icons on this main image are used as separate files, this is why you need to export these icons.

Here are the icons by name and order on the image.

  • refresh.png
  • switch.png
  • whats_this.png
  • switch_audio.png

Step Six - Clear out the slices on the image and export the entire thing as "sprite.png" - again, you can alternatively name this what you want but you will need to change the CSS. Upload your images.

Step Seven -  Add the CSS include to your site by either importing it or adding it to your main style sheet. You will have to change the paths in the document to match the location of your server.

This is the last step in the process but lets take a look at some of the CSS to examine what is happening.

Overwriting the default image

{code type=css}/* Overwrite reCaptcha background images */
.recaptchatable .recaptcha_r1_c1 {
background: url('../../sprite.png') no-repeat 0 -63px !important;
}

.recaptchatable .recaptcha_r2_c1 {
background: url('../../sprite.png') no-repeat -18px 0 !important;
}

.recaptchatable .recaptcha_r2_c2 {
background: url('../../sprite.png') no-repeat -27px 0 !important;
}
{/code}
Hiding the default images and adding our own
{code type=css}

/* Remove reCaptcha button images  */
#recaptcha_switch_img_btn #recaptcha_switch_img {
display:none !important;
}

/* Add user created button images */

#recaptcha_reload_btn {
background: url('../../refresh.png') no-repeat !important;
display:block;
height:17px;
width:25px;
}
{/code}

Styling the input box

Change the border color value to match that of your site.

{code type=css}
/* Style input field to match new theme */
.recaptcha_theme_red #recaptcha_response_field {
border:1px solid #92b6eb;
}
{/code}

There you go, you now have a 100% custom version of reCaptcha to match your site. Enjoy.

Download source files

Published by: Daniel Strabley in Design, Developers

Comments

jordan
February 25, 2009 at 12:20 pm

Nice writeup.

custos
April 14, 2009 at 3:17 pm

thank you very much for this. works well.

I just had to set the “background” for the icons to !important as well. otherwise it didn’t work.

Paul Roberts
May 20, 2009 at 8:00 am

This is great information!

I hope this isn’t too stupid a question, but do you know of any 3rd party reCAPCHA themes (commercially available or otherwise)?

Also, is there a site you would recommend for learning about all things reCAPTCH-related (customizations, themes, plug-ins, how-tos)?

Thanks so much.

    Daniel
    May 22, 2009 at 12:37 pm

    Hi Paul,

    Thanks for reading. As for 3rd party reCAPCHA themes, I’m not sure of any out there at this time. Also the best place to learn more about reCAPCHA would be straight from the source. They have a nice wiki and forum which can be found here http://recaptcha.net/resources.html

    Thanks,

    Daniel.

e-nertia
May 23, 2009 at 10:51 am

Well, I’m not sure what I’m doing wrong, but it’s only overwritten the “white” theme that I had and has substituted it with a solid red box. No, icons at all. I’m sure it’s great when you can get it to work, but I’ll have to try something else. Thanks, anyway.

moni
July 2, 2009 at 7:41 am

hi,

Your help is much appreciated, Thanks for this wonderful post. But i have a problem in rendering my images, i did exactly what you have shown, their images get disappeared, but my images are not appearing, though path is correct, not sure why. Can you plz suggest something

Thanks,
moni

jazz
December 13, 2009 at 4:21 pm

same problem with moni

Leave a Reply