Newsletter Sign-Up
Need help with NSU Form CSS (2 posts)

  1. le.gentleman
    Posted 4 years ago #

    Dear Danny,
    I use imnica and have setup the Newsletter Sign-Up plugin successfully with it.

    However, I am having issue implementing the CSS properly.

    Imnica provided me with the following code, which I modified to my liking. Now, how can I achieve this style for my Newsletter Sign-Up form using CSS?

    Here is the code:

    <div class="o-form"><div class="o-form-header"><h2 id="o-form-title">Enter Your Email</h2><p id="o-form-description">to receive our weekly email updates - it's quick, easy & free.</p></div><form action="http://www.imnicamail.com/v4/subscribe.php" method="post" accept-charset="UTF-8"><div class="o-form-row"><input name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress" type="text"></div><input name="FormButton_Subscribe" value="Subscribe" id="FormButton_Subscribe" type="submit"><input name="XXXXXXXXX" value="XXXXXX" type="hidden"><input name="XXXXXXXXXX" value="XXXXXXXXX" id="XXXXXXXXXXXX" type="hidden"><label for="FormValue_EmailAddress">No worries. We will never sell or abuse your information.</label></form><style type="text/css" media="screen">.o-form{background-color:#EBF1F7;border:1px solid #0077cc; width: 488px}
    .o-form form{margin:0px 0px 0px 0px;padding:0px;}
    .o-form .o-form-header{background-color:#174b75;padding:9px; width: 470px}
    .o-form h2{color:#fff;font-family:Georgia, serif;font-size:18px;line-height:27px;margin:0px;padding:0px;}
    .o-form p{color:#fff;font-family:Georgia, serif;font-size:14px;line-height:18px;margin:0px;padding:0px;}
    .o-form .o-form-row{margin-top:9px;padding:0 9px;}
    .o-form .o-form-row label{color:#174b75;font-family:Georgia, serif;font-size:13px;display:block;}
    .o-form input[type="text"]{border:1px solid #174b75;color:#174b75;padding:5px 7px;}
    .o-form input[type="submit"]{margin:12px 9px 10px 9px; background-color:#174b75; color:#fff;font-family:Georgia, serif;font-size:22px;padding:7px;}</style></div>

    Thanks in advance!


  2. Danny van Kooten
    Plugin Author

    Posted 4 years ago #

    Hi le.gentleman,

    You can just replace .o-form with .nsu-form and paste these styles into your theme's style.css file. That should do the trick. :)

    Good luck! Danny

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Newsletter Sign-Up
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic