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: 2270

Replies to This Discussion

Permalink Reply by Kingdomz X Heavy Metal Ent. on September 23, 2011 at 9:38am

Beautiful! Works like a charm! 

 

Thanks Jen!

Permalink Reply by mcauly on October 27, 2011 at 6:39pm
Jen, is there anything of this sort for private sites? I'm looking to highlight the "New? Click here to join" since a lot of potential members are not seeing this and end up trying several times to sign in without realizing they need to sign up first. Any suggestions would be appreciated. THanks!
Permalink Reply by JenSocial on October 27, 2011 at 9:08pm

mcauly,

I see that you have added to the Signup page. Are you good?

Best,

Jen

Permalink Reply by Sports-Glory on January 21, 2012 at 12:53pm

How do you do a Sign In button?

Permalink Reply by JenSocial on January 22, 2012 at 12:07pm

I don't have a tip for sign in. It seems there was a reason, but I forget what it was to be honest.

Best,

Jen

Permalink Reply by Elliott Verreault on March 5, 2012 at 3:45pm

I tried the code, I managed to get the button to show but the text "Sign Up" remains in front of the button instead of being replace by the button. Any tips?

Permalink Reply by JenSocial on March 6, 2012 at 12:24pm

Elliott,

Make sure you have this line of code:

text-indent:-9999em;

And you may want to change that to -9999px!important;

Best Regards,

Jen

Permalink Reply by Elliott Verreault on March 6, 2012 at 1:18pm

Hi Jen, thanks for the reply. This is what I am getting though (no change with the new code).

For some reason the logo and the text link are not centred anymore and the image is truncated (130x30 pixels)

This is the code I have:

div.xg_signup big strong a {
background:url(http://api.ning.com:80/files/6XX*3IwYkDB6*WrrwHZXxRRpHFwolXKjFrR79vHZavEarOpJkaGn*6UBGVx88mXTINl0rpixn1l0riF8fDKBBtkOGZ7hJ8bh/SignUpButton.png) no-repeat scroll center top transparent;
display:block;
height:30px;
margin-left:auto;
margin-right:auto;
text-indent:-9999px!important;
width:130px;

_

_

_

_

_

_

Any idea?

Permalink Reply by JenSocial on March 6, 2012 at 1:50pm

What is your site link?

Permalink Reply by Elliott Verreault on March 6, 2012 at 2:57pm

http://itsonehumanity.org

Took it off now though, can't leave it the way it was.

Permalink Reply by JenSocial on March 6, 2012 at 3:17pm

Hi Elliott,

I guess I can't help. I went to your site and used Firebug with this code, and it worked beautifully. So I don't know what's going wrong.

div.xg_signup big strong a {
background:url("http://api.ning.com:80/files/6XX*3IwYkDB6*WrrwHZXxRRpHFwolXKjFrR79vHZavEarOpJkaGn*6UBGVx88mXTINl0rpixn1l0riF8fDKBBtkOGZ7hJ8bh/SignUpButton.png") no-repeat scroll center top transparent;
display:block;
height:30px;
margin-left:auto;
margin-right:auto;
text-indent:-9999px!important;
width:130px;

}

Best,

Jen

Permalink Reply by Elliott Verreault on March 6, 2012 at 4:02pm

Copy-pasted the code you posted there and it worked for some reason. I noticed I had put (url) instead of ("url"). Perhaps that was the problem?

In any case, really happy to see it working now! Many many thanks for that Jen!

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips