I'm looking to style a Google reCaptcha (v2 - the one with the checkbox) that is generated by shortcode in the Contact Form 7 WordPress plugin.
The form with the reCaptcha shortcode looks like this:
<label> Your First Name (required)
[text* first-name] </label>
<label> Your Last Name (required)
[text* last-name] </label>
<label> Phone Number
[text* phone-number] </label>
<label> Your Email (required)
[email* your-email] </label>
[mc4wp_checkbox id:subscribe-checkbox]
<label> Your Message
[textarea your-message] </label>
[honeypot honeypot-939]
[recaptcha id:google-recaptcha]
[submit "Submit"]
And when parsed on the website the source code for that #google-recaptcha is:
<div data-sitekey="hidden_" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha" id="google-recaptcha">
<div style="width: 304px; height: 78px;">
<div>
<iframe src="https://www.google.com/recaptcha/api2/anchor?k=hidden" title="recaptcha widget" scrolling="no" name="undefined" width="304" height="78" frameborder="0">
<html dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css"> /* fonts and stuff removed */ </style>
<link rel="stylesheet" type="text/css" href="https://www.gstatic.com/recaptcha/api2/r20170206171236/styles__ltr.css">
<script type="text/javascript" src="scripts-removed"></script>
</head>
<body>
<div class="rc-anchor-alert"></div>
<input id="recaptcha-token" value="hidden-from-view" type="hidden">
<script>scripts removed</script>
<div class="rc-anchor rc-anchor-normal rc-anchor-light">
<div class="rc-anchor-aria-status">
<section>
<span id="recaptcha-accessible-status" aria-live="assertive" aria-atomic="true">Recaptcha requires verification</span>
</section>
</div>
<div class="rc-anchor-error-msg-container" style="display:none">
<span class="rc-anchor-error-msg"></span>
</div>
<div class="rc-anchor-content">
<div class="rc-inline-block">
<div class="rc-anchor-center-container">
<div class="rc-anchor-center-item rc-anchor-checkbox-holder">
<span class="recaptcha-checkbox goog-inline-block recaptcha-checkbox-unchecked rc-anchor-checkbox" role="checkbox" aria-checked="false" id="recaptcha-anchor" tabindex="0" dir="ltr" aria-labelledby="recaptcha-anchor-label">
<div class="recaptcha-checkbox-border" role="presentation"></div>
<div class="recaptcha-checkbox-borderAnimation" role="presentation"></div>
<div class="recaptcha-checkbox-spinner" role="presentation"></div>
<div class="recaptcha-checkbox-spinnerAnimation" role="presentation"></div>
<div class="recaptcha-checkbox-checkmark" role="presentation"></div>
</span>
</div>
</div>
</div>
<div class="rc-inline-block">
<div class="rc-anchor-center-container">
<label class="rc-anchor-center-item rc-anchor-checkbox-label" aria-hidden="true" role="presentation" id="recaptcha-anchor-label">I'm not a robot</label>
</div>
</div>
</div>
<div class="rc-anchor-normal-footer">
<div class="rc-anchor-logo-portrait" aria-hidden="true" role="presentation">
<div class="rc-anchor-logo-img rc-anchor-logo-img-portrait"></div>
<div class="rc-anchor-logo-text">reCAPTCHA</div>
</div>
<div class="rc-anchor-pt">
Privacy<span aria-hidden="true" role="presentation"> - </span>Terms
</div>
</div>
</div>
</body>
</html>
</iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ">
</textarea>
</div>
</div>
Essentialy, I'm just trying to make the reCaptcha box full-width. So far I have got it to:
By using this css:
#google-recaptcha div {
width: 100% !important;
}
#google-recaptcha div > iframe {
width: 100% !important;
}
/*#google-recaptcha > div > div > iframe > html > body > div.rc-anchor, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-normal, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
width: 99% !important;
}*/
#google-recaptcha > div > div > iframe > html > body .rc-anchor.rc-anchor-normal.rc-anchor-light {
width: 99% !important;
}
#google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
background: #f6f6f6 !important;
border: 0px solid #d3d3d3 !important;
color: #003a79 !important;
}
But as you can see, it's not processing my .rc-anchor styles. I've tried playing around with different child selectors and things like that but I just can't figure out where I'm going wrong.
When I adjust the width in FireFox inspector, it works and looks the way I want it to, but that is obviously adjusting the Google styles__ltr.css, which must be overriding my CSS regardless of what I try.
Can someone please help me?
Thanks in advance
simply place this code in contact7 form adjust your transform scale
<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>
[recaptcha]
</div>
You can't use CSS selectors for elements inside an iframe, though you can style the iframe itself.
See Css–selector for when a html-document is inside an iframe?
Please check this article , as an option:
[recaptcha size:compact]
Nothing worked for me but this code
[recaptcha class:col-md-6]
Here is my full form code
<div id="content_container">
<p class="col-md-4"><label> Your Name (required)</label>
[text* your-name]</p>
<p class="col-md-4"><label> Your Email (required)</label>
[email* your-email]</p>
<p class="col-md-4"><label> Subject</label>
[text your-subject]</p>
<p class="col-md-12"><label> Your Message</label>
[textarea your-message]</p>
[recaptcha class:col-md-6]
<p class="col-md-6">[submit "Send"]</p>
</div>
This code work perfect
<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>[recaptcha]</div>
This code is the only thing that worked for me as well, the same as what #Entorno Web commented. My comment is from January 18, 2023. This was the only code that worked.
I will say I am working on
CF7 Version: 5.5.6.1
My version is a rolled-back version of Contact Form 7 because where I am integrating CF7 submissions does not work with the newest updates.
Code I Used:
<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>[recaptcha]</div>
It WILL NOT WORK if you use it in this manner:
<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>
[recaptcha]
</div>
For some reason when you add <div class= on the first line and use [recaptcha] on the next line and use on the final line, it does not work... That is how I usually enter the code into Contact Form 7, but for some reason, you have to place the code as one string without making new lines.
Related
I've got basic css problem.
I want to add display: none; property to input-group_details element in my div class="textAdd".
divs from the console:
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
<!---->
</div>
</div>
When I write sth like:
.input-group__details{
display: none;
}
It works, but I want address only the element in my textAdd class. I cannot simply add new class to my <div class="input-group__details"> because it's actively rendered by the framework.
I think this is what you are expecting
.textAdd .input-group__details {
display: none;
}
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
This is hidden .... Some text here
</div>
</div>
<div class="input-group__details">
This is not hidden ... Some text here
</div>
I have looked over several different questions helping me get to this point however I can't figure out the selector that allows me to get to an outside DIV.
If I remove the two containing DIVs the code works perfectly, However with formatting I need the divs to be able to control the look. Any help would work I know the ~ is the child selector which is why it works without the DIVs.
How do I select any DIV?
Code:
.reveal-if-active {
color: #ccc;
font-style: italic;
opacity: 0;
transform: scale(0.8);
max-height: 0px;
transition: 0.5s;
}
input#photo1:checked ~ div#portraits,
input#photo2:checked ~ div#wedding,
input#photo3:checked ~ div#other {
color: #f00;
font-style: normal;
transform: scale(1);
opacity: 1;
max-height: 150px;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
<label for="photo">
<span class="error" id="err-phone">Please Select What you are looking for?</span>
</label>
<input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
<label for="photo1">Portraits</label>
<input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
<label for="photo2">Wedding</label>
<input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
<label for="photo3">other</label>
</div>
<div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
<div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
<div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</form>
</body>
</html>
I think you can't yet style a parent based on descendants with CSS only, you might consider using Javascript or jQuery maybe. Look at this links:
Parent Selectors in CSS, Is there a CSS parent selector?
Try this HTML structure:
<body>
<form>
<div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
<label for="photo">
<span class="error" id="err-phone">Please Select What you are looking for?</span>
</label>
<input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
<label for="photo1">Portraits</label>
<input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
<label for="photo2">Wedding</label>
<input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
<label for="photo3">other</label>
<div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
<div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
<div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</div>
</form>
</body>
In order to get this working, you'll need to have the items that have the reveal-if-active class in the same div container with the option. Check this article.
To position them outside of the parent <div> use positioning on .reveal-if-active class:
position:absolute;
top: 40px;
See Example.
cchacholiades is correct -- you will need javascript to do what you want. +1
On a CSS hover event, can I change another div's styling?
However, the javascript for what you desire is quite simple -- it would look something like this:
$(document).ready(function(){
$('input[name="photo"]').click(function(){
var phot = $(this).val();
$('#'+phot).show().css({'background':'yellow','opacity':'1'});
});
});
jsFiddle Demo
Notes:
(1) Because you already have the ID of the desired DIV stored as the value of the clicked radio button, it is simple to capture that value: $(this).val() -- $(this) refers to the element that was clicked on
(2) I demonstrated using both .show() -- which is the same as css display:block, and actually using css statements themselves.
Frankly, I think it will be faster for you just to use jQuery to do this. The only caveat is you must load the jQuery library, usually in the <head> tags like this:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
http://phpacademy.org
my like buttons are above my page-body , they are in the right position but are aligned with and the code is ugly. I would also need to add a white background only to the like-buttons because I will make them float with the page if you will scroll down and for this I also need to set a "div id" to the like-buttons. How can I align the like-buttons with CSS in the same position they are now and set a "div id" to them ? I also need them to be aligned vertically because facebook button is a little bit lower than google and twitter.
For example, if you access this page: http://www.cumseface.eu/viewtopic.php?t=187 , you can see the like-buttons just below the ad. I`m a beginner at CSS and HTML so if you can help please be specific. Sorry for my bad english and thanks in advance.
And here is the HTML code that I`m using for the part with the buttons:
<div class="topic-actions">
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></div>
<!-- ENDIF -->
</div>
<!-- IF S_DISPLAY_SEARCHBOX -->
<div class="search-box">
<form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_TOPIC}" onclick="if(this.value=='{LA_SEARCH_TOPIC}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_TOPIC}';" />
<input class="button2" type="submit" value="{L_SEARCH}" />
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<div class="text-align: center;"> <fb:like href="{U_PAGE_URL}" show_faces="false" data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
<div class="g-plusone" data-size="medium"></div>
Tweet
<!-- IF PAGINATION or TOTAL_POSTS -->
<div class="pagination">
<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT -->{L_VIEW_UNREAD_POST} • <!-- ENDIF -->{TOTAL_POSTS}
<!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> • {PAGE_NUMBER} • <span>{PAGINATION}</span><!-- ELSE --> • {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
</div>
<!-- ENDIF -->
</div>
</div>
<div class="clear"></div>
EDIT: I edited the code to look like this:
<div id="likebuttons"><fb:like href="{U_PAGE_URL}" show_faces="false"
data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
<div class="g-plusone" data-size="medium"></div>
Tweet
</div>
And added CSS like this:
#likebuttons {
margin-left: 147px;
width: 350px;
background: #FFF;
text-align: center;
float: left;
padding: 2px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
z-index: 10;
}
But the "Facebook" button is not in line with others 2. Can that be solved ? Thank you.
SOLVED: with the facebook button, added this code in CSS:
.fb_iframe_widget { vertical-align:top;}
There is a great website for this. I use it all the time:
Its called Share This:
http://www.sharethis.com/get-sharing-tools/#sthash.0aAa3jqv.dpbs
Get the code for the buttons on your website it will look something like this:
<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>
Then with css you can style those respectively the way you want it.
UPDATE:
In your code you have an error:
<div class="text-align: center;">
text-align:center; is a style not a class... you need to first make to say
<div style="text-align: center;"> or make it a class and add styles in your css:
Next, remove all the in the code near the buttons.
Then add this to your css to style the FB like button and twitter to give it some margin:
.fb_iframe_widget {margin-right:25px;}
.twitter-share-button {margin-left:25px;}
I am using jquery mobile. I have defined a background image in index page inside css body{} tag. Back ground is coming fine but it's automatically loading in different pages also though I didn't declare the body css part in following pages. How to prevent that? and css body{background: url()} is only working on index page. here is my code
<style type="text/css">
body {
background: url(images/login2.png);
background-repeat:repeat-y;
background-position:center;
background-attachment:scroll;
background-size:100% 100% ;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
</head>
<body>
<div align="center" data-role="fieldcontain" id="contentConfirmation" name="contentConfirmation">
<div >
<label class="userlabelclass" for="url" style="float:left" ><p>Username:</p></label>
<input class="userfieldclass" id="Lusername" name="uid_r" type="text" value="John Doe" " style="width:230px;float:right">
</div>
<div >
<label class="pswdlebelclass" for="url" style="float:left"><p>Password:</p></label>
<input class="pswdfieldclass" id="Lpassword" name="pwd_r" type="password" value="123456789" style="width:230px;float:right">
<label class="forgotclass" for="url" style="float:left"><p>Forgot Password?</p></label>
</div>
<div align="center">
<a href="listview_page.html" data-role="button" data-inline="true" data-theme="e" class="buttonclass" >Log In</a>
</div>
</div>
</body>
Jquery mobile navigation uses Ajax to load the body part only of the pages you navigate to. This means that the header of subsequent pages is ignored, and that the header of your first page is "applied" to all pages. If you want your background to apply only to your first page, I would recommend:
you create a data-role="page" div to hold the content of your first page, as recommended when using jquery mobile
You apply your background to this specific page element
I'm not very good at HTML/CSS terminology so please feel free to edit the question.
Could you guys please tell me how I can make certain fields/tags fill rest of available space allocated by parent tag ? Non-GWT, html+css example would be fine too.
Here is what I have
HTML code of this example is here (it's generated by GWT).
If I change size of the browser window border of fieldset changes too occupying whole area.
So the "requirements" are:
No fixed width values because I have several localized versions of
the site.
First column with name of the field should be as wide as the longest name. It's "phone number" in my case but can be something else in other language.
Input tag should be left-aligned. Input tag should autosize to occupy space remaining within boundaries of parent
tag.
UiBinder XML of PersonEditor control is
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:e='urn:import:com.google.gwt.editor.ui.client'
ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
ui:generateLocales="en,ru">
<ui:style src="../common.css"/>
<g:CaptionPanel ui:field="captionPanel">
<g:Grid>
<g:row>
<g:cell>
<div>
<ui:msg meaning="person's name">Name:</ui:msg>
</div>
</g:cell>
<g:customCell>
<e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.editField}">
<e:valuebox>
<g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
</e:valuebox>
</e:ValueBoxEditorDecorator>
</g:customCell>
</g:row>
<g:row>
<g:cell>
<div>
<ui:msg>Phone Number:</ui:msg>
</div>
</g:cell>
<g:customCell>
<e:ValueBoxEditorDecorator ui:field="phoneNumber" stylePrimaryName="{style.editField}">
<e:valuebox>
<g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
</e:valuebox>
</e:ValueBoxEditorDecorator>
</g:customCell>
</g:row>
<g:row>
<g:cell>
<div>
<ui:msg>EMail:</ui:msg>
</div>
</g:cell>
<g:customCell>
<e:ValueBoxEditorDecorator ui:field="email" stylePrimaryName="{style.editField}">
<e:valuebox>
<g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
</e:valuebox>
</e:ValueBoxEditorDecorator>
</g:customCell>
</g:row>
</g:Grid>
</g:CaptionPanel>
</ui:UiBinder>
I don't provide XML for SenderOrganization because it's pretty much the same.
You can do it this way. ".input-wrapper" is necessary for some browsers which don't allow to position input elements by specifying left/right.
<!DOCTYPE HTML>
<html>
<head>
<style>
label { line-height: 30px; }
.input-wrapper { display: inline-block; position: absolute; left: 200px; right: 50px; }
input { width: 100%; }
</style>
</head>
<body>
<fieldset>
<legend>Sender organization:</legend>
<div>
<label>Name:</label>
<div class="input-wrapper">
<input>
</div>
<div>
<div>
<label>Address:</label>
<div class="input-wrapper">
<input>
</div>
</div>
<fieldset>
<legend>Contact Person:</legend>
<div>
<label>Name:</label>
<div class="input-wrapper">
<input>
</div>
<div>
<div>
<label>Phone Number:</label>
<div class="input-wrapper">
<input>
</div>
</div>
<div>
<label>EMail:</label>
<div class="input-wrapper">
<input>
</div>
</div>
</fieldset>
</fieldset>
</body>
</html>
To make label column be autosizable you have to use table element. It looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style>
table { width: 100%; }
th { text-align: left; font-weight: normal; white-space: nowrap; }
td { width: 100%; }
input { width: 100%; }
</style>
</head>
<body>
<fieldset>
<legend>Sender organization:</legend>
<table>
<tr>
<th>Name:</td>
<td><input></td>
</tr>
<tr>
<th>Address:</td>
<td><input></td>
</tr>
</table>
<fieldset>
<legend>Contact Person:</legend>
<table>
<tr>
<th>Name:</td>
<td><input></td>
</tr>
<tr>
<th>Phone Number:</td>
<td><input></td>
</tr>
<tr>
<th>EMail:</td>
<td><input></td>
</tr>
</table>
</fieldset>
</fieldset>
</body>
</html>
Try this. Please note this is just an example. Could very well do with cleaner code.
http://jsfiddle.net/SX2np/70/