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

Replace Online Indicator (little green light) with Animated Gif

There are 2 images that are needed to replace the online indicator (little green light), with animated images. The smaller image without the text is needed for the Profile Pages and the Main Member page.
Replace this image:

With this image for Home Page (must have large thumbs selected to see indicator):

And this image for main Member Page and Profile Pages:

Add this code to your Manage/Appearance/Advanced CSS:
/* Home Page Online Indicator Replacement */
.module_members .online {
background:url("http://api.ning.com/files/AMFPVVpDCyWNCLuQ2QdI5otWdjWWWZnTAdtO3zs7sokQYIiZUvioTsUigw0HiNEtSCyFqRMJrWIkhzCyRWofgIdYDl5A33Bj/onlinenow.gif")
no-repeat scroll 3px 50% transparent!important;}

/* Member Page Online Indicator Replacement - - smaller image */
div.member_item .online {
background:url("http://api.ning.com/files/jid24Vj4tgAs5SZRGTrVNHKvIWuw-Wov9rznHwXki8*mZaMYCDuLiNnhdllhBQu5qwhjBdDDb7ftAXsZVg3L6jkQVKYUizHb/onlinenow_small.gif")
no-repeat scroll 0px 50% transparent; width:20px;height:20px;}

/* Profile Pages Online Indicator Replacement - - smaller image */
div.xg_widget_profiles_profile .online {
background:url("http://api.ning.com/files/jid24Vj4tgAs5SZRGTrVNHKvIWuw-Wov9rznHwXki8*mZaMYCDuLiNnhdllhBQu5qwhjBdDDb7ftAXsZVg3L6jkQVKYUizHb/onlinenow_small.gif")
no-repeat scroll 0px 50% transparent!important; width:20px;height:20px;}

Important Note:
Since I uploaded these images via a blog on my Ning, your safest bet is
to upload the images on your Ning, re-upload via a blog, and change the 2
image paths in the CSS. The first line of CSS is for home page and uses
the image called: onlinenow.gif
The other 2 lines of CSS are for the member page and profile pages, and
uses the image called: onlinenow_small.gif. I have uploaded both
images.

For the smaller version I created this fading on/off star. Feel free to use it.

And, here are 2 more I created:

Just right-click on any of these images, and save to your hard drive. Then, upload via a Blog or comment, from your site. Copy paste the image URL to the CSS. For all of these you may have to add height and width. For example for the 2nd one, you would need width:45px!important;

Have fun,
Jen

Tags: green light, indicator, online, online image, online indicator, replace online image, replace online indicator

Favorite

1 member favorited this

Attachments:

onlinenow.gif, 1 KB
onlinenow_small.gif, 1 KB

Replies to This Discussion

Permalink Reply by Debbie Admin on April 10, 2010 at 6:38pm

Very easy to set up Thanks fantastic tip

I loaded all the graphics to Tinypic and it works Brilliant

Permalink Reply by JenSocial on April 10, 2010 at 7:32pm

Glad you liked it! It was inspired by a member (misswings) question on the Ning Creator site.
;-)

Permalink Reply by Magic Happens on April 10, 2010 at 7:47pm

As where in the css do this go, at the beginning, at the middle or the end. You know me, l am all butterfingers. Thanks. As always you are a angel.

Permalink Reply by JenSocial on April 10, 2010 at 7:48pm

Probably the safest place is at the very bottom.
;-)

Permalink Reply by Magic Happens on April 10, 2010 at 8:00pm

Thanks, :-)

Permalink Reply by EPNetwork on April 10, 2010 at 11:15pm

I'd tried it to my network and its work good and fine, but there is no effect on the members profile page, thanks anyway jen.. its so nice to have such little changes to my network!

-cheers

Permalink Reply by JenSocial on April 10, 2010 at 11:43pm

I've tried on/off for an hour or so. I just can't get why it's not working for profile pages. I got it working here, by adding the !important - - but it's only working in FireFox.

I'll try again Monday afternoon, gone most of Sunday until midday Monday.

Best,
Jen

Permalink Reply by JenSocial on April 13, 2010 at 10:23am

Please see corrected code above. Replace your profile page code start text with:
div.xg_widget_profiles_profile .online

Permalink Reply by Debbie Admin on April 13, 2010 at 3:42pm

Funny how three letters makes the difference

Thanks JEN

Permalink Reply by JenSocial on April 14, 2010 at 1:55pm

awww, what a nice thing to say. Thank you Deborah! I feel the same about all you've done for the site!
:-)

Permalink Reply by yobab on April 11, 2010 at 1:03am

Thanks this is useful ...

Permalink Reply by Social Club Lounge on April 12, 2010 at 2:45am

Thank You!!!!! I love it, it worked perfectly!

‹ Previous
1
2
3
Next ›

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!