Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis home opt-in form style help
- This topic has 6 replies, 2 voices, and was last updated 9 years, 11 months ago by BobAsyre2014.
-
AuthorPosts
-
May 22, 2014 at 6:48 pm #106422BobAsyre2014Member
I am using Genesis Child "SAMPLE" theme and I am having trouble editing the look of the HOME OPT-IN form layout.
Everything I've tried is either conflicting with the default style or just not what I want.I'm trying to adjust the font and field box sizes and the background color.
My URL is: http://ultimatebodywrap.com/ the opt-in form is on the top of the main page.
Any help will be greatly appreciated.
Bob A.
The style edit I placed in the Genesis Sample: Stylesheet (style.css) as part of the HOME OPT-IN widget is below...
/* Opt-in below header
--------------------------------------------- */
.horizontal-optin {
margin-top: 3.2rem; /*Delete this in Minimum Pro*/
background: #fff;
}.horizontal-optin .enews-widget input {
width: 33% !important;
}
@media only screen and (max-width: 1023px) {
.horizontal-optin .enews-widget input {
width: 32% !important;
}
}
http://ultimatebodywrap.com/
@media only screen and (max-width: 500px) {
.horizontal-optin .enews-widget input {
width: 100% !important;
margin-bottom: 1rem;
}
}May 22, 2014 at 11:17 pm #106447nutsandboltsMemberIt looks like your widget area may be missing a closing
</div>
- when I look at the site in Inspector, the horizontal-optin div extends to the bottom of the page, which messes up any background colors I try to apply to it. Can you paste in the code you used in functions.php to add the widget area?Also, can you tell us exactly which text you want to change, what color you want the background to be (and whether you want the whole area that color), etc.?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 23, 2014 at 5:10 am #106470BobAsyre2014MemberI would like the text color to be #fff
Text size and input fields both smaller
Background of the entire form to be #000
and, if possible, to control the colors of the submit button: #fff to start and #009900 when hover (button text color #000 for both).Here is the section from my: Genesis Sample: Theme Functions (functions.php)
(NOTE: This is the last part of the function script.)//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'header',
'site-tagline',
'nav',
'subnav',
'home-featured',
'site-inner',
'footer-widgets',
'footer',
'optin'
) );genesis_register_sidebar( array(
'id' => 'home-optin',
'name' => __( 'Home Optin', 'Genesis Sample Theme' ),
'description' => __( 'This is the home opt-in form section.', 'Genesis Sample Theme' ),
) );add_action( 'genesis_after_header', 'sk_optin_below_header' );
function sk_optin_below_header() {
if ( is_front_page() && is_active_sidebar( 'home-optin' ) ) {
printf( '<div %s>', genesis_attr( 'horizontal-optin' ) );
genesis_structural_wrap( 'optin' );
genesis_widget_area( 'home-optin' );
genesis_structural_wrap( 'optin', 'close' );
echo '</div>';
}
}Thanks in advance for your time and assistance.
Bob A.May 23, 2014 at 8:57 am #106493nutsandboltsMemberOkay, on this line (third from the bottom):
echo '</div>';
Try changing it to
echo '</div></div>';
Once you've done that, let me know and I'll look again to see if that closes the opt-in area correctly. Once that part is taken care of, we'll be able to work on the color and font changes.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 23, 2014 at 9:51 am #106507BobAsyre2014MemberAndrea,
I've made the edit to the functions.php file.If it helps to see the form script I'm using.....I've included it below. You'll notice I'm using a simple html table which might be causing most of my headache because any changes to TD & TR controls I've tried to make in the style sheet messed with the general site layout.
Thanks again.
Bob A.
<form action="http://My URL" method="post" onSubmit="javascript:return checkForm(this);">
<input type="hidden" name="event" value="lp_form">
<input type="hidden" name="sub_event" value="visit1">
<input type="hidden" name="revisit_event" value="revisit1">
<input type="hidden" name="val_required" value="f_firstname,f_lastname,f_email">
<input type="hidden" name="category_id" value="38654">
<input type="hidden" name="campaign_id" value="6958">
<input type="hidden" name="ad_code" value="ultimatebodywrap">
<input type="hidden" name="external_url" value="http://bodywrapsdistributor.com/">
<table summary="" width="800" border="0" cellpadding="20" cellspacing="0">
<tr>
<td bgcolor="000000" colspan="4"><font face="verdana" color="ffffff" size="5"><p align="center">Get instant information on our one of a kind product or becoming a distributor Now!</font></p>
</td>
</tr><tr align="right">
<td width="20%"> First Name:</td><td width="25%"><input name="f_firstname" type="text" maxlength="50" /></td><td width="20%"> Last Name:</td><td width="25%"><input name="f_lastname" type="text" maxlength="50" /></td>
</tr>
<tr align="right">
<td width="20%"> Email Address:</td><td width="25%"><input name="f_email" type="text" maxlength="64" /></td><td width="20%"> Phone Number:</td><td width="25%"><input name="f_phone" type="text" maxlength="20" />
</td>
<tr>
<td colspan="4">
<table summary="" width="800" border="0" cellpadding="20" cellspacing="10">
<tr align="left">
<td width="15"><input name="f_optin_exists" type="hidden" value="1" /><input name="f_optin" value="1" type="checkbox" CHECKED /></td><td width="495">Yes! Please add me to your mailing list today!</td><td colspan="2" width="285"><input name="Submit" type="Submit" value="Submit" />
</td>
</tr>
</form>
</td>
</tr>
</table>May 24, 2014 at 9:26 am #106608nutsandboltsMemberHmm... That div still isn't closing and I'm not sure why.
It may be much easier (especially for maintaining mobile responsiveness) to use the Genesis eNews and Updates plugin, which integrates with a number of mailing list providers (Aweber, Mailchimp, Mad Mimi, etc.) - your child theme includes CSS for Genesis eNews already, and it will be easier to find the specific areas you want to change.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 24, 2014 at 10:01 am #106615BobAsyre2014MemberAndrea,
Thanks for your help.
I'll see what I can do with the other email clients.Bob A.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.