Sunday, March 8, 2009

Grails ReCapthcha Plugin custom theming

Recently I got acquainted with Grails ReCaptcha Plugin, which is very useful for integration with ReCaptcha service. All steps for its installation and basic usage are described here.
But one issue which was not covered in details and was not so easy personally for me is customization of ReCaptcha look'n'feel. In other words how to create own custom theme instead of using few standards (red, white, blackglass and clean). I've looked through ReCaptcha API Documentation and Wiki, investigated simple demo, and as a result created simple example for creation of custom theming.


Pay attention:
1. Create div with, for instance, recaptcha_widget identifier which is not displayed. After the ReCaptcha theming code will be fully loaded, it will make the div visible. You don't have to make it visible by hands.
2. Place mentioned div identified to appriate attribute of recaptcha tag (custom_theme_widget="recaptcha_widget").
3. Create div for recaptcha image, it has to be empty and has fixed size.
4. Create text field for response and some additional divs for errors, or for recaptcha options (reloading f recaptcha, changing it to audio, help, etc.). Tag identifiers and names must match!
5. As an addition You can download standard ReCaptcha images and integrate them into Your theme.
As a result all these divs, text field, links and images can be connected to CSS classes and are easy customizable. Also You can use Grails tags, for instance, to render links. Enjoy!

P.S. Sorry for using image - don't know how to ignore HTML tags, textarea is not a good solution.

1 comment:

  1. Thanks for the example. If you want to put html on your page, you want to leverage HTML entities in your markup. There are many converters available to make this easy, e.g. http://www.texaswebdevelopers.com/examples/xmlentities/xml_entities.asp.

    ReplyDelete