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 {
no-repeat scroll 3px 50% transparent!important;}

/* Member Page Online Indicator Replacement - - smaller image */
div.member_item .online {
no-repeat scroll 0px 50% transparent; width:20px;height:20px;}

/* Profile Pages Online Indicator Replacement - - smaller image */
div.xg_widget_profiles_profile .online {
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

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,

Views: 2192


Replies to This Discussion

Ha thats very cute Jen. Much more fun than the little green light. Thanks.
Happy you all like it. I still need to work on the profile pages, it's not working except in FireFox. At least for me, that is. I'll fix it tonight.
This can also be done by replacing the words "online now" in the language editor with the html code for the picture...although, it is anyone's guess how long we will be able to access the language editor....
Thanks RC.


I tried this code, and it's working for me. Make sure you test at top of CSS in case you have error at bottom of your code. I do notice this, and it may be noted above in original tip:

1. You cannot see your own Status Indicator on your page, only others. This is how the feature works on Ning.

2. You cannot see the Status Indicator if you do not go to direct link. For example, if you searched for a member from member list, the link for search results is different than going directly to their page by clicking on their icon.

3. Best I remember, you must show large member icons on home page for the Ning feature to work.

I have added the code to a text file, and will attach here. I used your edited image for first instance. Change the other URLs for the smaller images if you wish.





I think your blockquote tag is one thing that throws me off, just fyi. All I need to know? Success.



No, you do not NEED to add to top of CSS. It is just your CSS. You have an error at bottom, somewhere. You will continue to experience issues where CSS will not work.


Best Regards,


Glad you found the error.



This is a great tip Jen!

I got a little creative and created my own online indicator for my Jag site - It's not animated, but it works!



AWESOME! Really nice looking, love the indicator in bright neon green - - purrrrfect (Jag engine).


doesn't seem to work on homepage

For some odd reason I had to use !important. That definitely wasn't the case in the beginning. Try this instead:

.module_members .online {
no-repeat scroll 3px 50% transparent!important;}

Best Regards,




© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips