Home › Forums › Weaver Xtreme Theme › Using the CSS Stylesheet to hide reCaptcha Logo
- This topic has 12 replies, 2 voices, and was last updated 1 year ago by
pasqualerose.
-
AuthorPosts
-
July 23, 2021 at 17:09 UTC - Views: 45 #69238
pasqualerose
Participant(Sorry this is duplicated. I’m having some trouble posting it on my end.)
Hi. It’s been a while since I’ve logged on here with a question. I am using Contact Form Seven as my contact form. With using reCaptcha spam protection the reCaptcha logo pops up on every page of the site. I’ve been given some suggestions on how to get rid of it and it seems I need to enter code into the CSS stylesheet. I don’t want to do something that’s going to negatively affect the website. These are the instructions from contact form seven’s support.“#The reCAPTCHA badge is annoying me, can I hide it?
According to reCAPTCHA’s official FAQ answer Google permits you to hide the reCAPTCHA badge.
To hide the badge add this style rule somewhere in your CSS stylesheets:
1<code class=”css plain”>.grecaptcha-badge { <code class=”css keyword”>visibility<code class=”css plain”>: <code class=”css value”>hidden<code class=”css plain”>; }Instead you have to add text links to Google’s Privacy Policy and Terms of Servicepages in a position prominent to site users.”
Where would I enter that line of code and how would I do it so I don’t negatively affect the rest of the website?
This a link to the page with those instructions. https://contactform7.com/faq-about-recaptcha-v3/#hide-recaptcha-badge
Thanks,
Pat
July 23, 2021 at 17:53 UTC - Views: 43 #69241scrambler
ModeratorAll CSS can be placed in The Theme Global Custom CSS Rule box, and if the rule has proper syntax it wont affect anything else but what it is intended for.
It looks like when you pasted the CSS it got mangled, I assume the rule they gave you was
.grecaptcha-badge {visibility:hidden;}
If so, this will basically hide all HTML elements with the class .grecaptcha-badge and nothing else
July 23, 2021 at 21:49 UTC - Views: 42 #69244pasqualerose
ParticipantThanks @Scarmpler. So I went to enter the .grecaptcha-badge {visibility:hidden;} code at Appearances>Additional CSS >custom CSS. There was already something written in there. It said, “. Selector {font-size: 150%;font – weight:bold;} /*for example*/” when I tried to place the reCAPTCHA code in thee box it deleted the other code. I cancel the action.
Where did I go wrong?
These links are to a couple screenshots. https://ibb.co/7gFh2j1
Thanks,
July 23, 2021 at 21:57 UTC - Views: 40 #69246scrambler
ModeratorYour screenshot shows the proper location for the rule and the rule appears correct.
When you do that does it do the job or NOT?
If not, leave the rule in place and post a link to a page that shows what you are trying to hide, and be specific where it is in the page
“. Selector {font-size: 150%;font – weight:bold;} /*for example*/” is just a comment to illustrate it can be deleted
July 23, 2021 at 22:08 UTC - Views: 36 #69247pasqualerose
ParticipantWhen I enter the grecaptcha-badge {visibility:hidden;} code, the “. Selector {font-size: 150%;font – weight:bold;} /*for example*/” that was already there in the box disappears. So I never saved the “grecaptcha-badge {visibility:hidden;}” because I didn’t want to lose the code that was in the box before I placed the “grecaptcha-badge…” code in the box.
This screen shots shows that other code in there. But it’s not allowing me to have both codes in the box at the same time. Thanks.
July 23, 2021 at 22:09 UTC - Views: 34 #69248pasqualerose
ParticipantWhat would happen if I deleted that other code?
July 23, 2021 at 22:15 UTC - Views: 32 #69249scrambler
ModeratorI told you nothing will happen, that code does nothing, it is an example that does not do anything
July 24, 2021 at 13:23 UTC - Views: 28 #69256pasqualerose
ParticipantGot it. Thanks.
I posted the reCaptcha code in and it didn’t do anything.
Pat
July 24, 2021 at 15:57 UTC - Views: 25 #69259scrambler
ModeratorPlease Pay attention….
I told you that if that was the case, I needed you to Leave the rule in place, and provide a link to a page with the element you are trying to hide and explain where that element is located
July 24, 2021 at 17:03 UTC - Views: 22 #69261pasqualerose
ParticipantOK. I did some more investigating. I’m logged in to work on the website using Google Chrome. When I look at the site using Chrome I see the reCaptcha logo. So I decided to check Safari, where I’m not logged in. And the logo did not show up using Safari. I did the same thing using Firefox and the logo did not appear there either. I then checked my phone and it appeared there, but I didn’t see it when I looked using my son’s iPad.
Perhaps it staying on Chrome and my phone due to caching reasons, although I did clear the site’s cache. So maybe the browsers are doing the caching.
I put the weblink in like this:
.grecaptcha-badge { visibility: hidden; } https://visualverse.thecreationspeaks.com/photography-coach/
Thanks,
Pat
July 24, 2021 at 18:25 UTC - Views: 18 #69262pasqualerose
ParticipantI’m pretty sure it’s a caching issue now.
Thanks for your help and patience.
July 24, 2021 at 18:38 UTC - Views: 15 #69263scrambler
ModeratorWhat are you Saying ???
.grecaptcha-badge { visibility: hidden; } https://visualverse.thecreationspeaks.com/photography-coach/
IS NOT a VALID CSS rule, you must not type that url in the Theme Global Custom CSS Box.
The Valid rule I gave you is
.grecaptcha-badge {visibility: hidden;}
Remove the URL part (yellow highlight) from the custom CSS file
That said, I Checked your site, and the CSS Rule is doing its job and hiding the Captcha logo.
The captcha logo does not appear on edge or Chrome for me (because of the CSS rule).
July 26, 2021 at 13:52 UTC - Views: 6 #69282pasqualerose
ParticipantSorry, I apologize. I am a little dyslexic and sometimes I don’t see everything that is written.
I agree that it’s working now. I mentioned in my last post that I believe it was only showing up on my Chrome and phone because the browsers were caching it (my phone no longer is caching it, but Chrome still is, even though I cleared the cache). Chrome caching it was why I thought the code wasn’t working when I first inserted it.
Thanks,
Pat
-
AuthorPosts
- You must be logged in to reply to this topic.