<![CDATA[ RECAPTCHA_v2 > how to change it's THEME - My Forums]]> https://forums.modx.com/thread/?thread=99538 <![CDATA[RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme?page=2#dis-post-538274
i've installed the reCAPTCHAv2 extra (in my Revolution v.2.4.2-pl), and it works!!!

but i cannot seem to figure out how to change its THEME from light to DARK.

anybody out there know how to do that? it seems like it should be simple (outside of modx), but within this extra, i'm lost.

thanks.-jason.

RE:...
https://modx.com/extras/package/recaptchav2
https://github.com/sepiariver/recaptchav2
https://developers.google.com/recaptcha/docs/display
]]> syberknight Feb 13, 2016, 06:19 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme?page=2#dis-post-538274 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539475
Yeah the difference only matters for extras and some of the notation is different (Revo is [[snippet]] while Evo is [snippet]).

Here, I saw the css that iusemodx provided, that means he has near total control of the style of that box. Yeah, css will be standard across both platforms, indeed the platform isn't supposed to affect the css at all. Modx is very good about this, Wordpress and some others, less so. One reason I did not go with Wordpress back in the day is that it affected the styling and it was very hard to find out where it was affected and to fix it. With modx, just throw in the html and css and it will look just as intended. That was a big draw for me.]]> nuan88 Mar 10, 2016, 07:26 AM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539475 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539440
I think nuan88 referenced the post because of the use of CSS in combination with both version 1 + 2 of recaptcha, as the CSS is not dependent on system used

There is more information about making recaptcha v.2 responsive in the same post, with a link to a third party source, which may or may not be helpful to you.]]> iusemodx Mar 09, 2016, 05:42 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539440 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539431
Quote from: syberknight at Mar 09, 2016, 03:29 AM
cool! thanks for letting me know!!

Quote from: nuan88 at Mar 08, 2016, 04:49 PM
Some new info on (near) total control of this element, if you are interested. This convo is between two advanced members, and the result is that you can control 95% of that box:

https://forums.modx.com/thread/99706/eform---recaptcha-verification-anti-spam?page=2#dis-post-539334
]]> syberknight Mar 09, 2016, 02:52 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539431 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539368
Quote from: nuan88 at Mar 08, 2016, 04:49 PM
Some new info on (near) total control of this element, if you are interested. This convo is between two advanced members, and the result is that you can control 95% of that box:

https://forums.modx.com/thread/99706/eform---recaptcha-verification-anti-spam?page=2#dis-post-539334
]]> syberknight Mar 08, 2016, 09:29 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539368 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539355
https://forums.modx.com/thread/99706/eform---recaptcha-verification-anti-spam?page=2#dis-post-539334]]> nuan88 Mar 08, 2016, 10:49 AM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-539355 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538293 nuan88 Feb 14, 2016, 02:40 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538293 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME (Best Answer)]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538291
the iframe src url is what i got when drilling down in Chrome browser's dev tool code inspector. it's what gets auto inserted by google between the div in the chunk just before the script tag.

oohh, but... HOLY COW!!! I GOT IT!!!

just by chance, i was looking at that div right above the script tag in the chunk & thought... "what the hell, try it as a data thing", so i did AND IT WORKED!!! i'm amazed...
<div id="html_element" class="g-recaptcha" data-sitekey="[[+site_key]]" data-theme="dark"></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]"></script>
]]> syberknight Feb 14, 2016, 01:54 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538291 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538290
I can look into this, it seems there is some techniques to gain a little control over it, but for now in the link you provided http://stackoverflow.com/questions/27713505/recaptcha-api-v2-styling one person indicates you may be able to add the dark theme variable like this, in our recaptchav2_html file, leave the div as is and in the script call:

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]&theme=dark"></script>


Here is the relevant text, which I don't understand well, and the link to google is a little different, but pls give this a try, this is in the 'src attribute':

If we inspect the iframe, we will find the theme name is passed in the query string of the src attribute. This URL looks something like the following.

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&..
.

Farther down someone shows how to put a div over the google stuff to control the appearance, which might be useful but seems a bit involved.

Give this solution a try and let me know. You would think google would give people some control but...maybe in 2018.

If that doesn't work, where did you get this code here?


<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6LeqJBgTAAAAAPeg7_PPUePUU2Hl4W2-qwGGWvxw&co=aHR0cDovL3NhbmN0dWFyeWludGVybmF0aW9uYWwuY29tOjgw&hl=en&v=r20160208154954&size=normal&cb=9kg5mevawf2w" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no"></iframe>


To put the theme variable (I think its a variable, not sure to be honest) in the above, there are two ways I can see potentially to do it. One is add &theme=dark with no space into that long ....anchor?blahblah&theme=dark (notice that it has several places where its &something=lots of numbers, for instance &hl=en is probably the language variable. Also notice &size=normal, so that's probably where it goes, anywhere in that string).

But I don't know where you got that code from.

The other possibility is that, perhaps, the &theme=dark could go, without the &, along with the stuff like width="304" height="78" theme="dark"

Who knows, it might work in either place! Joking, probably not. And don't put it in both places at the same time! Haha another (bad) joke.]]> nuan88 Feb 14, 2016, 01:19 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538290 <![CDATA[Re: RECAPTCHA_v2 > how to change it's THEME]]> https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538288
with the new Google reCaptcha v2, it's my understanding that changing CSS styles will not affect it, because it uses an iFrame for the embed. here's just a couple of the many threads that says so...
http://stackoverflow.com/questions/27713505/recaptcha-api-v2-styling
http://stackoverflow.com/questions/8155645/recaptcha-creates-iframe-on-page-breaks-styling
from what i've read, this new v2 only allows for 2 "styles" they call "Themes". the default is "light", and the other is "dark".

according to...
https://developers.google.com/recaptcha/docs/display
...outside of ModX, you would do this...
<script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key',
          'theme' : 'dark'
        });
      };
</script>

...now, i believe all of this except the 'theme' part is handled by the Addon/Extra - since the captcha does work with its default/light theme.

in the Snippet named "recaptchav2_render", it has this PHP code...
$site_key = $modx->getOption('recaptchav2.site_key', null, '');
$lang = $modx->getOption('cultureKey', null, 'en');

$recaptcha_html = $modx->getChunk('recaptchav2_html', array(
    'site_key' => $site_key,
    'lang' => $lang,
    ));

...but again with me not knowing "programming", i couldn't figure out how to insert the theme here.
i tried...
$theme = $modx->getOption('dark');

$recaptcha_html = $modx->getChunk('recaptchav2_html', array(
    'site_key' => $site_key,
    'lang' => $lang,
    'theme' => $theme,
    ));
...but that did not work.

during experimenting within the Chrome Dev Tool, i did discover that if i added...
&theme=dark
to the iframe src url, then it would turn the captcha dark. but i also could not figure out how to get that inserted/injected into that.
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=6LeqJBgTAAAAAPeg7_PPUePUU2Hl4W2-qwGGWvxw&co=aHR0cDovL3NhbmN0dWFyeWludGVybmF0aW9uYWwuY29tOjgw&hl=en&v=r20160208154954&size=normal&cb=9kg5mevawf2w" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no"></iframe>


so, i'm at a loss.]]> syberknight Feb 14, 2016, 12:23 PM https://forums.modx.com/thread/99538/recaptcha-v2-how-to-change-it-s-theme#dis-post-538288