How do I change the widget colors?

Asked by presston

Our forum uses a theme with a dark background and black as the color of the input fields. When recaptcha displays on our forum the input text is defaulted to black, which makes it impossible to see what you're entering unless you select it. reCaptcha has themes, but trying to edit the recaptcha.html in the style's template folder and adding the theme variable to that doesn't seem to change anything.

Question information

Language:
English Edit question
Status:
Solved
For:
phpBB3 reCAPTCHA MOD Edit question
Assignee:
No assignee Edit question
Solved by:
presston
Solved:
Last query:
Last reply:
Revision history for this message
Jakub Wieczorek (fawek) said :
#1

Well, the fact is that reCAPTCHA service styles mechanism sucks, solution for your problem would be just styling the inputs, but these are generated by JS script, so it's impossible. Currently, there is no other way to change the style except the method you mentioned.

While developing this MOD I was thinking a while about how reCAPTCHA widgets should be displayed. Originally, I thought about integrating its appearance with phpBB. However, I decided to display it in traditional, well-known way, since I think that it is something good, when users link the appearence of reCAPTCHA which is being used in many sites.

But, in the next minor release I would like to implement the idea I was thinking previously. It would also solve a little problem with displaying reCAPTCHA widget on subsilver2 style.

Revision history for this message
presston (presston-21) said :
#2

I don't really mind what colors it uses as long as it doesn't decide to make the inputs black on black for no reason I can see. I would imagine that it's pulling the input background color from something in my CSS, but without knowing what that is finding it will be a problem. Does the styling work at all on this mod? From what I've tinkered with, it didn't seem to.

Revision history for this message
Jakub Wieczorek (fawek) said :
#3

You see, the code of the widget is generated by JS script and with using the JS script it's not possible to control directly the styling of the inputs, which AFAIK have got no CSS classes assigned. You can try to style all the input elements:

input {
  background-color: your-color;
}

It should work.

Revision history for this message
presston (presston-21) said :
#4

I just tried styling the input elements and that didn't work. I'm not even able to use recaptcha's own theme option to choose from the themes they have available. I don't know what's going on at this point.

Revision history for this message
Jakub Wieczorek (fawek) said :
#5

Well, if it goes about this part of code (recaptcha.html):

<!-- IF S_RECAPTCHA_OPTIONS -->
<script type="text/javascript">
var RecaptchaOptions = {
 <!-- BEGIN recaptcha_option -->
  {option.KEY} : {option.VALUE},
 <!-- END recaptcha_option -->
};
</script>
<!-- ENDIF -->
<script type="text/javascript" src="{RECAPTCHA_URI}"></script>

The fact is that this code is currently not used by the modification, it's just prepared for the specific feature in next releases. Making reCAPTCHA service display with custom theme simply does not work, because there is a conditional statement:

<!-- IF S_RECAPTCHA_OPTIONS -->
...
<!-- ENDIF -->

You can remove these 2 lines and then after:

<!-- END recaptcha_option -->

set your own custom variables from the ones supported by reCAPTCHA service. Everything is in the client documentation:
http://recaptcha.net/apidocs/captcha/client.html

For the custom themes it would be:

theme : 'name_of_the_theme',

Supported are: red, white, blackglass, clean.

Revision history for this message
presston (presston-21) said :
#6

Thanks for pointing out the conditional statement in the recaptcha.html. Now I see that you had the groundwork laid for the options to be set in the ACP panel. It wasn't hard after knowing that to remove the condition and hard code the theme call into t. I also found a style error in my CSS in the input field, so I got that sorted as well.

Thanks for the help faw, this plugin is a godsend.