Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active October 31, 2016 23:28
Show Gist options
  • Save srikat/705a630732b78ab1dababc7bd09fae4b to your computer and use it in GitHub Desktop.
Save srikat/705a630732b78ab1dababc7bd09fae4b to your computer and use it in GitHub Desktop.
Horizontal Opt-in Form in Genesis using eNews Extended plugin and Flexbox. https://sridharkatakam.com/horizontal-opt-form-genesis-using-enews-extended-plugin-flexbox/
// Register Horizontal Opt-in widget area
genesis_register_widget_area(
array(
'id' => 'horizontal-opt-in',
'name' => __( 'Horizontal Opt-in', 'my-theme-text-domain' ),
'description' => __( 'This is the horizontal opt-in section.', 'my-theme-text-domain' ),
)
);
// Display Horizontal Opt-in widget area below header
add_action( 'genesis_after_header', 'sk_horizontal_optin' );
function sk_horizontal_optin() {
genesis_widget_area( 'horizontal-opt-in', array(
'before' => '<div class="horizontal-opt-in widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}
/* Horizontal Opt-in
-------------------------------------------- */
.horizontal-opt-in {
background-color: #50c5b5;
color: #fff;
padding: 20px;
}
.horizontal-opt-in .enews {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.horizontal-opt-in .widget-title {
margin-bottom: 0;
font-size: 20px;
margin-right: 20px;
}
.horizontal-opt-in form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; /* grow this item to fill the available space */
}
.horizontal-opt-in .enews-widget input {
margin-bottom: 0;
width: auto;
margin-right: 10px;
padding: 10px;
line-height: 1;
font-size: 15px;
border: none;
-webkit-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
}
.horizontal-opt-in .enews-widget input[type="submit"] {
margin-right: 0;
padding: 10px 50px;
background-color: transparent;
border: 2px solid #fff;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.horizontal-opt-in .enews-widget input[type="submit"]:hover {
background-color: #fff;
color: #333;
}
@media only screen and (max-width: 860px) {
.horizontal-opt-in .enews {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.horizontal-opt-in .widget-title {
margin-bottom: 20px;
}
.horizontal-opt-in form {
width: 100%;
}
}
@media only screen and (max-width: 620px) {
.horizontal-opt-in form {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.horizontal-opt-in .enews-widget input {
margin-right: 0;
margin-bottom: 20px;
}
.horizontal-opt-in .enews-widget input:last-child {
margin-bottom: 10px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment