Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • 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.

  • 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?

    • NC for Hire
      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
  • NC for Hire

    Nice work SP

  • This reply was deleted.
  • This reply was deleted.
  • Awesome

  • 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

  • Wow.. very nice. Works perfectly! :)

  • Great TIP, SweetPotato.

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

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

J.Ayvar replied to J.Ayvar's discussion
Hide Search Box Ning 3
"Thank you Sir Bizz. You always helping us to improve our proyects."
4 hours ago
Bizz replied to Scott Bishop's discussion
Read more... link
"Sometimes this does happen and I usually put it down to Ning working on stuff in the background…"
7 hours ago
Scott Bishop replied to Scott Bishop's discussion
Read more... link
"Well that's odd. It suddenly not there anymore. It's been there since I switched to N3 several…"
10 hours ago
Bizz replied to J.Ayvar's discussion
Hide Search Box Ning 3
"This will remove that search option, just add it to your design studio custom css
.ningbar…"
11 hours ago
Bizz replied to Scott Bishop's discussion
Read more... link
"I have looked at this image but don't see the Read More.. part. Do you have a link to this page in…"
11 hours ago
J.Ayvar posted a discussion
Hello, Is there any tip to hide the search Box .thanks!!
16 hours ago
Netherlands Food Partnership updated their profile
16 hours ago
TJ @ jQueryHelp replied to Scott Bishop's discussion
Help Needed Quick!
"I'm glad it worked out for you; I love a happy ending! 😀
Good advice on editing anything on Ning or…"
23 hours ago
Scott Bishop posted a discussion
At the top left corner of all our photos on a .com/photo/... page, there is a link that says "Read…
yesterday
Scott Bishop replied to Scott Bishop's discussion
Help Needed Quick!
"Thank TJ! - I realized after slapping myself in the forehead that my older N2 site actually still…"
Sunday
TJ @ jQueryHelp replied to Scott Bishop's discussion
Help Needed Quick!
"I don't see your N3 site, but found your N2 site…"
Sunday
Bizz replied to Scott Bishop's discussion
Help Needed Quick!
"Yes thats correct, you can make any page the homepage by checking that box with no need to add…"
Saturday
More…

Meanwhile, you can check our social media channels