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 Administrator JenSocial on April 10, 2010 at 6:38pm
Very easy to set up Thanks fantastic tip

Image and video hosting by TinyPic

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
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!

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips