CSS for CF7 form WordPress
- SOLVED
Hello,
Our CF7 optin box got messed up (not sure when) and we need some CSS to fix it's display.
You can see it at the bottom of the page:
http://www.theclearingnw.com/how-to-deal-with-loss/
Here is the existing CSS:
/* BLOG NEWSLETTER SIGNUP BOX (BOTTOM BAR)*/
#blog_sign_up { margin:0;}
#blog_sign_up {
background: none repeat scroll 0 0 #008000;
height: 60px;
padding: 20px;
border-radius: 4px 4px 4px 4px;
color: #ffffff;
position: relative;
}
#blog_sign_up input[type="text"] {
float: left;
margin-right: 7px;
}
#blog_sign_up input[type="text"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 3px 3px 3px 3px;
font-family: georgia;
font-style: italic;
height: 35px;
line-height: 20px;
padding: 4px 10px;
width: 240px;
}
#blog_sign_up input[type="email"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 3px 3px 3px 3px;
font-family: georgia;
font-style: italic;
height: 35px;
line-height: 20px;
padding: 4px 10px;
width: 240px;
}
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
height: 46px;
position: relative;
text-shadow: none;
top: -46px;
}
#blog_sign_up h2 {margin-bottom: 5px; }
/*Sign Up confirmation message */
#blog_sign_up .wpcf7-mail-sent-ok {
background: none repeat scroll 0 0 #2EA8F0;
border: 2px solid #2EA8F0;
position: absolute;
top: 43px;
z-index: 1000;
}
/*Sign Up confirmation Errors */
#blog_sign_up .wpcf7-validation-errors {
background: none repeat scroll 0 0 #F7E700;
border: 2px solid #F7E700;
color: #000000;
position: relative;
top: -37px;
}
#blog_sign_up span.wpcf7-not-valid-tip {
background: none repeat scroll 0 0 #FF0000;
border: 1px solid #FF0000;
font-size: 10pt;
left: 20%;
padding: 2px;
position: absolute;
top: 20%;
width: 280px;
z-index: 100;
}
/* [END] BLOG NEWSLETTER SIGNUP BOX (BOTTOM BAR) */
Please let me know exactly what CSS to remove, change, edit, etc.
Thanks!!
Answers (3)
Navjot Singh answers:
Change
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
height: 46px;
position: relative;
text-shadow: none;
top: -46px;
}
to
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
position: relative;
text-shadow: none;
top: -53px;
}
king2244 comments:
Hi Navjot,
Thanks for the quick reply! It shows up like this now: http://screencast.com/t/yKmRj82ERq
Id like to have all (name, email, + submit button) on 1 line. Is this possible?
Navjot Singh comments:
Try changing
#blog_sign_up input[type="text"] {
float: left;
margin-right: 7px;
}
to
#blog_sign_up input[type="text"] {
float: left;
}
And then
#blog_sign_up input[type="email"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 3px 3px 3px 3px;
font-family: georgia;
font-style: italic;
height: 35px;
line-height: 20px;
padding: 4px 10px;
width: 240px;
}
to
#blog_sign_up input[type="email"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 3px 3px 3px 3px;
font-family: georgia;
font-style: italic;
height: 35px;
line-height: 20px;
padding: 4px 10px;
width: 240px;
float:left;
}
and then
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
height: 46px;
position: relative;
text-shadow: none;
top: -46px;
}
to
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
position: relative;
text-shadow: none;
top: -33px;
margin-right: 5px;
}
Balanean Corneliu answers:
At me in firefox is looking fine with Navjot solution, but the problem is i cant click or write on the Name layer.
You sure you havent changed something in the CF7 backend ?
king2244 comments:
Thank you for noticing! I didn't see that.
CF7 on the backend is normal, but to get it the page, I found this code in single.php:
<!-- Top Right Email Signup Embed -->
<div id="tr_blog_sign_up">
<h2 style="font-family: Georgia,serif; font-style:italic; color:#fff; font-weight: 600;">Subscribe by Email</h2>
<span style="margin-bottom:7px; display:block;">Sign up for weekly updates to your inbox.</span>
<?php echo do_shortcode('[contact-form-7 id="1594" title="Subscribe by Email"]')?>
</div>
<!-- END Top Right Email Signup Embed -->
Any ideas?
king2244 comments:
Nevermind, I got it working with the answer below :)
Bob answers:
Hi same here I am not able to click in name field.
Please try following
add this code at bottom
div#blog_sign_up p {
width: 255px;
display: inline-block;
margin: 0 10px 0 0 ;
padding: 10px 0 0 0;
vertical-align: top;
}
and replace this code
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
height: 46px;
position: relative;
text-shadow: none;
top: -46px;
}
with this
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
height: 46px;
position: relative;
text-shadow: none;
top: -63px;
right: -100px;
}
king2244 comments:
Hey Bob, Awesome!! Got it working now, and the name field works, too!!
Any chance you can make the fields and the button the same size, like this:
http://screencast.com/t/cuRCI5NOhzL
Bob comments:
Yes here is new code.
**Old Code**
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
height: 46px;
position: relative;
text-shadow: none;
top: -63px;
right: -100px;
}
need to replace by
**New Code**
#blog_sign_up input.wpcf7-form-control.wpcf7-submit {
background: none repeat scroll 0 0 #FF7A2B;
border: medium none;
color: #FFFFFF;
float: right;
position: relative;
text-shadow: none;
top: -57px;
right: -88px;
height: 35px;
}
Bob comments:
Have you implemented it? is it working?
king2244 comments:
Awesome, it worked very well. Thanks for your help Bob!!!