JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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://storage.ning.com/topology/rest/1.0/file/get/8330217?profile=original")
no-repeat scroll 3px 50% transparent!important;}

/* Member Page Online Indicator Replacement - - smaller image */
div.member_item .online {
background:url("http://storage.ning.com/topology/rest/1.0/file/get/964769758?profile=original")
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://storage.ning.com/topology/rest/1.0/file/get/964769758?profile=original")
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

3 members favorited this

Attachments:

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

Replies to This Discussion

Permalink Reply by Administrator☼JenSocial 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 Administrator☼JenSocial 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