This question has been answered by syberknight. See the first response.
<div class="g-recaptcha" data-sitekey="[[+site_key]]"></div> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]"></script>
div.g-recaptcha { min-height: 45px; min-width: 90px; border: 1px black; color: #fff; text-color: #000; }
<div style="height: 60px;width:100px;color:blue;text-color:black;border:1px red;" data-sitekey="[[+site_key]]"></div> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]"></script>
http://stackoverflow.com/questions/27713505/recaptcha-api-v2-stylingfrom what i've read, this new v2 only allows for 2 "styles" they call "Themes". the default is "light", and the other is "dark".
http://stackoverflow.com/questions/8155645/recaptcha-creates-iframe-on-page-breaks-styling
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>
$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, ));
$theme = $modx->getOption('dark'); $recaptcha_html = $modx->getChunk('recaptchav2_html', array( 'site_key' => $site_key, 'lang' => $lang, 'theme' => $theme, ));
&theme=darkto 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>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]&theme=dark"></script>
.
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&..
<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>
<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>
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
cool! thanks for letting me know!!
Quote from: nuan88 at Mar 08, 2016, 04:49 PMSome 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