Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...

VIP Ning Club
About VIP

~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!
Join Now!
Directory

Social Network Directory
Network HELP

Friends helping friends...
Free Ning Tips

Free Ning Network Tips

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.

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:

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
Upload your image via a Blog, with Insert Image (picture or camera icon).
Click on the HTML tab to grab your image path.
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.
Edit the code below, by replacing the word "yourimage", with your image URL.
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.
/*** 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;
}
Add the code to your custom CSS via My Network/Settings/Appearance/Advanced.
Save your CSS.
Done.
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

Favorite

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on April 21, 2012 at 4:24pm

Muyiwa,

If you need custom work, please contact me via website above, or here:

http://jensocial.com/page/contact-us-visitor-form

Please be specific on what you need, and I will provide an estimate.

Thanks,

Jen

Permalink Reply by Global Illumination Council on July 24, 2010 at 8:51am

I used the blue one and uploaded it to photobucket. Used the url link they created for it. put it all at the end of the code in Advanced and it worked first try. thanks :-)

Permalink Reply by JenSocial on July 24, 2010 at 9:42am

Very nice!

Permalink Reply by Magic Happens on July 24, 2010 at 9:41am

Oh! Jen, It is beautiful, l love it and l did it right. Thank you. l love it.
l did up load my button image--blue one--to my image hosting site and put it in the URL.

l love it. Thanks

Permalink Reply by Carny Town on July 24, 2010 at 10:13am

Doesn't seem to work for me. Take a look, please, Jen.....Tom

# /*** Custom Sign Up Button ***/
div.xg_signup big strong a {
background:url (http://api.ning.com/files/LQ9JR3N*Ol*Zj4kbLwNObUII*R-Grmv0pE6Wa52ommXUJ36hKKQshio9IaujtzQ14q87Pr79XqvcEEpRWeuzssD1rydPEfh6/signup_blue2.png) no-repeat scroll center top transparent;_display:block;_height:38px;_margin-left:auto;_margin-right:auto;_text-indent:-9999em;_width:159px;_}

Permalink Reply by JenSocial on July 24, 2010 at 10:19am

Hi Tom,
Yeah, I don't see anything. It could have to do with S4N, but I doubt it. Can you add your code to a text file and upload? The image URL is getting messed up in the Ning discussion box.

I'm walking out door, but when I return I'll take a good look at this.

Best,
Jen

Permalink Reply by Successful Women Network on July 25, 2010 at 5:43pm

uhh I so could hug you right now!!! lol great tip and it works! Thanks Jen you ROCK!

Permalink Reply by JenSocial on July 26, 2010 at 2:20pm

Happy to hear you liked it.
;-)

Permalink Reply by Successful Women Network on July 26, 2010 at 3:00pm

oh I do!!! Thank you so much :)

Permalink Reply by Debbie Admin on September 18, 2010 at 5:31pm

@ Tom ~ When this happens I have uploaded the pic to TinyPic
Give it a try and see how you go

Best
Deborah

Permalink Reply by JenSocial on August 4, 2010 at 12:48am

More new Sign-Up Buttons added!

Permalink Reply by funflowingmusik on September 17, 2010 at 7:21pm

awesome ty i love your site!

RSS

Welcome to
JenSocial: Social Network Directory / Social Web Directory

Sign Up
or Sign In

Or sign in with:

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

JOIN NOW!

Join the JenSocial Premium Ning Tips Club

All the work/tips created on JenSocial.com are provided free, but your donations allow me to continue offering Free Support, Tips, News, and free Directory Listings. Any amount is greatly appreciated.


Twitter	Facebook

Welcome to JenSocial Network Directory: Social Network Directory and Network Creator Hub for all Social Networking platforms:
Ning, Spruz, SocialGO, Grou.ps, JomSocial, BuddyPress, WackWall, etc...

Formerly the Ning Directory

Add Your Social Network, Find, Preview and Join, all kinds of great Social Networks (Social Communities) - - from Art to Pets!