Tips and Tricks HQ Support

Support site for Tips and Tricks HQ premium products

  • Home
  • Contact Us
  • Documentation
  • Forum Home
    • Forum
    • Forum Search
    • Forum Login
    • Forum Registration

Styling ReCaptcha in eMember registration page

by

Tips and Tricks HQ Support Portal › Forums › WP eMember › WP eMember General Questions › Styling ReCaptcha in eMember registration page

Tagged: eMember Recaptcha Settings, solution, styling Recaptcha Settings

  • This topic has 6 replies, 3 voices, and was last updated 13 years, 2 months ago by SanDiegoWebGuy.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 13, 2010 at 9:54 pm #2034
    Paulfonzo
    Member

    Hi Guys,

    I checked the FAQ, Installation, etc. forums and didn’t find anything on changing the skin or colors via CSS of the default RED ReCaptcha form.

    Currently, in the WP eMembers – Settings v5.8.2 => ReCaptcha Settings there are no controls to change the skin or style settings.

    Any suggestions?

    Thanks in advance,

    Paul H.

    October 14, 2010 at 1:30 am #25431
    amin007
    Participant

    The reCAPTCHA stuff comes from the library provided by recaptcha. eMember doesn’t do any styling of it. There is a file called “recaptchalib.php” in the eMember plugin directory. That is probably the file you need to modify to change their CSS.

    October 15, 2010 at 10:15 pm #25432
    Paulfonzo
    Member

    Hi Guys,

    I checked out the suggested recaptchalib.php and there is nothing apparent to change the skin.

    The page source reveals a <table class=”recaptchatable recaptcha_theme_red” …> but I can find no reference to what is calling that (as that would be the place to change a skin).

    I posted elsewhere that WP-reCaptcha didn’t work with the eMember profile page, so I deleted it. But they have code to change skins (it added a box on blog comments pages), so I know it’s possible.

    WP-reCAPTCHA

    Plugin URI: http://www.blaenkdenum.com/wp-recaptcha/

    Description: Integrates reCAPTCHA anti-spam solutions with wordpress

    Version: 2.9.8.2

    Can you add this to an upgraded version? Would be a very nice, and I think relatively easy feature to add to the eMember dashboard.

    Thanks.

    Paul H.

    October 16, 2010 at 6:04 am #25433
    amin007
    Participant

    In the recaptchalib.php file there is a function called “recaptcha_get_html” that is the function that generates the HTML code for the reCAPTCHA area. It comes from recaptcha’s server.

    This article explains how you can customize the reCAPTCHA widget if you don’t want to use the default red theme:

    http://www.wp-globe.com/web-development/how-to-integrate-customized-recaptcha-in-your-php-application

    October 18, 2010 at 6:23 pm #25434
    Paulfonzo
    Member

    You pointed me to this code in recaptchalib.php:

    /**

    * Gets the challenge HTML (javascript and non-javascript version).

    * This is called from the browser, and the resulting reCAPTCHA HTML widget

    * is embedded within the HTML form it was called from.

    * @param string $pubkey A public key for reCAPTCHA

    * @param string $error The error given by reCAPTCHA (optional, default is null)

    * @param boolean $use_ssl Should the request be made over ssl? (optional, default is false)

    * @return string – The HTML to be embedded in the user’s form.

    */

    function recaptcha_get_html ($pubkey, $error = null, $use_ssl = false)

    {

    if ($pubkey == null || $pubkey == ”) {

    die (“To use reCAPTCHA you must get an API key from http://recaptcha.net/api/getkey“);

    }

    if ($use_ssl) {

    $server = RECAPTCHA_API_SECURE_SERVER;

    } else {

    $server = RECAPTCHA_API_SERVER;

    }

    $errorpart = “”;

    if ($error) {

    $errorpart = “&error=” . $error;

    }

    return ‘<script type=”text/javascript” src=”‘. $server . ‘/challenge?k=’ . $pubkey . $errorpart . ‘”></script>

    <noscript>

    <iframe src=”‘. $server . ‘/noscript?k=’ . $pubkey . $errorpart . ‘” height=”300″ width=”500″ frameborder=”0″></iframe>

    <textarea name=”recaptcha_challenge_field” rows=”3″ cols=”40″></textarea>

    <input type=”hidden” name=”recaptcha_response_field” value=”manual_challenge”/>

    </noscript>’;

    }

    The article above provided this code (I added the “white” theme name). It says to “add this into the head section of the page on which form is displayed”:

    <script type=”text/javascript”> var RecaptchaOptions = { theme : ‘<white>’ }; </script>

    I tried unsuccessfully 4x to add this code in this line:

    return ‘<script type=”text/javascript” src=”‘. $server . ‘/challenge?k=’ . $pubkey . $errorpart . ‘”></script>

    Any suggestions?

    Thanks.

    Paul H.

    October 19, 2010 at 1:06 am #25435
    amin007
    Participant

    I have always used the default reCAPTCHA widget so don’t really any idea.

    March 4, 2012 at 6:44 pm #25436
    SanDiegoWebGuy
    Member

    Just in case anyone is still interested in this issue, you can easily apply any of the themes shown on this page: http://code.google.com/apis/recaptcha/docs/customization.html

    Just open wp-eMemberrecaptchalib.php and find:

    /**
    * Gets the challenge HTML (javascript and non-javascript version).
    * This is called from the browser, and the resulting reCAPTCHA HTML widget
    * is embedded within the HTML form it was called from.
    * @param string $pubkey A public key for reCAPTCHA
    * @param string $error The error given by reCAPTCHA (optional, default is null)
    * @param boolean $use_ssl Should the request be made over ssl? (optional, default is false)

    * @return string - The HTML to be embedded in the user's form.
    */

    …and enter AFTER:

    ?>
    <script type="text/javascript">
    var RecaptchaOptions = {
    theme : 'blackglass'
    };
    </script>
    <?php

    change blackglass to any other offered theme: red, white, clean, or blackglass.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Log In

Forum Related

  • Forum Home
  • Forum Search
  • Forum Registration
  • Forum Login

Support Related Forms

  • Contact Us
  • Customer Support
  • Request a Plugin Update
  • Request Fresh Download Links

Useful Links

  • Plugin Upgrade Instructions
  • WP eStore Documentation
  • WP eMember Documentation
  • WP Affiliate Platform Documentation
  • Tips and Tricks HQ Home Page
  • Our Projects

Quick Setup Video Tutorials

  • WP eStore Video Tutorial
  • WP eMember Video Tutorial
  • WP Affiliate Platform Video Tutorial
  • Lightbox Ultimate Video Tutorial

Our Other Plugins

  • WP Express Checkout
  • Stripe Payments Plugin
  • Simple Shopping Cart Plugin
  • Simple Download Monitor

Copyright © 2025 | Tips and Tricks HQ