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

Views: 1964

Attachments:

Replies to This Discussion

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
Glad you liked it! It was inspired by a member (misswings) question on the Ning Creator site.
;-)
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.
Probably the safest place is at the very bottom.
;-)
Thanks, :-)
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
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
Please see corrected code above. Replace your profile page code start text with:
div.xg_widget_profiles_profile .online
Funny how three letters makes the difference

Thanks JEN
awww, what a nice thing to say. Thank you Deborah! I feel the same about all you've done for the site!
:-)
Thanks this is useful ...
Thank You!!!!! I love it, it worked perfectly!

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips