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!


Views: 4273

Replies to This Discussion

Permalink Reply by JenSocial on March 9, 2012 at 1:04pm

Great, happy to hear it!

=)

Permalink Reply by Neuerotica on June 13, 2012 at 11:53pm

Seems I'm on a roll this week, I made my own flashing sign up button, in conjunction with this tip. =)

Permalink Reply by JenSocial on June 14, 2012 at 12:23am

Sa-weet!!!!! Great job, you are on a roll. That is just plain cool!

Permalink Reply by Neuerotica on June 14, 2012 at 12:25am

Thanks! =)

Permalink Reply by 7H on August 26, 2012 at 4:01pm

Once again, Jen, 

Thank you for a tip that is working well.

Our site has benefited greatly from your tips; we're so glad we invested in your Premium Tips for the year!

Holly 

[http://englishworldwide.ning.com]

Permalink Reply by JenSocial on August 26, 2012 at 5:11pm

Hi Holly,

Thanks for the awesome feedback, really appreciate it. And very happy the VIP Club tips have helped your site.

Best Regards,

Jen

Permalink Reply by Joshua Anyaoha on October 10, 2012 at 10:29pm

Dear Jen or Debbie may I use any of these sign up buttons for my site for free?

Permalink Reply by JenSocial on October 12, 2012 at 10:16pm

Sure, Joshua. All public tips are for anyone to use and enjoy. Thanks for asking!

RSS

Latest VIP Ning Tips!

Hover Links for Preview

» shhhh, Huge Ning Designer Secret - - Insert Simple HTML at Top of List Pages: Blogs, Events, Forums, Groups, Photos, and Videos.

» Make Home Page Photo Module Stand Out

» Professional Splash Page Template (Landing Page) - Pro Accounts

» Beautiful Coda Content Slider for Ning Networks

» Move Group Pages Module To Top

Blog Posts

Hi Everyone!

Posted by JenSocial on May 7, 2018 at 8:35pm 9 Comments

Message from Ning CEO - January 4, 2017

Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments

New Ning 3.0 Feature! Add Slideshow to Photo Module

Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments

Good Riddance Mode Media! Exciting News About Ning + Cyndx LLC

Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments

Ning RAISING RATES for Ning 2.0 sites

Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments

Members

Latest Ning Tip

Blogcentric Sites - Add "Read More" to Blog Titles - Ning 2.0

Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)

Lucid Car

Discussion Forum

Mp3 player for Ning 3.0 - created by me

Started by Themes - Rosas Negras Mar 20, 2021. 0 Replies

Add Member Account Box Links/Notifications to NingBar and Hide Account Box - - Saving Space Above Fold (Collaborative Efforts: Jen and Elson)

Started by JenSocial. Last reply by Kos Dec 6, 2016. 64 Replies

Add Footer like Creators.ning.com (Great example of a JenSocial VIP Tip!)

Started by JenSocial. Last reply by JenSocial Jul 26, 2016. 41 Replies

Trending on JenSocial 

1 Hi Everyone!

Hi Everyone!
2 Mantra for healing | Om Tare Tuttare with Katja

Mantra for healing | Om Tare Tuttare with Katja

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips