Skip to content

Instantly share code, notes, and snippets.

@srikat
Created December 5, 2014 11:46
Show Gist options
  • Save srikat/b05d7b1af42b8711a368 to your computer and use it in GitHub Desktop.
Save srikat/b05d7b1af42b8711a368 to your computer and use it in GitHub Desktop.
Horizontal Opt-in Form in Genesis using eNews Extended plugin. http://sridharkatakam.com/horizontal-opt-form-genesis-using-enews-extended-plugin/
//* Register Horizontal Opt-In widget area
genesis_register_sidebar(
array(
'id' => 'horizontal-opt-in',
'name' => __( 'Horizontal Opt-In' ),
'description' => __( 'This is the widget area for horizontal opt-in form.' ),
) );
//* Display Horizontal Opt-In below Header
add_action( 'genesis_after_header', 'sk_horizontal_opt_in' );
function sk_horizontal_opt_in() {
genesis_widget_area( 'horizontal-opt-in', array(
'before' => '<div class="horizontal-opt-in widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}
/* ## Horizontal Opt-in Form
--------------------------------------------- */
.horizontal-opt-in {
padding-top: 20px;
padding-bottom: 20px;
background-color: #50c5b5;
}
.enews-widget {
color: #fff;
}
.enews-widget p {
float: left;
width: 40%;
margin-top: 7px;
margin-bottom: 0;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
#subscribe {
float: right;
width: 60%;
}
.enews-widget input {
float: left;
width: 35%;
margin-right: 10px;
margin-bottom: 0;
padding: 10px;
border: 1px solid #38aa9a;
color: #222;
}
.enews-widget input[type="submit"] {
width: auto;
padding: 10px 34px;
background-color: #222;
}
.enews-widget input[type="submit"]:hover {
color: #fff;
background-color: #000;
}
@media only screen and (max-width: 1200px) {
.enews-widget p {
font-size: 16px;
text-align: left;
}
.enews-widget input {
width: 30%;
}
}
@media only screen and (max-width: 800px) {
.enews-widget p {
float: none;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
#subscribe {
float: none;
width: 100%;
}
.enews-widget input {
width: 100%;
margin-bottom: 20px;
}
.enews-widget input[type="submit"] {
float: none;
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment