Better WordPress reCAPTCHA Styling Fix.

Stevieboy · #1 May 27, 2013, 02:25 AM

If anyone is having CSS Styling and broken display with the 'Better WordPress reCAPTCHA' then the following CSS will work in fixing the partial display of the 'Red' Theme that comes with the plugin.

Add the following to ATO/Add HTML/CSS Inserts/CSS Inserts.

PHP Code:


			
/* Special CSS for recaptcha */
.recaptchatable .recaptcha_r2_c2 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -27px 0 transparent !important;
}
.recaptchatable .recaptcha_r2_c1 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -18px 0 transparent !important;
}
.recaptchatable .recaptcha_r4_c4 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -214px 0 transparent !important;
}
.recaptchatable {
    color: black !important;
    font-family: helvetica,sans-serif !important;
    font-size: 8pt !important;
}
.recaptchatable .recaptcha_r4_c1 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -43px 0 transparent !important;
}
.recaptchatable .recaptcha_r4_c2 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -36px 0 transparent !important;
}
.recaptchatable .recaptcha_r3_c3 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -9px 0 transparent !important;
}
.recaptchatable .recaptcha_r8_c1 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -43px -49px transparent !important;
}
.recaptchatable .recaptcha_r3_c1 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll 0 0 transparent !important;
}
.recaptchatable .recaptcha_r7_c1 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -43px -49px transparent !important;
}
.recaptchatable .recaptcha_r1_c1 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll 0 -63px transparent !important;
}
.recaptchatable .recaptcha_r3_c2 {
    background: url("http://www.google.com/recaptcha/api/img/red/sprite.png") no-repeat scroll -18px -57px transparent !important; 
}

If using anything other than the 'Red' theme my assumption is to replace 'red' in the path for background with the correct colour.

Hope this helps someone.