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 JenSocial on September 21, 2010 at 10:04am
Happy you like it!
Permalink Reply by Devon Zone on September 21, 2010 at 3:14am
Wonderful- thank you!
Permalink Reply by JenSocial on September 21, 2010 at 10:04am
Happy you like the tip!
Permalink Reply by Truth Or Dare Café on October 7, 2010 at 9:41pm
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. Pls.help me. Thanks

/*** Custom Sign Up Button ***/
div.xg_signup big strong a {
background:url(http://api.ning.com/files/FSQBKEKold56s2sVt0aPFstIXG*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----- http://s496.photobucket.com/albums/rr328/wrendelladams/?action=view..." target="_blank">
and also the codes that other members suggested.

I wonder what am I doing wrong... :(
Permalink Reply by JenSocial on October 9, 2010 at 12:05am
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.
Best,
Jen

Update:
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.
Attachments:
Permalink Reply by esvareeDOTcom on October 10, 2010 at 9:01pm
thank you jen
Permalink Reply by GirlRiders on July 20, 2011 at 5:27pm

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

 

 

 

Permalink Reply by JenSocial on July 20, 2011 at 6:06pm
Definitely perfect for your site. Thanks for the feedback!
Permalink Reply by Administrator JenSocial on July 21, 2011 at 12:03am
Cool love the pink
Permalink Reply by Kris Olivera on November 20, 2011 at 8:35am

This really does look great

Permalink Reply by Jay Frye on July 29, 2011 at 8:36am

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 

www.NFLOT.COM

Permalink Reply by JenSocial on July 29, 2011 at 11:18pm

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,

Jen

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips