• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Use Image Button with Genesis eNews Extended

Use Image Button with Genesis eNews Extended

By Victor M. Font Jr.
March 31, 20142 Comments

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.

standard-button

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:

My American RX Button Sprite

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.

  • 2shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn2
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Dani

    December 18, 2014 at 11:40 am

    Thank you for posting this! Made grabbing the code a breeze and I styled it quickly.

    Reply
    • Victor M. Font Jr.

      December 18, 2014 at 11:55 am

      You’re welcome Dani. Glad it helped.

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....