• 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

Style eNews Subscribe Box Widgets Differently

Most bloggers display 2-3 opt in boxes in different positions on their blogs. The only problem is, the styling is pretty much the same for each when using the Genesis eNews Extended widget.

This maybe o.k if you want your submit button underneath your email input box but what if you want it side by side?

In this very simple tutorial, i’ll show you which classes you need to use and in which order you need to use them to style each subscribe widget differently. The styling you add will be completely up to you.

Here’s the default styling for the Genesis 2.0 Sample theme:

Default Sidebar Subscribe Box

sidebar subscribe box

Default Subscribe Box After Single Posts

default style for after single posts subscribe box

Custom Subscribe Box Side by Side After Single Posts

subscribe submit box side by side

In this tutorial, i’ll show you how easy it is to style each eNews subscribe widget differently.

This code can be used to align your email input box with your submit button for your single post subscribe boxes.

Register for full access


Positioning – Here’s some code you can use to move your Jetpack sharing buttons above or below your single post subscribe widget

Hook Locations – The PHP code above uses the new Genesis 2.0 HTML 5 loop hooks. You can change these hooks in the code easily or replace them with the old Genesis loop hooks.

Style Other Widgets Differently

  • Style Widgets Individually – Beginners Guide
  • Styling The Same Widgets Differently
  • Horizontal Genesis eNews E-Mail Subscribe Box Inline With Input Button

Reader Interactions

Comments

  1. steve says

    July 20, 2014 at 3:00 am

    Hi Brad i tried this exactly just copied and pasted the code but didn’t work for me. Does the code need to go in a particular place? in your CSS?

    Log in to Reply
    • Brad Dalton says

      July 20, 2014 at 12:14 pm

      The code produces exactly what you see in the screenshot.

      What class is your widget using? If its different to whats in the code then it won’t work.

      Also which code snippet did you copy and paste exactly? There’s 4 on this post?

      Log in to Reply
  2. Kassiah says

    July 5, 2013 at 4:36 pm

    Thanks for this awesome tutorial, Brad! Very helpful.

    Log in to Reply
    • Brad Dalton says

      July 5, 2013 at 4:47 pm

      You’re welcome Kassiah

      Log in to Reply
  3. Keith Davis says

    July 1, 2013 at 10:44 pm

    Useful info Brad.
    Are you still using Feedburner or have you moved over to Mailchimp etc?

    I’ve been thinking of moving my list from Feedburner to Mailchimp.

    Log in to Reply
    • Brad Dalton says

      July 2, 2013 at 2:10 am

      The MC UI is very nice to work with and makes it extremely easy to create beautiful email newsletters.

      I have been using it for over 2 years for giving away my eBook as it works perfectly with an Autoresponder.

      Great for list building.

      Still using Feedburner and have also started using Jetpack subscriptions because it offers both daily and weekly subscriptions. Not something which is easy to setup with MailChimp.

      I don’t see how Google could discontinue the Feedburner service as it would cause a huge loss of RSS subscribers for all users.

      Log in to Reply
      • Keith Davis says

        July 2, 2013 at 7:55 pm

        “I don’t see how Google could discontinue the Feedburner service as it would cause a huge loss of RSS subscribers for all users.”

        Fingers crossed.

        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.