We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 29059
    • 88 Posts
    hiho.

    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

    This question has been answered by syberknight. See the first response.

      • 46886
      • 1,154 Posts
      I tried to figure this out but failed, but let me try to get you on the right path. css files for packages are...somewhere in the file tree, I have forgotten where and can't find now, this one may be in an inconvenient place, I remember that some things have small css files in a really weird location, somewhere deep in the bowels of the file tree.

      If you look in your *chunks*, you will have a folder for recaptcha, and inside that is the template used by recaptcha, it is recaptchav2_html. The other two files seem limited to feedback, for the user to provide feedback to the site owner. For many snippets, you can specify the tpl file you want to use, not sure if this snippet will allow that, its using a call something like this: [[!Snippet_name &tpl=your_tpl_name]].

      Let me try to keep this organized, to the extent possible. If we could find the css file, then we could change that directly. If the snippet allows us to specify a new tpl file (this is a template but not a *site* template, only the template for the output of this little piece of code), then we could do that.

      Both of the above are probably better ways, but there is still another way.

      Ok so back to recaptchav2_html, which is the tpl file, effectively. Here it is:

      <div class="g-recaptcha" data-sitekey="[[+site_key]]"></div>
      <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]"></script>


      So this is the <div> that creates the space for the recaptcha contents. The css is applied (almost certainly) by the selector of the div class. So, the css file we would want will be something along the lines of

      div.g-recaptcha {
      min-height: 45px;
      min-width: 90px;
      border: 1px black;
      color: #fff;
      text-color: #000;
      }


      Now, again assuming there isn't a better way, we have two simple ways to change this. One is to change the div class to a new name, and then in your css you can put whatever style you want. This way, the offending css file is never invoked, as no div class applies anymore. The other way isn't much different, it is to simply remove the div class completely and put inline styles directly in this file, i.e.

      <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>


      My code may be a bit off but this all should be right. Mostly ;-)

      BTW 'color' here will be background color, it gets a little tricky here but color should be the whole color within the div unless I am off my rocker today. Less than 25% chance of that, though.
        • 29059
        • 88 Posts
        heh, thanks again for your continued assistance.

        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.
          • 46886
          • 1,154 Posts
          Ah I was afraid of this. And I couldn't figure out why the <div> is closed *before* the script, it didn't make any sense.

          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.
          • discuss.answer
            • 29059
            • 88 Posts
            yeah, i tried adding "&theme=dark" in the "recaptchav2_html" chunk script src, but it makes no change to it.

            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>
              • 46886
              • 1,154 Posts
              Haha you hacked it successfully! Good job! I doubt I would have ever thought of trying that!
                • 46886
                • 1,154 Posts
                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
                  • 29059
                  • 88 Posts
                  SyberKnight Reply #8, 8 years ago
                  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
                    • 29059
                    • 88 Posts
                    SyberKnight Reply #9, 8 years ago
                    FYI - that is on the "Evo" forum, not for "Revo".

                    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
                      • 13226
                      • 953 Posts
                      @SyberKnight

                      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.