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

ORIGINAL POST

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.

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.

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.

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

/* 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;
}

Hiding the default images and adding our own

/* 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;
}

Styling the input box

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

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

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

Download source files

• reCaptcha CSS
• reCaptcha PSD

Related posts

• UPDATED: Embedding an image into Gmail (2)
• txilife is alive (2)
• Polycom Napkin Hack (1)
• Firefox Browser Chrome (0)
• Constant Contact RESTful API and Perl (4)