Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...

VIP Ning Club
About VIP

~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!
Join Now!
Directory

Social Network Directory
Network HELP

Friends helping friends...
Free Ning Tips

Free Ning Network Tips

Make Your Image Avatars Stand Out On Home Page

Make the Avatars on your home page stand out. Add a thin frame border around your home page member avatars, and a nice shadow in FF.

This CSS will add a thin border and a little padding around your home page avatar images. It will include the member avatars in blogs, forums, latest activities, members, and for any avatar. It also adds a very subtle color when the avatars are hovered.

/*** Shadow and Hover Effect for Avatars on Home Page ***/
.xg_widget_main .xg_avatar img {    padding: 1px;
    border: solid 1px #ffffff;

}

.xg_widget_main .xg_avatar img {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

.xg_widget_main .xg_avatar img:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}



.xg_widget_main img.feed-avatar {

    padding: 1px;

    border: solid 1px #ffffff;

}

.xg_widget_main img.feed-avatar {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}





.xg_widget_main img.feed-avatar:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

/*** End Home Page Avatar Shadow and Hover Effect ***/

IMPORTANT NOTE:
If your member module avatars get cut off, add this code to bottom of the code for this tip - -
.xg_widget_main .module_members .xg_avatar img {width:90%!important;}

ADD TO FORUM MODULE ONLY:
Here's the trick. If adding the effect to all avatars like above messes things up, due to padding, where's there is not enough room; you could add the effects to individual modules. For example, to add to forum module only, you would
use this code:

.xg_widget_main .module_forum .xg_avatar img {    padding: 1px;    border: solid 1px #ffffff;

}

.xg_widget_main .module_forum .xg_avatar img {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

.xg_widget_main .module_forum .xg_avatar img:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

ADD THESE EFFECTS TO THE GROUP MODULE: The avatar code for all (top of discussion) will not be applied to the Group Module. Here's the code to accomplish that:

/* Groups Module Avatars*/.xg_widget_main .module_groups img {
    padding: 1px;

    border: solid 1px #ffffff;

}

.xg_widget_main .module_groups img {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

.xg_widget_main .module_groups img:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

Not sure why, but the #s on the Home Page Leaderboard bugged me. If it does the same for you, LOL - - here's the code to hide those numbers:

.mini-leaderboard-module td.lb-rank {display:none;}

Enjoy!
Jen

Tags: avatar, avatar stand out, frame avatar, frame image, image effects, image shadow, shadow

Favorite

0 members favorited this

Replies to This Discussion

Permalink Reply by Ashary on October 5, 2010 at 12:12am

Nice hack. Thanks for sharing Jen. I Like it!

Permalink Reply by JenSocial on October 5, 2010 at 12:19am

Sure! Glad you like it.
Best,
Jen

Permalink Reply by Devon Zone on October 5, 2010 at 1:06am

It looks very nice - thanks Jen!

Permalink Reply by JenSocial on October 5, 2010 at 9:27am

Devon,
Glad you like it!
Best,
Jen

Permalink Reply by JenSocial on October 5, 2010 at 9:42am

It looks great Devon. I did notice the member module avatar frames were getting cut off, which IMHO is fine because that is a look in and of itself. If you don't like that, I added this to the original tip.
IMPORTANT NOTE:
If your member module avatars get cut off, add this code to bottom of the code for this tip - -
.xg_widget_main .module_members .xg_avatar img {width:90%!important;}

Permalink Reply by Devon Zone on October 5, 2010 at 9:55pm

Thanks Jen. :-)

Permalink Reply by Edith on October 5, 2010 at 1:39am

Good look , thanks Jen...!!!

Permalink Reply by JenSocial on October 5, 2010 at 9:26am

Edith,
My pleasure. It looks very nice!
Best,
Jen

Permalink Reply by Predestined by God on October 5, 2010 at 9:19am

Like it! Is there a way to provide a different shadow color? Maybe a mild pink or turquoise since I have added a picture to my backgrounds?

Permalink Reply by JenSocial on October 5, 2010 at 9:26am

Change all instance colors of this code:
-moz-box-shadow: 1px 1px 5px #999;
Change the #999 to your color.
Best,
Jen

RSS

Welcome to
JenSocial: Social Network Directory / Social Web Directory

Sign Up
or Sign In

Or sign in with:

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

JOIN NOW!

Join the JenSocial Premium Ning Tips Club

All the work/tips created on JenSocial.com are provided free, but your donations allow me to continue offering Free Support, Tips, News, and free Directory Listings. Any amount is greatly appreciated.


Twitter	Facebook

Welcome to JenSocial Network Directory: Social Network Directory and Network Creator Hub for all Social Networking platforms:
Ning, Spruz, SocialGO, Grou.ps, JomSocial, BuddyPress, WackWall, etc...

Formerly the Ning Directory

Add Your Social Network, Find, Preview and Join, all kinds of great Social Networks (Social Communities) - - from Art to Pets!