How to Add a Sign Up Button to Sign Up Box

One of the first things a potential new member will see on your site is the top right Sign-Up Box. You only see this box if you're signed out, or not a member. Below are two images: (1) An example of a default Sign Up Box and, (2) The same box with a special image button and padding.
Sign Up BoxSign Up Button


A great way to grab attention to the Sign Up Box is with a custom Sign Up Button, as shown in example above - Sign Up.


Steps To Add Special Sign Up Button:

  1. Create your button. The button does not need to be wider than 150 pixels. A great size is approximately: 142 pixels wide by 38 pixels in height
  2. Upload your image via a Blog, with Insert Image (picture or camera icon).
  3. Click on the HTML tab to grab your image path.
  4. Copy the image path/URL (Ctrl + C), starting with http//api.ning and ending with .jpg, or whatever the file extension is of the image you uploaded. The example uses a .png file.
  5. Edit the code below, by replacing the word "yourimage", with your image URL.
  6. WARNING: IF YOU USE A BUTTON MUCH LARGER THAN EXAMPLE, YOU WILL SEE 2 BUTTONS, AND A BIG MESS. If this happens, remove the custom code and try again.
  7. /*** Custom Sign Up Button ***/
    div.xg_signup big strong a {
    background:url(yourimage) no-repeat scroll center top transparent;
    display:block;
    height:38px;
    margin-left:auto;
    margin-right:auto;
    text-indent:-9999em;
    width:159px;
    }
  8. Add the code to your custom CSS via My Network/Settings/Appearance/Advanced.
  9. Save your CSS.
  10. Done.
  11. Sign out of your Network, to see the new button. Check it in several browsers to make sure it is displayed correctly, and that the link works properly.
Here are some buttons I created just for our members and visitors of JenSocial. Feel free to use any. Please use them, but don't distribute. Share the link. ;-)

Custom color and font for same button - $20. Custom button, color and font, request quote. Contact Jen for Custom Order.


Enjoy!


Tags: add image to sign up, add image to sign-up, sign up, sign up box, sign up button, sign-up, sign-up box, sign-up button, signup

Views: 2227

Replies to This Discussion

Permalink Reply by Administrator JenSocial on July 24, 2010 at 8:30am
Seems like the http//api.ning and ending with .jpg, code is too long, so I used Tinypic Direct Link for Layouts. Why doesn't api.ning.com work on my site? I used the green sign up button but will not show.
Permalink Reply by JenSocial on July 24, 2010 at 9:45am
Hi Deborah,
It's there. You have to sign out to see it, since it's for Sign Up. Your theme is causing a little issue with image showing in far right, where it shouldn't. Just change the width in CSS to:
width:144px;

And, the Ning path should work on your site, not sure what's happening with that. Next time it happens, holler at me and I'll take a look.
Best,
Jen
Permalink Reply by Administrator JenSocial on July 24, 2010 at 10:58am
My url code only had a line partly Like a broken link

