Created New Options for Image and Styling

  • You know how it goes, you start tinkering and the next thing you know…

    I wanted an image centered above the form. I could add the image but couldn’t center because it would strip out what I added. Next thing you know, I started modifying code. That being said…

    I have modified the widget.php file and the frontend.php file so that;

    1. A new field for the image is displayed on the widget section. Upload an image using the WP Media section and copy the URL of the image. Then paste with img src tags into the form field.

    2. The code used for displaying the widget for the vistors was significantly modifed to include;
    a. Using a css layout for creating a table-like display of the form. This way, the submit button will be aligned below the email input field.
    b. Added CSS identifiers so that most everything would be tweakable using CSS. This includes the widget area, the widgettitle, the text before and the text after.

    There is much more detail in the UPDATES-Read me.txt file in the zipped file. You’ll need to grab some css from that file and paste into your theme’s style.css to make it work.

    You can grab the zipped file here…
    newsletter-sign-up.zip

    Feedback welcomed.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter joemerchant2

    (@joemerchant2)

    One IMPORTANT update. The form CSS needs to be modified to be specific for the newsletter form… Explains why my search form formatting was busted.

    Plugin Author Danny van Kooten

    (@dvankooten)

    Hi Joe,

    I’m definetly gonna look into your version and implement some of your changes, if you’re OK with that of course. I’ll mention your name or website in the code, if you wish. ??

    Regards, Danny.

    Thread Starter joemerchant2

    (@joemerchant2)

    Great! That’s exactly why I posted it up!
    I think the only update as I mentioned above was to the form. I had to add form id=”nsu-form.”

    joe, how can I change the background color for the whole widget? I had it before by adding:

    .Newsletter_SignUp_Widget { background:#e3e1d9;}

    .nsu_widget { background-color:#e3e1d9!important; padding: 10px 25px 5px 0; width: 260px;}

    but this no longer works when I use your version (which is awesome btw)

    Thread Starter joemerchant2

    (@joemerchant2)

    Thanks, glad you like it. What I found worked when I had such problems was how the naming was being done automatically so that WP would separate one widget from another. using firfox just now, mine looks like this;
    #newsletter_signup_widget-2 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    height: 368px;
    width: 274px;
    }

    Note the -2 at the end.

    use firebug and Go to the div of the widget at the top-level (newsletter-signup-widget..) Then right-click the mouse over the word DIV and pick “Copy CSS path.” Now path that in your css file and you’ll now the path for that object. You might be able to tweak the path to shorten it as well.

    I’ve actually never used firebug. I can’t figure out how to use it. Can the CSS path be found without that? Sorry about the questions. I’m just trying to get it done quickly.

    Dan

    (@memeslider)

    Will this work for styling the form embedded on a page and not in the widget?

    eng, it’s really work good, i like it!

    Thread Starter joemerchant2

    (@joemerchant2)

    Honestly, considering this plugin hasn’t been updated, you might be wise to look other places. One simple thing you can do within your email client (aweber, mailchimp) is to grab a form for your site but indicate either limited formatting or no formatting and then add your own css.

    Dan

    (@memeslider)

    Joe, Thanks for your response. Unfortunately, I couldn’t get the Mailchimp form to work on my page. For some reason the submit button was being stripped out despite choosing the no JS/CSS option.

    This form works well on my site, but now I need to style it. Your additions looked like a great option since I don’t know CSS all that well and it provided a starting point for me.

    If you think what you’ve written here will work on the page embed, I will install it and mess around. However, if you know that what you’ve modified only works on the widget version of this form, I will look to other solutions.

    Thanks for your help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Created New Options for Image and Styling’ is closed to new replies.