• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Horizontal Genesis eNews E-Mail Opt In Subscribe Box Inline

In this tutorial, i’ll provide a very simple beginners guide about how to make a horizontal email subscribe box like this basic example:

input inline button

There’s only 2 classes you should ever need to modify to display your subscribe box inline with the button.

horizontal form classes

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.

Reader Interactions

Comments

  1. Becky Bruso says

    August 25, 2017 at 1:32 pm

    Works Great!
    Thanks!

    Log in to Reply
  2. Kristie Hill says

    September 4, 2014 at 7:32 pm

    Exactly what I was looking for! Thanks again, Brad!

    Log in to Reply
    • Brad Dalton says

      September 5, 2014 at 3:03 pm

      Glad to hear it Kristie.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.