(Ning 2 and 3) welcome / sign-in and sign-up pop-up module. Updated Aug 24, 2017

[George H. Compton IV]

Updated Aug 21, 2017.

Made for any Ning 3.0 network a Welcome Sign-in and Sign-up pop-up Module. Displays for nonmembers / visitors only, online members will never see it. 

This pop-up works with all devices and browsers, Including but not limited to
Microsoft Edge - IE 9 & newer - Firefox all - Crome all.

click here to see it live on Cross Roads Fellowship - Ning 3.0

Upated 10-5015

Main code New v4.4 Ning 3.0 - In this code don't forget to add your network name and any extra text you would like to add.. These codes go in your (N3 - Custom Code - End of Page Code box)..  Chang the number 60 in the scripts id (id="RE_UP_60") to 15, 30, 45 or off  to speedup or stop the timed popup. ( 60 = 1 minute ~~ 45 = 45 seconds ~~ 30 = 30 seconds ~~ 15 = 15 seconds )

<!-- GEOCOMs_Sign-Up_Sign-In_Pop-Up v4.4 -->
<script src="null//storage.ning.com/topology/rest/1.0/file/get/558475?profile=original.js" type="text/javascript" id="RE_UP_60"></script>
<script type="text/javascript">
x$("P.date-count-down-top-big").after('<P class="date-count-down-bottom-big">Cross Roads Fellowship</p>');
x$("P.your-text").before('<p class="your-new-text">A Christian Outreach <BR>of J & L Ministries.</p>');
</script>

old code v2.6 - Ning 2.0 & Ning 3.0

<!-- GEOCOMs_Sign-Up_Sign-In_Pop-Up v2.7-->
<script src="null//storage.ning.com/topology/rest/1.0/file/get/935977?profile=original.js" type="text/javascript" id="RE_UP_60"></script>

<!-- Replace the words "Your Network name" with your networks name -->
<!-- Replace the words "Your new text" with Your new text -->
<script type="text/javascript">
x$("P.date-count-down-top-big").after('<P class="date-count-down-bottom-big">Your Network name</p>');
x$("P.your-text").before('<p class="your-new-text">Your new text</p>');
</script>

Customization

Here's all the customizing CSS for this pop-up. More than likely you will not need all of these codes, so as you're customizing it only add one snippet of code at a time. The Codes go in your "design studio CSS section"

/*! Start customizing sign-in sign-up pop-up */

/*! sign-in & sign-up close button */
DIV.date-count-down A#date-count-downxx.button{
    color: white!important;
    background-color: rgba(90, 99, 107, 0.87)!important;
    border: 1px solid rgb(51, 51, 51) !important;}

/*! sign-in & sign-up form field */
HTML BODY DIV.date-count-down .form-field {
    font-size:12px!important;
    padding:3px!important;}

/*! sign-in & sign-up text input fields */
HTML BODY DIV.date-count-down .form-field input{
    padding: 0.3em!important;
    font-size: 12px!important;
    line-height: 1.20em!important;}

/* Main module - border Background, text color & size */
HTML BODY DIV.date-count-down {
    background-color: rgba(250, 250, 250, 0.9)!important;
    color: black!important;
    font-size:15px!important;
    border: 5px solid #333!important;}

/* text color & size big text top */
HTML BODY P.date-count-down-top-big{
   color: black !important;
   font-size:34px!important;}

/* text color & size big text bottom */
HTML BODY P.date-count-down-bottom-big{
   color: blue!important;
   font-size:24px!important;}

/* Sign-up button text color & size  */
HTML BODY A#date-count-down3.button{
    color: blue!important;
    font-size:24px!important; }

/* Sign-up module - border Background, text color & size */
HTML BODY DIV.Geo.signUpPage-signUpForm{
    background-color: rgba(200, 200, 250, 0.9)!important;
    color: black!important;
    font-size:19px!important;
    border: 1px solid #333!important;}

/* Sign-in button text color & size  */
HTML BODY A#date-count-down2.button{
    color: black!important;
    font-size:16px!important;}

/* sign-in module - border Background, text color & size */
HTML BODY DIV.date-count-down-2{
   background-color: rgbargba(200, 220, 250, 0.9)!important;
   color: black!important;
   font-size:16px!important;
   border: 1px solid #333!important;}

/*! End customizing sign-in sign-up pop-up */

N3_popup_v4.3.js

N3_popup_v4.4.js

[Garfield Archivist]

Beautiful work. You deserve any donation/financial appreciation anyone is willing to give for work like this because it is not only valuable but also saves some users money.

[George H. Compton IV]

Thank you Garfield. I did add some extra customizing codes for the text fields because I've noticed a lot of 3.0 networks have ridiculously large padding and/or margins. I also added a few links to some live examples of the pop-up.

Thank you again and you have a great day. :)

[dave]

This is so cool i love it  :-) thanks for sharing George and helping so many people with your codes on Creators 

[George H. Compton IV]

You're welcome and thank you Dave  Hope you're having a wonderful evening. ;)

[George H. Compton IV]

Final update. I will not be touching this code ever again. :-)  It's now only made for Ning 3.0 networks, although it will still work in Ning 2.0 but you'll have much better results on a Ning 3.0 network.

[dave]

This looks so good on the network George and ads a very professional touch :-)

[George H. Compton IV]

Thank you Dave I did try to make this usable without customizing it for anyone that doesn't know how to use the custom codes.

You have a great day and hope you make it out on the water today. :-)

[⚡JFarrow⌁]

awesome work George!

[George H. Compton IV]

Thank you for the compliment JFarrow. :-)

[⚡JFarrow⌁]

you deserve it buddy.. nice work!