(http://api.ning.com/files/LQ9JR3N*Ol*Zj4kbLwNObUII*R-Grmv0pE6Wa52ommXUJ36hKKQshio9IaujtzQ14q87Pr79XqvcEEpRWeuzssD1rydPEfh6/signup_blue2.png)__http://api.ning.com/files/LQ9JR3N* ( this code is active)_____________________________________________________________________________*Ol*Zj4kbLwNObUII*R-Grmv0pE6Wa52ommXUJ36hKKQshio9IaujtzQ14q87Pr79XqvcEEpRWeuzssD1rydPEfh6/signup_blue2.png (This is not active)
Permalink Reply by www.overtone.cc - Jens on September 17, 2010 at 3:49pm
Another way to upload an image which shall be used in the Advanced CSS box can be via webdav. If you requested NING for a webdav access you can create an own folder for images and upload these into this folder ... eg. http://yournetworkname.ning.com/images/sign-up-box.jpg
Permalink Reply by JenSocial on September 17, 2010 at 5:11pm
The only problem with that Jens, Ning no longer gives new access via webdav. I practically begged for a recent Client, and they wouldn't do it.
:-(
Hope you're having a good day,
Jen
BTW, great job you did on your site Search!
Permalink Reply by www.overtone.cc - Jens on September 18, 2010 at 2:27am
no access via webdav .... NING gives me more and more reasons why I will use them maybe not longer than one one year. I requested different points from or to them with out a (or with a qualified) reply.



Maybe works this. You can shorten the URL with tinyURL.com and give your shorten URL an own name:

http://tinyurl.com/sign-up-jpg


But this works too:

http://tinyurl.com/2bku8j4


I mean this is no "must" to shorten and to custom a shorten URL. The tinyurl is enough. You can try to use of course bit.ly or the NING status box to shorten the URL

The benefit of this option: you can save a lot characters in your Advanced CSS box and maybe the URL will not be broken again.
Permalink Reply by www.overtone.cc - Jens on September 18, 2010 at 2:49am
The question is ... if this shorten URL works in a Advanced CSS box.
The answer is YES. I tried it with:

http://api.ning.com/files/lghgV5PvUy6x*16QaWqROzH0*7XfSYjMF3LtZ-PWSyinds7DEqYt1HEMbWTAiy9iPNJFZ1wjiQBDSW71yxOlPTZ3ZI-DBH97/Ayurveda_Header.jpg?width=955&xn_auth=no&type=jpeg

to replaced it with that tinyURL: http://tinyurl.com/ayurveda-community-banner

You can check this image added with this shorten URL here: http://www.ayurveda-community.net/
Permalink Reply by JenSocial on September 18, 2010 at 12:27pm
Thanks Jens! I missed that Deborah wrote that she was having this issue. This is what happens often, and why I provided the images at the bottom of discussion - - the long URL image paths get translated incorrectly (broken link) within these comment boxes. One way to get around it without having to save to local computer, uploading via blog or text box, copying path, etc... a person could right-click on one of the images, "view image", and grab (copy/paste) that image path from the browser address bar.

Yes, the WebDav thing or topic makes me crazy. They stopped giving access to new networks quite some time back, maybe a year ago? I just pray the ones who currently have access don't lose it. I have to say, if that happens I will no longer be on Ning. :( And the reason I make this kind of harsh statement, I have too many files that I HAVE to get to, and if I couldn't reaccess them, I'd have a difficult time maneuvering everything, and it just wouldn't be worth it. I will report this: Ning is working on some type of solution where simple image and HTML/text files can be hosted/stored via our Ning Networks.

Have a wonderful weekend! BTW, loved your facebook photo of you outside with mountains behind you, such a nice photo. :-)

Best,
Jen
Permalink Reply by JenSocial on September 20, 2010 at 5:24pm
Finally! Not exactly what I was wanting, need standard FTP file uploading. But, still a fantastic feature for Ning Networks!
Add a Splash page using new File Manager for those who do not have WebDav:
http://creators.ning.com/forum/topics/the-new-file-manager-upload
Permalink Reply by Muyiwa Owen on April 4, 2012 at 3:08am

i have tried it over and over its not working for me......

secondly, should i send you my ning user name and password if you can help with some touches ?

Permalink Reply by JenSocial on April 4, 2012 at 11:12am

Hi Muyiwa,

If you need custom design touches, I can offer an estimate via my Design Firm:

http://www.ningcustomdesign.com/

On this tip, I haven't tested this in so long, wondering if it still works. One thing to know, when you make a change like this and signout to see if it works, it can take up to 20 minutes for the signed out version to catch up with the signed in version. If you provide your site URL I'll try via firebug and see if it "takes".

Best Regards,

Jen

Permalink Reply by Muyiwa Owen on April 21, 2012 at 9:16am

hi jen can i send you my network's username and password? if you can help me with the sign up button and more tips

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips