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


Views: 4020

Replies to This Discussion

Happy you like it!
Wonderful- thank you!
Happy you like the tip!
Hi Jen, I tried every suggestion you have in here, but nothing worked for my site. I tried getting html from my blog and pasted it in the code just like you said it didn't work. Then I tried uploading the sign up pic to photobucket and get the HTML code, it didn't work either. I tried copy-pasting everyone's code from this discussion but nothing worked. me. Thanks /*** Custom Sign Up Button ***/ div.xg_signup big strong a { background:url(*OQVPQTGA-0AK57OmCLXpLgMr4pUAk*1SR73SW70SO*SWr7AJtc*FJ62TDnn8Jnio1zoT2/20101008_0901.png) no-repeat scroll center top transparent; display:block; height:38px; margin-left:auto; margin-right:auto; text-indent:-9999em; width:159px; } I also used this----- _" target="_blank">
and also the codes that other members suggested. I wonder what am I doing wrong... :(
Hi Truth Or Dare Café,
I'm not sure if anything is wrong with your code or not. It appears that the comment box inserted a bunch of underscores, which if that were actually in your code, it would not work. If you are using the code you've shown here, without the underscores, it should work fine. Here's one thing to look for - - if you sign out and don't see the button, it could be that the Ning Cache hasn't updated the signed out version yet. Wait about 30 minutes, and look again. I will attach your code without the underscores, in a text file.

Just checked your site, and it appears to be private. This wouldn't apply to a private site, because the box wouldn't show since the home page is hidden.
thank you jen

Thanks for another one, eventually I'll hit every tip you've got! LOL    The pink Join Now was perfect for my site!

I added a line in language editor right above it "Membership is Free".




Definitely perfect for your site. Thanks for the feedback!
Cool love the pink

This really does look great

I having trouble with this for some reason. (note - i did install the tip to remove the number of members from sign up page does that effect this tip?)  I've uploaded the image to image shack and it's not working any solutions? 


Also there is a border around my user photos and my sign up box that is pink how do  I change it? 


Jay Frye 


Hi Jay,

No, the other tip shouldn't impact this one. Please email me the code you tried, or upload as text file here.


I'm not sure where the pink is for user photos, but this should take care of both:

.xg_theme .xg_lightborder {border-color: #003366!important;}

Change the 003366 to color of your choice. And CRITICAL NOTE: Apparently you have an error at bottom of your CSS. I had to add this code to top of your CSS. And that's probably what went wrong with the Sign-Up button too.


Best Regards,




© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips