Ning 2 & 3 - Alternative off-line mode - Customizable

[George H. Compton IV]

Alternative off-line mode "See images below"  The text can be changed to anything you prefer.  If you would like to use this code and need help customizing it, don't be afraid to ask I'll be more than willing to help. All I would need is the text that you want to display the date the network is closing and a link to your new network. Simple as that.. It can be customized to be used in many different ways.  :-)

Here's the code, change the text, the date (in two places) and the link. :)
Placement of the code
Ning3 - The code goes in your "Custom Code - End of Page Code box"
Ning2 - The code goes in your "NC custom code box"

<!-- Start ( Ning 2 & 3 ) GEOCOMs Network closing divide & Date count down v3.1 -->
<div class="date-count-down"><BR><a id="date-count-down1" class="button">Close</a><BR><BR><p class="date-count-down-top-big">warning</p>
<script type="text/javascript">
today = new Date(); BigDay = new Date("July 25, 2015"); msPerDay = 24 * 60 * 60 * 1000 ; timeLeft = (BigDay.getTime() - today.getTime()); e_daysLeft = timeLeft / msPerDay; daysLeft = Math.floor(e_daysLeft); e_hrsLeft = (e_daysLeft - daysLeft)*24; hrsLeft = Math.floor(e_hrsLeft); minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60); document.write("There are only<BR> <H4>" + daysLeft + " days " + hrsLeft +" hours and " + minsLeft + " minutes left </H4> Until we close on July 25th 2015<P>");
x$(document).ready(function() {  if(ning.CurrentProfile == null){ x$('BODY DIV.date-count-down').show();  x$('DIV.date-count-down-2, A#date-count-down1.button, A#date-count-down.button').hide();  } if ((ning.CurrentProfile != null)){ x$('DIV.date-count-down-2, A#date-count-down2.button').hide(); if (!sessionStorage.alreadyClicked) { x$('DIV.date-count-down').show();    sessionStorage.alreadyClicked = "true"; } } x$('A#date-count-down, A#date-count-down1').live('click', function(geocom) {      x$('DIV.date-count-down').toggle('show'); }); x$('A#date-count-down2.button').live('click', function(geocom) {      x$('DIV.date-count-down-2').toggle('show'); });
 });
</script>
<p class="your-text">
Click the link below to go to our new website, don't forget to create a shortcut to the new network.<BR><P class="date-count-down-bottom-big"><a href="http://sailing.ning.com/" target="_blank">Click here to go to the New Network</a></p>
</p>
<a id="date-count-down2" class="button">Network Owner/Admin click here</a>
<div class="date-count-down-2">
<form class="form1" action="/main/authorization/doSignIn" method="post" novalidate="novalidate"><input name="xg_token" value="" type="hidden" />
<div class="form-field "><br />
 <label for="signin_email">Email Address</label><br />
 <input name="emailAddress" value="" id="signin_email" class="input-full" type="email" /></div>
<div class="form-field "><br />
 <label for="signin_password">Password</label><br />
 <input name="password" value="" id="signin_password" class="input-full" type="password" /></div>
<div class="form-actions"><input class="button button-primary" value="Sign In" type="submit" /></div>
</form>
</div>
</div>
<a id="date-count-down" class="button">Open network warning</a>
<link rel="stylesheet" type="text/css" href="http://bit.ly/1UAyrqC" >
<!-- End Network closing divide & Date count down -->

Color Customization

You may use these CSS snippets to customize the colors. The CSS goes in your "Design Studio CSS section"

/*! Start customizing Alternative off-line mode */

/*! text color big text top */
BODY P.date-count-down-top-big{
   color: red!important;}

/*! text color big text bottom */
BODY P.date-count-down-bottom-big{
   color: blue!important;}


/*! background & text color main divide */
BODY DIV.date-count-down{
   background-color: rgba(0, 0, 000, 0.9);!important;
   color: white!important;}


/*! background & text color sign-in divide */
BODY DIV.date-count-down-2{
   background-color: rgba(0, 0, 000, 1.0);!important;
   color: white!important;}

/*! End customizing Alternative off-line mode */

[Odino]

Really good job! There is a way to display this without countdown? 

[George H. Compton IV]

Thank you Odino, :)

Here's a copy without the countdown. You have a wonderful day.

<!-- Start ( Ning 2 & 3 ) GEOCOMs Network closing divide no count down v3 -->
<div class="date-count-down"><BR><a id="date-count-down1" class="button">Close</a><BR><BR><p class="date-count-down-top-big">warning</p>
<script type="text/javascript">
x$(document).ready(function() { if(ning.CurrentProfile == null){ x$('BODY DIV.date-count-down').show(); x$('DIV.date-count-down-2, A#date-count-down1.button, A#date-count-down.button').hide(); } if ((ning.CurrentProfile != null)){ x$('DIV.date-count-down-2, A#date-count-down2.button').hide(); if (!sessionStorage.alreadyClicked) { x$('DIV.date-count-down').show(); sessionStorage.alreadyClicked = "true"; } } x$('A#date-count-down, A#date-count-down1').live('click', function(geocom) { x$('DIV.date-count-down').toggle('show'); }); x$('A#date-count-down2.button').live('click', function(geocom) { x$('DIV.date-count-down-2').toggle('show'); });
});
</script>
<p class="your-text">
Click the link below to go to our new website, don't forget to create a shortcut to the new network.<BR><P class="date-count-down-bottom-big"><a href="http://sailing.ning.com/" target="_blank">Click here to go to the New Network</a></p>
</p>
<a id="date-count-down2" class="button">Network Owner/Admin click here</a>
<div class="date-count-down-2">
<form class="form1" action="/main/authorization/doSignIn" method="post" novalidate="novalidate"><input name="xg_token" value="" type="hidden" />
<div class="form-field "><br />
<label for="signin_email">Email Address</label><br />
<input name="emailAddress" value="" id="signin_email" class="input-full" type="email" /></div>
<div class="form-field "><br />
<label for="signin_password">Password</label><br />
<input name="password" value="" id="signin_password" class="input-full" type="password" /></div>
<div class="form-actions"><input class="button button-primary" value="Sign In" type="submit" /></div>
</form>
</div>
</div>
<a id="date-count-down" class="button">Open network warning</a>
<link rel="stylesheet" type="text/css" href="http://bit.ly/1cTKFvd" >
<!-- End Network closing divide no count down -->

[Odino]

Fantastic! Thank you so much! 

[Garfield Archivist]

Question on this: is any kind of html permissible for the page? Can I add images or ideally a video embed?

[Garfield Archivist]

Answered my own question. Yes. Thank you for this modification

[George H. Compton IV]

You're welcome Garfield. :-)  Since your adding videos. I went ahead and updated the stylesheet, I added "overflow-y:auto!important;" so if you're on a cell phone you'll be able to scroll down through all the content.

You have a great day. :-)