Use Image Button with Genesis eNews Extended

With over 113,000 downloads, the Genesis eNews Extended plugin is a very popular extension to add to your Genesis Framework themes. If you're not familiar with this plugin, it creates a new widget that allows you to easily add mailing list integration to a Genesis based website. Genesis eNews Extended works with FeedBurner, MailChimp, AWeber, FeedBlitz and more. I use it on most of my websites to encourage my visitors to signup for my Mailchimp list.

If you have used the plugin, then you know it is configured with a standard HTML submit button element to trigger the form action. While you can apply some custom .css to modify the button's appearance for its normal, hover and active states, you are still limited to the button looking like a standard button.

Recently, I re-skinned a WordPress site on behalf of Blue Olive Strategic Consulting. Their client is My American RX.

When Blue Olive sent me the Photoshop .psd for the home page, all of the widgetized areas included a graphic image for the link buttons. The CSS Sprite I created to skin the buttons is below:

As you can see, the buttons are each 2-color, split equally along the horizontal axis. I could approximately replicate this on the Genesis eNews Extended standard submit button with a gradient fill, but it wouldn't look exactly as the presentation requested by the client. My only option is to skin the Genesis eNews Extended submit button with the images from the CSS Sprite.

Find the Element's CSS ID or CLass

The first step is to determine the submit button's element ID or class. This is simple. Once the widget is setup, load the page and view the source code in your browser. The section of home page's source code below shows on line 14 that the submit button has an element ID of "subbutton."

Customizing the Submit Button Style

Having the element ID, we can create custom .css to override the style already provided in your Genesis theme. Since, I was creating a new child theme from scratch, this was fairly easy to do. If you are using a purchased Genesis Child theme, you should add the following to your theme's style.css file in the section labeled /* Genesis eNews Extended.

That's it! If you've done everything as explained, your Genesis eNews Extended widget will have a button that appears as the one in the animated .gif at the top of the page.