How to change location of Recaptcha badge (invisible) from left bottom to right bottom?

[sonuyos]

Cannot find anyway even in the codes to change it from right bottom to left, any help?

[brian!]

4 hours ago, sonuyos said:

Cannot find anyway even in the codes to change it from right bottom to left, any help?

one option is a quick fix with css...

.grecaptcha-badge { 
    left: 0px;
}

and technically, you could hide it with the css code below (it still validates), but that would almost certainly be against Googles T&Cs...

.grecaptcha-badge { 
    visibility: hidden;
}

the real solution is probably going to involve using the "data-badge" feature - which by default is bottomright, but you can define it to be bottomleft - I can do it by editing scripts.js and changing....

                // propagate invisible recaptcha if necessary
                if (isInvisible) {
                    if (recaptchaContent.data('size') !== 'invisible') {
                        recaptchaContent.attr('data-size', 'invisible');
                    }
                } else {
                    recaptchaContent.hide()
                }

to...

                // propagate invisible recaptcha if necessary
                if (isInvisible) {
                    if (recaptchaContent.data('size') !== 'invisible') {
                        recaptchaContent.attr('data-size', 'invisible');
                        recaptchaContent.attr('data-badge', 'bottomleft');
                    }
                } else {
                    recaptchaContent.hide()
                }

... minifying it and saving as scripts.min.js

now someone, perhaps one of WHMCS' own devs, who is better than me at JavaScript, should be able to make that into a hook.... long-term, there's nothing to stop WHMCS putting a left/right location dropdown toggle in the security tab, but that's heading down the road of a feature request, so it won't be happening any time soon. 🙄

in fact, they should have already made it multilingual - as I showed how in the thread below....

though everything seems to be defined in the .js files now, so I doubt quick template edits wouldn't work on the latest versions.

[sonuyos]

On 2/16/2019 at 10:18 PM, brian! said:

one option is a quick fix with css...

.grecaptcha-badge { 
    left: 0px;
}

and technically, you could hide it with the css code below (it still validates), but that would almost certainly be against Googles T&Cs...

.grecaptcha-badge { 
    visibility: hidden;
}

the real solution is probably going to involve using the "data-badge" feature - which by default is bottomright, but you can define it to be bottomleft - I can do it by editing scripts.js and changing....

                // propagate invisible recaptcha if necessary
                if (isInvisible) {
                    if (recaptchaContent.data('size') !== 'invisible') {
                        recaptchaContent.attr('data-size', 'invisible');
                    }
                } else {
                    recaptchaContent.hide()
                }

to...

                // propagate invisible recaptcha if necessary
                if (isInvisible) {
                    if (recaptchaContent.data('size') !== 'invisible') {
                        recaptchaContent.attr('data-size', 'invisible');
                        recaptchaContent.attr('data-badge', 'bottomleft');
                    }
                } else {
                    recaptchaContent.hide()
                }

... minifying it and saving as scripts.min.js

now someone, perhaps one of WHMCS' own devs, who is better than me at JavaScript, should be able to make that into a hook.... long-term, there's nothing to stop WHMCS putting a left/right location dropdown toggle in the security tab, but that's heading down the road of a feature request, so it won't be happening any time soon. 🙄

in fact, they should have already made it multilingual - as I showed how in the thread below....

though everything seems to be defined in the .js files now, so I doubt quick template edits wouldn't work on the latest versions.

For some weird reason, neither method is working for me, i tried to add it in custom.css, it didnt work, and then i tried to add it in script.js and minfy it, didnt work there too 😐

[brian!]

21 hours ago, sonuyos said:

For some weird reason, neither method is working for me, i tried to add it in custom.css, it didnt work, and then i tried to add it in script.js and minfy it, didnt work there too

are you using a custom theme, or a clean version of Six ?

[sonuyos]

3 hours ago, brian! said:

are you using a custom theme, or a clean version of Six ?

Custom Mate..

[brian!]

19 hours ago, sonuyos said:

Custom Mate..

then all bets are off! 🙂

if it's not based on Six, it may be calling different files - so maybe the above code is in another .js file somewhere... can you search for it ?

[sonuyos]

1 hour ago, brian! said:

then all bets are off! 🙂

if it's not based on Six, it may be calling different files - so maybe the above code is in another .js file somewhere... can you search for it ?

This is the js - https://snthostings.com/billing/templates/six77/js/scripts.min.js?v=063e8b

 

idk why v=063e8b is coming, i havnt set any version on it.

[brian!]

try replacing the above six77/js/scripts.min.js file with the attached - if I try it on my v7.7.1 dev, it's showing the icon bottomleft.

scripts.min.js

[sonuyos]

On 2/24/2019 at 6:33 PM, brian! said:

try replacing the above six77/js/scripts.min.js file with the attached - if I try it on my v7.7.1 dev, it's showing the icon bottomleft.

scripts.min.js

Eureka 😄