In this tutorial, i’ll provide a very simple beginners guide about how to make a horizontal email subscribe box like this basic example:
There’s only 2 classes you should ever need to modify to display your subscribe box inline with the button.
1. Input Field ( For email address )
.enews-widget input {
width: 40%;
}
2. Submit Button
.enews-widget input[type="submit"] {
width: 30%;
}
Generally, you’ll only need to modify the width for the email input field depending on which theme you use.
The CSS above affects every eNews widget on your site.
Lets take a look at the CSS which only modifies the eNews widget after single posts.
After Entry Horizontal Form
.after-entry .enews-widget input {
width: 40%;
}
.after-entry .enews-widget input[type="submit"] {
width: 30%;
}
Next, we’ll look at the CSS which only affects the eNews widget in the primary sidebar.
Primary Sidebar Horizontal Form
.sidebar-primary .enews-widget input {
width: 49%;
}
.sidebar-primary .enews-widget input[type="submit"] {
width: 49%;
}
Notes
- This tutorial assumes you have installed the Genesis eNews Extended plugin.
- Mobile CSS not included.
Works Great!
Thanks!
Exactly what I was looking for! Thanks again, Brad!
Glad to hear it Kristie.