JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

How To Customize Sign Up Page - Public Networks and Private (Anyone can apply)

How To Customize / Add Text to Sign Up Page and Example:

Go to Manage/Language Editor, and select your language.
Be sure to give the page time to completely load, to ensure you select the correct language.
MEMBERSHIP APPROVAL NETWORK (this should work for Public/Membership Approval, and Private/Anyone can apply): If your Network has been set to "Approve Members", search on this exact string: "Apply for membership now. If you're already a member, <a %s>sign in</a>." without the quotes.
NO MEMBERSHIP APPROVAL NETWORK: If your Network has NOT been set to "Approve Members", search on this exact string: "Already a member? <a %s>Click here to sign in</a>." without the quotes.
The Ning Directory example uses #3 - Membership Approval Sign Up Page.
You will see a box in the right column that contains the search string you entered. This is where you want to add your custom content.
Add your custom text. Be sure to keep the "Apply for membership now. If you're already a member, <a %s>sign in</a>.", or the "Already a member? <a %s>Click here to sign in</a>." syntax, without the quotes. The safest bet: add your custom text below the special line.
Click on Save.

Test this on a test site first. Be sure to access your Sign Up page on the test site, to see your results.
See attached text/HTML file. It's fairly extreme, but will give you the exact text/HTML it took, to create the Sign Up page on the Ning Directory. You'll notice, I alter the "Apply for membership now. If you're already a member, <a %s>sign in</a>." line.
Bottom line: you can add simple text with HTML attributes, via this Language Editor box. Be sure to keep the original line of code.

I keep my HTML in a file on my computer, tweak and get it ready, then I add to the language
editor.

Good Luck,
Jen

0 members favorited this

Attachments:

AlreadyAMemberSignUpPageTextFORMEMBER_APPROVALSITE.html, 3 KB

Replies to This Discussion

Permalink Reply by JenSocial on May 8, 2010 at 4:03pm

Here's the text file containing my latest signup page edits. This is the raw code that is pasted directly in the language editor. Maybe you can use my code as your example for font size and centering.
Best,
Jen

Attachments:

MemberSignUpPage.txt, 2 KB

Permalink Reply by Neuerotica on May 8, 2010 at 9:19pm

thank you kindly jen! =)

Permalink Reply by Jonathan Wheeler on May 25, 2011 at 1:24am

this is weird I must be doing something wrong because even when I make the log in module wider with the coding you provided and copy the exact member sign up page text you provided I still do not get the coding to show up?

Permalink Reply by JenSocial on June 1, 2010 at 12:58pm

Hi NF,
There's really not a page width setting for an overall HTML page. It's based on each unique CSS element (assigned by the Developer), for example, like the Ning sign-up page. In other words, what would work on that page, wouldn't necessarily work anywhere else.

In simple HTML you can set the width of a DIV. So if you wrap your entire content within the DIV, that's the best way to assign the width of elements or blocks of content.

I looked at my CSS, and this is all I documented:

/* Make the SignUp Box Wider */
#xg.account {width:715px; margin-left:-355px;}
#xg.account #xg_body {width:730px;}
#xg.account .xg_module {width:703px;}
/* End SignUp Box Width */

Hopefully that's all you'll need.
Best Regards,
Jen

Permalink Reply by JenSocial on June 1, 2010 at 2:57pm

LOL, I needed that, believe or not. ;-) Thanks B. My little Westie (doggie) is ill, and makes me a nervous nutcase.

Hope that works for you,
Jen

Permalink Reply by Forbes on June 4, 2010 at 12:03pm

how do insert my network logo on it?

Permalink Reply by JenSocial on June 4, 2010 at 12:42pm

You will need to upload your logo image from a Blog or Discussion, by clicking on the camera/photo icon. Then, use that path and add your URL/link, like you would for any HTML link wrapped around an image.

In case you don't know how to add a link to an image in HTML, here's a tutorial:
http://jensocial.com/group/ningnetworktips/forum/topics/how-to-add-...

Hope that helps,
Jen

Permalink Reply by Forbes on June 5, 2010 at 5:19pm

it doesnt work for me.

Permalink Reply by JenSocial on June 5, 2010 at 10:16pm

Sorry Forbes.

Permalink Reply by Forbes on June 9, 2010 at 1:59pm

Finally,it works for me.Thanks!

Permalink Reply by moparcars on July 30, 2010 at 3:15am

Hallo dear Jen, do you think it is possible to use the the Network default " Header Image " in case to costomize the SIGNUP page ? /* Make the SignUp Box Wider */ #xg.account {width:715px; margin-left:-355px;} #xg.account #xg_body {width:730px;} #xg.account .xg_module {width:703px;} /* End SignUp Box Width */ and add this code to this CSS Change maybe ? like for example USE "

#xg_head { background: transparent url( http://api.ning.com/files/UdauXWMfkjBUEDHqWcIpJcwbGcOfu3trkMizNp-Uv...*NLkZoOjmf*fS3lBog__/kenyasafariholidays_header1.jpg);background-repeat: no-repeat;background-position:left; } _
instat of adding the header image into the Language Editor Section ( see _http://kenyasafariholidays.ning.com/main/authorization/signUp? ) Will be great if you might has and idea , how to use the default header image , for SIGN-UP PAGES and also for SIGN-IN PAGES ! Regards/Juergen

Permalink Reply by JenSocial on July 30, 2010 at 12:25pm

Hi Juergen,
No, unfortunately, the only way you can display a header image on the SignUp page is by adding a background image to the "body". And that image will show on all pages, if that makes sense. There are no other classes you can use on that page. This is definitely something Ning needs to improve, and I have complained about before.
Best,
Jen