JenSocial: Social Network Directory / Social Web Directory

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

  1. VIP Ning Club

    Join the Ning VIP Club!
  2. 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!
  3. Directory

  4. Network HELP

  5. Free Ning Tips

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

Views: 234

Replies to This Discussion

Nice hack. Thanks for sharing Jen. I Like it!
Sure! Glad you like it.
Best,
Jen
It looks very nice - thanks Jen!
Devon,
Glad you like it!
Best,
Jen
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;}


Thanks Jen. :-)
Good look , thanks Jen...!!!

Edith,
My pleasure. It looks very nice!
Best,
Jen
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?
Change all instance colors of this code:
-moz-box-shadow: 1px 1px 5px #999;
Change the #999 to your color.
Best,
Jen

RSS

JenSocial Virtual Shopping Mall & MarketPlace

Speak Your Mind!

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.

Your donation allows me to continue offering Free Support, Social Networking Tips, News, and free Directory Listings for Social Networks, in the largest Social
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!

 

 

© 2012   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service