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!


Views: 3811

Replies to This Discussion

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.
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
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)
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
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!
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.
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/
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
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

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 ?

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

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

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips