JenSocial: Social Web Directory & Ning Tips
Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
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.
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:
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:
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
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
Replies to This Discussion
-
Permalink Reply by Devon Zone on -
It looks very nice - thanks Jen!
-
-
Permalink Reply by JenSocial on -
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
-
Thanks Jen. :-)
-
-
Permalink Reply by Predestined by God on -
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?
-
Latest VIP Ning Tips!
Hover Links for Preview
» shhhh, Huge Ning Designer Secret - - Insert Simple HTML at Top of List Pages: Blogs, Events, Forums, Groups, Photos, and Videos.
» Make Home Page Photo Module Stand Out
» Professional Splash Page Template (Landing Page) - Pro Accounts
» Beautiful Coda Content Slider for Ning Networks
» Move Group Pages Module To Top
Latest Ning Tip
Discussion Forum
Add Hover Image Effect to Latest Activity, Blogs, Forums, Notes and Text Boxes
Started by JenSocial. Last reply by English WorldWide Apr 18. 35 Replies 0 Favorites
Remove Right Column from All Pages - New Design Studio
Started by JenSocial. Last reply by Mandy P. Mar 6. 13 Replies 0 Favorites
Floating Quick Navigation
Started by Fire-Tech. Last reply by Fire-Tech Feb 18. 14 Replies 3 Favorites
Trending on JenSocial
© 2013 Created by JenSocial.
Powered by
