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)

After some digging, Matt and I found out there’s a known bug with Perl’s LWP::Authen::Digest module, which is required since the Constant Contact’s RESTful API requires Digest authentication. We circumvented the bug by correcting it in our own version of the module.

Although the RESTful API provides more functionality, all we needed was some plain-Jane adding to different contact lists for people requesting to be on a newsletter. With their old API, all the developer had to do was make a POST request to a certain URL, setting several key variables such as username, password, and requested list. The RESTful API mucks up things a bit, though. The biggest difference is that instead of POSTing several variables, the developer has to not only send a whole ATOM entry object, but must either make a POST, GET, or PUT request, depending on the nature of the operation. Oy. In our case, we ran up against the case when an email address had once been in user’s Constant Contact lists, but had been removed. The email address doesn’t get truly removed; rather it remains in that system with the status set to ‘Removed’. This matters, since when adding a new Contact, the request must be a POST, but for an existing user, the request must be a PUT. Constant Contact outlines the gory details on their developer site.

In a word, implementing the RESTful Constant Contact API was a pain, owing to shortcomings of our own technology (Perl) and the convoluted nature of Constant Contact’s new API. If anything, it’s a lesson in how design deficiencies can turn developers away from your technology if you haven’t accounted for their platform.

Related posts

• txilife is alive (2)
• reCaptcha reTheme – UPDATED (7)
• Firefox Browser Chrome (0)

Need to frame a mockup with Firefox? Download our free Firefox Browser Chrome in both 1024×768 and 800×600 resolutions, scrollbars,  editable URL field and page titles.

Enjoy!

• Download both PSD files in Zip format

Related posts

• txilife is alive (2)
• reCaptcha reTheme – UPDATED (7)
• Constant Contact RESTful API and Perl (4)

Welcome to txilife.com. For those of you who’ve found this… our apologies in advance. Table XI is a boutique consulting company based in Chicago. Our team is extremely diverse but we all share the common bond of curiousity. That’s what defines Table XI. As a result, everyone at TXI has a slightly different take on the internal shenanigans that go on here. Please visit www.tablexi.com if you want to find out more about what we do and how we help our customers tackle their problems with innovative technology based solutions. As for txilife, you may not care about what we’re eating for lunch each day, our coffee/tea obsessions, restaurants we love/hate or who is the best remote controlled bat flyer in our company, but we do.  It’s our life…

Related posts

• Vietnamese chicken salad with rice noodles (0)
• Roasted organic squash risotto (0)
• reCaptcha reTheme – UPDATED (7)
• Mirin-glazed salmon over sushi rice with fresh vegetables (0)
• Firefox Browser Chrome (0)