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

Views: 933

Attachments:

Replies to This Discussion

Permalink Reply by Temple of Our Lady of the Moon on April 12, 2010 at 7:54am
Ha thats very cute Jen. Much more fun than the little green light. Thanks.
Permalink Reply by JenSocial on April 12, 2010 at 12:44pm
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.
Best,
Jen
Permalink Reply by Rainbow Construction on April 19, 2010 at 3:37pm
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....
Permalink Reply by JenSocial on April 20, 2010 at 10:14am
Thanks RC.
;-)
Permalink Reply by The Networking Fool on May 14, 2010 at 2:01pm
Good point RC. Ning giveth, and Ning taketh away.

Anything we can do directly with CSS is a bonus.

As always, thanks Jen.
Permalink Reply by Mujer a los pies de Jesùs on July 3, 2011 at 6:42pm
thanks
Permalink Reply by JenSocial on July 6, 2011 at 5:42pm

Clive

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.

Best,

Jen

Attachments:
Permalink Reply by JenSocial on July 7, 2011 at 2:41am

Clive,

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

 

Fantastic!

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,

Jen

Permalink Reply by JenSocial on July 7, 2011 at 11:06am

Glad you found the error.

Best,

Jen

Permalink Reply by Robert Flindall on July 7, 2011 at 12:13am

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!

Cheers!

Rob

Permalink Reply by JenSocial on July 7, 2011 at 12:25am

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

=)

Permalink Reply by Roleplaysocial.me on December 9, 2011 at 3:31pm

doesn't seem to work on homepage

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips