Boilerplate: Sign Up / Sign In Box For Ning 3.0

[SweetPotato]

Hello everyone,

Following up from a few comments about sign up / sign in boxes being absent from Ning 3.0, I thought I'd put together a simple boilerplate example for you to use and adapt.

Here's a screencap:

Here it is in action: here, here, and here.

As you can see, I have included five social buttons that at present link to the Sign Up page. You will be able to change these in the html below.

Instructions:

1. Open Social Site Manager and create an HTML box in Site & Pages and put it in the column that you want, eg
   
   Click to Enlarge
2. Insert the following html (also attached below) and change the highlighted red wording to your own and the green urls to an appropriate domain. Update and Save.
   
   <div class="SP_sign_up">
   <h4>Welcome to Network Name</h4>
   <div class="SP_sign_up_button"><a href="http://networkname.ning.com/main/authorization/signUp?">Sign Up</a></div>
   <div class="SP_sign_up_in">
   <p>Already a member? <a href="http://networkname.ning.com/main/authorization/signIn">Log in</a></p>
   </div>
   <div class="SP_sign_up_external">
   <p>You can also use these:</p>
   <ul>
   <li><a target="_self" href="http://networkname.ning.com/main/authorization/signUp?"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11491680?profile=original" width="128" /></a></li>
   <li><a target="_self" href="http://networkname.ning.com/main/authorization/signUp?"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11491704?profile=original" width="128" /></a></li>
   <li><a target="_self" href="http://networkname.ning.com/main/authorization/signUp?"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11491685?profile=original" width="128" /></a></li>
   <li><a target="_self" href="http://networkname.ning.com/main/authorization/signUp?"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11491689?profile=original" width="128" /></a></li>
   <li><a target="_self" href="http://networkname.ning.com/main/authorization/signUp?"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11491694?profile=original" width="128" /></a></li>
   </ul>
   </div>
   </div>
3. Insert the following css (also attached below) into your Custom CSS section in the Design Studio (you CSS gurus out there can amend to your heart's content, i've kept it simple for now). Press Publish:
   
   .SP_sign_up{
   text-align:center;
   background:#fff;
   border-radius:3px;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   padding:10px 0;
   }
   
   .SP_sign_up h4{
   font-weight:bold;
   }
   
   .SP_sign_up_button{
   padding:7% 10%;
   }
   
   .SP_sign_up_button a{
   color:#333;
   font-size:16px;
   border-radius:3px;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   padding:5% 15%;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F8F7F7), color-stop(1, #ECEBEB));
   background:-moz-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
   background:-webkit-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
   background:-o-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
   background:-ms-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
   background:linear-gradient(to bottom, #F8F7F7 5%, #ECEBEB 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F7F7', endColorstr='#ECEBEB',GradientType=0);
   background-color:#F8F7F7;
   border:solid 1px #c9c9c9;
   }
   
   .SP_sign_up_in p{
   font-size:12px;
   }
   
   .SP_sign_up_external{
   text-align:center;
   }
   .SP_sign_up_external ul{
   padding: 0;
   margin:0;
   }
   
   .SP_sign_up_external img{
   max-width: 15%;
   }
   
   .SP_sign_up_external li{
   display: inline;
   list-style: none;
   padding: 2px;
   }
   
   .SP_sign_up_external > p {
   font-size: 10px;
   }
4. If you want to hide this from logged in members then include this script (also attached below) in the 'End of Page Code' in Custom Code in Social Site Manager.
   
   <script type="text/javascript">
   if (ning.CurrentProfile != null)
   x$('.grid-frame.sheet.section-html:has(.SP_sign_up)').hide();
   </script>
5. Repeat Steps 1 and 2 for any pages that you want the Sign Up box to appear on.

I have designed this to be responsive. The social sign in icons will be larger in a one column layout on mobile, for example.

I have kept the social sign in links to the the generic sign up box at present but if you know your social sign in urls then I see no reason why you can't amend the html above.

I have added five icons. Please delete those that you don't use (the pink code <li> </li> is an icon item). If you want to add other icons then I have used the icon set here.

Enjoy!

SP

[Kos]

Great signup/signin box SP.  Many have been looking for this in 3.0 and they'll love the ability to tweak the wording.  Thank you for sharing.

[Patrick Chappelle]

This is really nice! I especially like the large icons, it was one of my peeves with the ones on our 2.0.

I don't plan to use native sign-up/sign-in, so how would that code of yours look without it?

[SweetPotato]

You could easily remove the native sign up button and just retain the social icons, although you'd need to know the urls or each social sign in. I'm off on holiday for a week but can take a look when I return if you need me to.
SP

[⚡JFarrow⌁]

Nice work SP

[SweetPotato]

*blushes*

[SweetPotato]

*blushes*

[SweetPotato]

you're welcome, John

[SweetPotato]

you're welcome, John

[Andre Lacerda]

Awesome

[Suzie Nielsen]

Awesome SweetPotato!

You solved a problem for me! I had a banner up top that was covering my sign up in nav bar!

Now before I add this I have one question! (of course!)

Anyway am I reading this right?-is that pink code the yahoo sign in code? That is one sign in I do not have... so just wanted to make sure... That is all I wish to remove...

Thanks, Suzie

[Hamo Geek Girl]

Wow.. very nice. Works perfectly! :)

[mobile.ning.com]

Great TIP, SweetPotato.

Here is mine implemented, across all my Job Boards. http://mobile.ning.com/communities